@acorex-platform/framework-client 0.0.60 → 0.0.61

package/fesm2022/acorex-platform-framework-client-layout-widget-core.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, signal, computed, effect, untracked, Injectable, inject, ElementRef, DestroyRef, EventEmitter, Injector, ChangeDetectorRef, ViewChild, Input, Output, ChangeDetectionStrategy, Component, input, output, ViewContainerRef, Directive, NgModule } from '@angular/core';
+import { InjectionToken, signal, computed, effect, untracked, Injectable, inject, ElementRef, DestroyRef, PLATFORM_ID, EventEmitter, Injector, ChangeDetectorRef, ViewChild, Input, Output, ChangeDetectionStrategy, Component, input, output, ViewContainerRef, Directive, NgModule } from '@angular/core';
 import { AXPContextStore, AXPDeviceService, AXPExpressionEvaluatorService, AXPDebugService, FORM_DIRTY_TRACE_NS, OVERLAY_WIDGET_SETTLE_TRACE_NS } from '@acorex-platform/framework-client/core';
 import { AXPPageStatus, AXPWidgetStatus, AXP_WIDGET_TOKEN, AXP_WIDGET_COLUMN_TOKEN, layoutProfileMediumFromRenderMode, resolveLayoutProfile, createStringProperty, createBooleanProperty, createSelectProperty, createNumberProperty, cloneProperty } from '@acorex-platform/framework-shared/widget-core';
 import { cloneDeep, set, get, isEqual, isNil, isUndefined, isObjectLike, merge, sum, isEmpty, isString } from 'lodash-es';
@@ -15,7 +15,7 @@ import * as i2 from '@acorex/core/translation';
 import { AXTranslationService, AXTranslationModule } from '@acorex/core/translation';
 import { PortalModule } from '@angular/cdk/portal';
 import * as i1 from '@angular/common';
-import { CommonModule, NgComponentOutlet } from '@angular/common';
+import { isPlatformBrowser, CommonModule, NgComponentOutlet } from '@angular/common';
 import { AXDataTableColumnComponent, AXBaseDataTable } from '@acorex/components/data-table';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { AXUnsubscriber } from '@acorex/core/utils';
@@ -2123,6 +2123,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
                 }]
         }] });
 
+const AXP_WIDGET_COLUMN_AUTO_FIT = new InjectionToken('AXP_WIDGET_COLUMN_AUTO_FIT');
+
 class AXPWidgetColumnRendererComponent extends AXDataTableColumnComponent {
     constructor() {
         super(...arguments);
@@ -2131,6 +2133,7 @@ class AXPWidgetColumnRendererComponent extends AXDataTableColumnComponent {
         this.expressionEvaluator = inject(AXPExpressionEvaluatorService);
         this.translation = inject(AXTranslationService);
         this.destroyRef = inject(DestroyRef);
+        this.platformId = inject(PLATFORM_ID);
         /** Original band title key; caption becomes resolved text and must not be re-read for i18n. */
         this.bandCaptionI18nKey = null;
         this.bandLocaleWatchStarted = false;
@@ -2143,6 +2146,21 @@ class AXPWidgetColumnRendererComponent extends AXDataTableColumnComponent {
         this.pendingEvaluations = new Set();
         this.changeDetectionScheduled = false;
         this.MAX_CACHE_SIZE = 1000; // Limit cache size to prevent memory leaks
+        /** Column was configured with `width: 'auto'` and should follow cell content. */
+        this.autoWidthColumn = false;
+        /** Further content passes are ignored after the directive-rendered cell has been measured. */
+        this.contentAutoFitSettled = false;
+        this.contentAutoFitShouldSettle = false;
+        this.contentAutoFitAttempts = 0;
+        this.contentAutoFitTimer = null;
+        /** Matches the cap `ax-data-table` uses for its own auto-width pass. */
+        this.contentAutoFitMaxWidth = 500;
+        this.stopContentAutoFit = this.destroyRef.onDestroy(() => {
+            if (this.contentAutoFitTimer != null) {
+                clearTimeout(this.contentAutoFitTimer);
+                this.contentAutoFitTimer = null;
+            }
+        });
         /** When true, header click cycles sort (handled by parent; synced with list sort state). */
         this.sortEnabled = false;
         this.sortToggle = new EventEmitter();
@@ -2304,8 +2322,10 @@ class AXPWidgetColumnRendererComponent extends AXDataTableColumnComponent {
                     : (this.mergedOptions().width ?? '200px');
         this.allowResizing = this.mergedOptions().allowResizing !== false;
         this.allowSorting = this.sortEnabled;
+        this.syncAutoWidthIntent();
         this.cdr.detectChanges();
         this.fixed = this.columnFixed;
+        this.scheduleContentAutoFit();
     }
     ngAfterContentInit() {
         if (!this.isBand) {
@@ -2325,6 +2345,7 @@ class AXPWidgetColumnRendererComponent extends AXDataTableColumnComponent {
         if (this.customWidth) {
             this.width = this.customWidth;
         }
+        this.syncAutoWidthIntent();
         if (this.node) {
             this.allowResizing = this.mergedOptions().allowResizing !== false;
         }
@@ -2437,6 +2458,7 @@ class AXPWidgetColumnRendererComponent extends AXDataTableColumnComponent {
         requestAnimationFrame(() => {
             this.cdr.detectChanges();
             this.changeDetectionScheduled = false;
+            this.scheduleContentAutoFit();
         });
     }
     /**
@@ -2451,6 +2473,52 @@ class AXPWidgetColumnRendererComponent extends AXDataTableColumnComponent {
         }
     }
     //#endregion
+    /**
+     * Re-measures this column after cell widgets exist.
+     * The table's own pass runs once, about 100ms after rows arrive, which is before
+     * `ngComponentOutlet` / `axp-widget-renderer` have painted.
+     */
+    scheduleContentAutoFit(request) {
+        if (!isPlatformBrowser(this.platformId) || !this.autoWidthColumn || this.contentAutoFitSettled) {
+            return;
+        }
+        this.contentAutoFitShouldSettle = this.contentAutoFitShouldSettle || request?.settle === true;
+        if (this.contentAutoFitTimer != null) {
+            clearTimeout(this.contentAutoFitTimer);
+        }
+        this.contentAutoFitTimer = setTimeout(() => {
+            this.contentAutoFitTimer = null;
+            if (!this.autoWidthColumn || this.contentAutoFitSettled) {
+                return;
+            }
+            if (this.pendingEvaluations.size > 0 && this.contentAutoFitAttempts < 20) {
+                this.contentAutoFitAttempts += 1;
+                this.scheduleContentAutoFit({ settle: this.contentAutoFitShouldSettle });
+                return;
+            }
+            this.contentAutoFitAttempts = 0;
+            if (this.contentAutoFitShouldSettle) {
+                this.contentAutoFitSettled = true;
+            }
+            this.contentAutoFitShouldSettle = false;
+            this.grid.autoFitColumnByName(this.name, { maxWidth: this.contentAutoFitMaxWidth });
+        }, 100);
+    }
+    syncAutoWidthIntent() {
+        if (!this.node || this.isBand) {
+            this.autoWidthColumn = false;
+        }
+        else {
+            const configured = this.customWidth || this.mergedOptions()?.width;
+            this.autoWidthColumn = configured === 'auto' || this.width === 'auto';
+        }
+        if (!this.autoWidthColumn && this.contentAutoFitTimer != null) {
+            clearTimeout(this.contentAutoFitTimer);
+            this.contentAutoFitTimer = null;
+            this.contentAutoFitShouldSettle = false;
+            this.contentAutoFitAttempts = 0;
+        }
+    }
     requireNode() {
         if (!this.node) {
             throw new Error('axp-widget-column-renderer: node is required for leaf columns');
@@ -2485,6 +2553,10 @@ class AXPWidgetColumnRendererComponent extends AXDataTableColumnComponent {
                             provide: AXP_WIDGET_COLUMN_TOKEN,
                             useValue: tokenValue,
                         },
+                        {
+                            provide: AXP_WIDGET_COLUMN_AUTO_FIT,
+                            useValue: this,
+                        },
                     ],
                 });
                 this.evictCacheIfNeeded();
@@ -2520,6 +2592,10 @@ class AXPWidgetColumnRendererComponent extends AXDataTableColumnComponent {
                                 provide: AXP_WIDGET_COLUMN_TOKEN,
                                 useValue: tokenValue,
                             },
+                            {
+                                provide: AXP_WIDGET_COLUMN_AUTO_FIT,
+                                useValue: this,
+                            },
                         ],
                     });
                     // Replace cached injector to force component recreation on next render
@@ -2548,6 +2624,10 @@ class AXPWidgetColumnRendererComponent extends AXDataTableColumnComponent {
                         provide: AXP_WIDGET_COLUMN_TOKEN,
                         useValue: tokenValue,
                     },
+                    {
+                        provide: AXP_WIDGET_COLUMN_AUTO_FIT,
+                        useValue: this,
+                    },
                 ],
             });
             // Cache the initial injector
@@ -2563,6 +2643,10 @@ class AXPWidgetColumnRendererComponent extends AXDataTableColumnComponent {
                 provide: AXDataTableColumnComponent,
                 useExisting: AXPWidgetColumnRendererComponent,
             },
+            {
+                provide: AXP_WIDGET_COLUMN_AUTO_FIT,
+                useExisting: AXPWidgetColumnRendererComponent,
+            },
         ], viewQueries: [{ propertyName: "_contentFooterTemplate", first: true, predicate: ["footer"], descendants: true }, { propertyName: "_contentCellTemplate", first: true, predicate: ["cell"], descendants: true }, { propertyName: "_contentHeaderTemplate", first: true, predicate: ["header"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: `
     <ng-template #header>
       <div
@@ -2807,6 +2891,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
                             provide: AXDataTableColumnComponent,
                             useExisting: AXPWidgetColumnRendererComponent,
                         },
+                        {
+                            provide: AXP_WIDGET_COLUMN_AUTO_FIT,
+                            useExisting: AXPWidgetColumnRendererComponent,
+                        },
                     ], changeDetection: ChangeDetectionStrategy.OnPush, inputs: ['caption'], standalone: false, styles: ["@layer properties;.axp-widget-column-header--sortable{position:relative;width:100%;min-width:0px;cursor:pointer}.axp-widget-column-header--sortable:hover .axp-widget-column-header__sort,.axp-widget-column-header--sortable:focus-within .axp-widget-column-header__sort,.axp-widget-column-header--sortable.axp-widget-column-header--sort-active .axp-widget-column-header__sort{opacity:1}.axp-widget-column-header--sortable:hover .axp-widget-column-header__caption,.axp-widget-column-header--sortable:focus-within .axp-widget-column-header__caption,.axp-widget-column-header--sortable.axp-widget-column-header--sort-active .axp-widget-column-header__caption{padding-inline-end:calc(var(--spacing, .25rem) * 5)}.axp-widget-column-header--sortable.axp-widget-column-header--sort-at-start:hover .axp-widget-column-header__caption,.axp-widget-column-header--sortable.axp-widget-column-header--sort-at-start:focus-within .axp-widget-column-header__caption,.axp-widget-column-header--sortable.axp-widget-column-header--sort-at-start.axp-widget-column-header--sort-active .axp-widget-column-header__caption{padding-inline-start:calc(var(--spacing, .25rem) * 5);padding-inline-end:0px}.axp-widget-column-header__caption{display:block;width:100%;min-width:0px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.axp-widget-column-header__sort{position:absolute;inset-block:0;inset-inline-end:0;z-index:1;display:flex;align-items:center;gap:calc(var(--spacing, .25rem) * .5);opacity:0;transition:opacity .15s ease}.axp-widget-column-header--sort-at-start .axp-widget-column-header__sort{inset-inline-start:0;inset-inline-end:auto}.axp-widget-column-header__sort i{display:block;--tw-leading: 1;line-height:1;font-size:.625rem}.axp-widget-column-header__sort-priority{--tw-leading: 1;line-height:1}:host-context(.ax-data-table-head-cell.ax-interactive:hover) .axp-widget-column-header__sort,:host-context(.ax-data-table-head-cell.ax-interactive:focus-within) .axp-widget-column-header__sort,:host-context(.ax-data-table-head-cell) .axp-widget-column-header--sort-active .axp-widget-column-header__sort{opacity:1}@property --tw-leading{syntax: \"*\"; inherits: false;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-leading: initial}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"] }]
         }], propDecorators: { customExpandIcon: [{
                 type: Input
@@ -3246,6 +3334,7 @@ class AXPWidgetRendererDirective {
         this.widgetService = inject(AXPWidgetRegistryService);
         this.expressionEvaluator = inject(AXPExpressionEvaluatorService);
         this.viewContainerRef = inject(ViewContainerRef);
+        this.columnAutoFit = inject(AXP_WIDGET_COLUMN_AUTO_FIT, { optional: true });
         this.isLoading = signal(false, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "isLoading" }] : /* istanbul ignore next */ []));
         this.isVisible = signal(true, /* @ts-ignore */
@@ -3900,6 +3989,7 @@ class AXPWidgetRendererDirective {
             const loadEvent = { sender: this, widget: this.instance };
             this.onLoadEvent.next(loadEvent);
             this.onLoad.emit(loadEvent);
+            this.columnAutoFit?.scheduleContentAutoFit({ settle: true });
         }
         catch (error) {
             // console.error('Error loading component:', error);