@acorex-platform/framework-client 2.0.0-next.11 → 2.0.0-next.12
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -2115,6 +2115,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
|
|
|
2115
2115
|
type: Injectable
|
|
2116
2116
|
}] });
|
|
2117
2117
|
|
|
2118
|
+
const AXP_WIDGET_COLUMN_AUTO_FIT = new InjectionToken('AXP_WIDGET_COLUMN_AUTO_FIT');
|
|
2119
|
+
|
|
2118
2120
|
//#region ---- Imports ----
|
|
2119
2121
|
/**
|
|
2120
2122
|
* Injection token for widget definition providers.
|
|
@@ -2200,8 +2202,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
|
|
|
2200
2202
|
}]
|
|
2201
2203
|
}] });
|
|
2202
2204
|
|
|
2203
|
-
const AXP_WIDGET_COLUMN_AUTO_FIT = new InjectionToken('AXP_WIDGET_COLUMN_AUTO_FIT');
|
|
2204
|
-
|
|
2205
2205
|
class AXPWidgetColumnRendererComponent extends AXDataTableColumnComponent {
|
|
2206
2206
|
constructor() {
|
|
2207
2207
|
super(...arguments);
|
|
@@ -2277,6 +2277,9 @@ class AXPWidgetColumnRendererComponent extends AXDataTableColumnComponent {
|
|
|
2277
2277
|
this.loadingRow.set(row);
|
|
2278
2278
|
await this.grid.expandRow(row);
|
|
2279
2279
|
this.loadingRow.set(null);
|
|
2280
|
+
this.contentAutoFitSettled = false;
|
|
2281
|
+
this.contentAutoFitShouldSettle = false;
|
|
2282
|
+
this.scheduleContentAutoFit();
|
|
2280
2283
|
// if (row.data?.__meta__?.expanded === undefined) {
|
|
2281
2284
|
// this.width = `${parseInt(this.width as string) + 24}px`;
|
|
2282
2285
|
// }
|
|
@@ -2333,9 +2336,7 @@ class AXPWidgetColumnRendererComponent extends AXDataTableColumnComponent {
|
|
|
2333
2336
|
return this.normalizeColumnAlignment(align);
|
|
2334
2337
|
}
|
|
2335
2338
|
if (typeof align === 'object' && !Array.isArray(align)) {
|
|
2336
|
-
const raw = side === 'header'
|
|
2337
|
-
? align.header
|
|
2338
|
-
: align.cell;
|
|
2339
|
+
const raw = side === 'header' ? align.header : align.cell;
|
|
2339
2340
|
return this.normalizeColumnAlignment(raw);
|
|
2340
2341
|
}
|
|
2341
2342
|
return 'start';
|
|
@@ -2391,12 +2392,7 @@ class AXPWidgetColumnRendererComponent extends AXDataTableColumnComponent {
|
|
|
2391
2392
|
},
|
|
2392
2393
|
],
|
|
2393
2394
|
});
|
|
2394
|
-
this.width =
|
|
2395
|
-
this.mergedOptions().width === 'auto'
|
|
2396
|
-
? 'auto'
|
|
2397
|
-
: this.customWidth
|
|
2398
|
-
? this.customWidth
|
|
2399
|
-
: (this.mergedOptions().width ?? '200px');
|
|
2395
|
+
this.width = this.mergedOptions().width === 'auto' ? 'auto' : this.customWidth ? this.customWidth : (this.mergedOptions().width ?? '200px');
|
|
2400
2396
|
this.allowResizing = this.mergedOptions().allowResizing !== false;
|
|
2401
2397
|
this.allowSorting = this.sortEnabled;
|
|
2402
2398
|
this.syncAutoWidthIntent();
|
|
@@ -2460,9 +2456,7 @@ class AXPWidgetColumnRendererComponent extends AXDataTableColumnComponent {
|
|
|
2460
2456
|
return;
|
|
2461
2457
|
}
|
|
2462
2458
|
this.bandLocaleWatchStarted = true;
|
|
2463
|
-
this.translation.langChanges
|
|
2464
|
-
.pipe(takeUntilDestroyed(this.destroyRef))
|
|
2465
|
-
.subscribe(() => {
|
|
2459
|
+
this.translation.langChanges$.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(() => {
|
|
2466
2460
|
if (this.isBand && this.bandCaptionI18nKey) {
|
|
2467
2461
|
this.resolveBandCaption();
|
|
2468
2462
|
}
|
|
@@ -2473,8 +2467,7 @@ class AXPWidgetColumnRendererComponent extends AXDataTableColumnComponent {
|
|
|
2473
2467
|
return;
|
|
2474
2468
|
}
|
|
2475
2469
|
this.caption = text;
|
|
2476
|
-
const topLevel = this.grid
|
|
2477
|
-
.topLevelColumnsList;
|
|
2470
|
+
const topLevel = this.grid.topLevelColumnsList;
|
|
2478
2471
|
if (topLevel) {
|
|
2479
2472
|
topLevel.set([...topLevel()]);
|
|
2480
2473
|
}
|
|
@@ -2506,9 +2499,7 @@ class AXPWidgetColumnRendererComponent extends AXDataTableColumnComponent {
|
|
|
2506
2499
|
// Use a hash of key properties instead of full JSON.stringify
|
|
2507
2500
|
// This is much faster for large objects
|
|
2508
2501
|
const keyProps = ['id', 'code', 'name', 'title'];
|
|
2509
|
-
const keyValues = keyProps
|
|
2510
|
-
.map((prop) => data?.[prop])
|
|
2511
|
-
.filter((v) => v != null);
|
|
2502
|
+
const keyValues = keyProps.map((prop) => data?.[prop]).filter((v) => v != null);
|
|
2512
2503
|
if (keyValues.length > 0) {
|
|
2513
2504
|
return `row-${keyValues.join('-')}`;
|
|
2514
2505
|
}
|
|
@@ -2559,7 +2550,8 @@ class AXPWidgetColumnRendererComponent extends AXDataTableColumnComponent {
|
|
|
2559
2550
|
if (!isPlatformBrowser(this.platformId) || !this.autoWidthColumn || this.contentAutoFitSettled) {
|
|
2560
2551
|
return;
|
|
2561
2552
|
}
|
|
2562
|
-
|
|
2553
|
+
const allowSettle = this.expandHandler !== true;
|
|
2554
|
+
this.contentAutoFitShouldSettle = this.contentAutoFitShouldSettle || (request?.settle === true && allowSettle);
|
|
2563
2555
|
if (this.contentAutoFitTimer != null) {
|
|
2564
2556
|
clearTimeout(this.contentAutoFitTimer);
|
|
2565
2557
|
}
|
|
@@ -2731,23 +2723,13 @@ class AXPWidgetColumnRendererComponent extends AXDataTableColumnComponent {
|
|
|
2731
2723
|
[class.flex]="!sortEnabled"
|
|
2732
2724
|
[class.items-center]="!sortEnabled"
|
|
2733
2725
|
[class.axp-widget-column-header--sortable]="sortEnabled"
|
|
2734
|
-
[class.axp-widget-column-header--sort-at-start]="
|
|
2735
|
-
|
|
2736
|
-
"
|
|
2737
|
-
[class.axp-widget-column-header--sort-active]="
|
|
2738
|
-
headerSortDirection === 'asc' || headerSortDirection === 'desc'
|
|
2739
|
-
"
|
|
2726
|
+
[class.axp-widget-column-header--sort-at-start]="sortEnabled && getHeaderTextAlign() === 'end'"
|
|
2727
|
+
[class.axp-widget-column-header--sort-active]="headerSortDirection === 'asc' || headerSortDirection === 'desc'"
|
|
2740
2728
|
[class.gap-1]="!sortEnabled"
|
|
2741
|
-
[style.justify-content]="
|
|
2742
|
-
sortEnabled ? 'flex-start' : getHeaderJustifyContent()
|
|
2743
|
-
"
|
|
2729
|
+
[style.justify-content]="sortEnabled ? 'flex-start' : getHeaderJustifyContent()"
|
|
2744
2730
|
(click)="onHeaderClick($event)"
|
|
2745
2731
|
>
|
|
2746
|
-
<span
|
|
2747
|
-
class="axp-widget-column-header__caption truncate"
|
|
2748
|
-
[class.axp-widget-column-header__caption--with-sort]="sortEnabled"
|
|
2749
|
-
[style.text-align]="sortEnabled ? getHeaderTextAlign() : null"
|
|
2750
|
-
>
|
|
2732
|
+
<span class="axp-widget-column-header__caption truncate" [class.axp-widget-column-header__caption--with-sort]="sortEnabled" [style.text-align]="sortEnabled ? getHeaderTextAlign() : null">
|
|
2751
2733
|
@if (isBand) {
|
|
2752
2734
|
{{ caption }}
|
|
2753
2735
|
} @else {
|
|
@@ -2757,84 +2739,40 @@ class AXPWidgetColumnRendererComponent extends AXDataTableColumnComponent {
|
|
|
2757
2739
|
@if (sortEnabled) {
|
|
2758
2740
|
<span class="axp-widget-column-header__sort">
|
|
2759
2741
|
@if (headerSortPriority !== undefined && headerSortPriority > 1) {
|
|
2760
|
-
<span
|
|
2761
|
-
class="axp-widget-column-header__sort-priority text-xs opacity-70"
|
|
2762
|
-
>{{ headerSortPriority }}</span
|
|
2763
|
-
>
|
|
2742
|
+
<span class="axp-widget-column-header__sort-priority text-xs opacity-70">{{ headerSortPriority }}</span>
|
|
2764
2743
|
}
|
|
2765
|
-
<i
|
|
2766
|
-
|
|
2767
|
-
[class.text-primary]="headerSortDirection === 'asc'"
|
|
2768
|
-
></i>
|
|
2769
|
-
<i
|
|
2770
|
-
class="fa-solid fa-arrow-down-long text-neutral-400"
|
|
2771
|
-
[class.text-primary]="headerSortDirection === 'desc'"
|
|
2772
|
-
></i>
|
|
2744
|
+
<i class="fa-solid fa-arrow-up-long text-neutral-400" [class.text-primary]="headerSortDirection === 'asc'"></i>
|
|
2745
|
+
<i class="fa-solid fa-arrow-down-long text-neutral-400" [class.text-primary]="headerSortDirection === 'desc'"></i>
|
|
2773
2746
|
</span>
|
|
2774
2747
|
}
|
|
2775
2748
|
</div>
|
|
2776
2749
|
</ng-template>
|
|
2777
2750
|
<ng-template #cell let-row>
|
|
2778
2751
|
@if (expandHandler) {
|
|
2779
|
-
<div
|
|
2780
|
-
class="ax-data-table-nested-indent w-full"
|
|
2781
|
-
[attr.data-level]="row.data?.__meta__?.level || 0"
|
|
2782
|
-
>
|
|
2752
|
+
<div class="ax-data-table-nested-indent w-full" [attr.data-level]="row.data?.__meta__?.level || 0">
|
|
2783
2753
|
@if (hasExpandableRow(row)) {
|
|
2784
|
-
<div
|
|
2785
|
-
(click)="handleExpandRow(row, $event)"
|
|
2786
|
-
class="ax-expand-handler"
|
|
2787
|
-
id="ax-expand-handler-container"
|
|
2788
|
-
>
|
|
2754
|
+
<div (click)="handleExpandRow(row, $event)" class="ax-expand-handler" id="ax-expand-handler-container">
|
|
2789
2755
|
@if (loadingRow() === row) {
|
|
2790
|
-
<i
|
|
2791
|
-
class="fas fa-spinner-third animate-twSpin animate-infinite"
|
|
2792
|
-
></i>
|
|
2756
|
+
<i class="fas fa-spinner-third animate-twSpin animate-infinite"></i>
|
|
2793
2757
|
} @else {
|
|
2794
2758
|
@if (row.data?.__meta__?.expanded) {
|
|
2795
|
-
<i
|
|
2796
|
-
[class]="
|
|
2797
|
-
customCollapseIcon ||
|
|
2798
|
-
'far fa-minus-square text-md opacity-75'
|
|
2799
|
-
"
|
|
2800
|
-
></i>
|
|
2759
|
+
<i [class]="customCollapseIcon || 'far fa-minus-square text-md opacity-75'"></i>
|
|
2801
2760
|
} @else {
|
|
2802
|
-
<i
|
|
2803
|
-
[class]="
|
|
2804
|
-
customExpandIcon || 'far fa-plus-square text-md opacity-75'
|
|
2805
|
-
"
|
|
2806
|
-
></i>
|
|
2761
|
+
<i [class]="customExpandIcon || 'far fa-plus-square text-md opacity-75'"></i>
|
|
2807
2762
|
}
|
|
2808
2763
|
}
|
|
2809
2764
|
</div>
|
|
2810
2765
|
}
|
|
2811
2766
|
@if (component && row?.data) {
|
|
2812
2767
|
<div class="ax-data-table-cell-text min-w-0 flex-1">
|
|
2813
|
-
<ng-container
|
|
2814
|
-
*ngComponentOutlet="
|
|
2815
|
-
component;
|
|
2816
|
-
injector: getRowInjector(row.data);
|
|
2817
|
-
inputs: getInputs(row.data)
|
|
2818
|
-
"
|
|
2819
|
-
></ng-container>
|
|
2768
|
+
<ng-container *ngComponentOutlet="component; injector: getRowInjector(row.data); inputs: getInputs(row.data)"></ng-container>
|
|
2820
2769
|
</div>
|
|
2821
2770
|
}
|
|
2822
2771
|
</div>
|
|
2823
2772
|
} @else {
|
|
2824
|
-
<div
|
|
2825
|
-
class="w-full min-w-0 max-w-full"
|
|
2826
|
-
[class.flex]="getCellUseFlexLayout()"
|
|
2827
|
-
[class.items-center]="getCellUseFlexLayout()"
|
|
2828
|
-
[style.justify-content]="getCellJustifyContent()"
|
|
2829
|
-
>
|
|
2773
|
+
<div class="w-full min-w-0 max-w-full" [class.flex]="getCellUseFlexLayout()" [class.items-center]="getCellUseFlexLayout()" [style.justify-content]="getCellJustifyContent()">
|
|
2830
2774
|
@if (component && row?.data) {
|
|
2831
|
-
<ng-container
|
|
2832
|
-
*ngComponentOutlet="
|
|
2833
|
-
component;
|
|
2834
|
-
injector: getRowInjector(row.data);
|
|
2835
|
-
inputs: getInputs(row.data)
|
|
2836
|
-
"
|
|
2837
|
-
></ng-container>
|
|
2775
|
+
<ng-container *ngComponentOutlet="component; injector: getRowInjector(row.data); inputs: getInputs(row.data)"></ng-container>
|
|
2838
2776
|
}
|
|
2839
2777
|
</div>
|
|
2840
2778
|
}
|
|
@@ -2852,23 +2790,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
|
|
|
2852
2790
|
[class.flex]="!sortEnabled"
|
|
2853
2791
|
[class.items-center]="!sortEnabled"
|
|
2854
2792
|
[class.axp-widget-column-header--sortable]="sortEnabled"
|
|
2855
|
-
[class.axp-widget-column-header--sort-at-start]="
|
|
2856
|
-
|
|
2857
|
-
"
|
|
2858
|
-
[class.axp-widget-column-header--sort-active]="
|
|
2859
|
-
headerSortDirection === 'asc' || headerSortDirection === 'desc'
|
|
2860
|
-
"
|
|
2793
|
+
[class.axp-widget-column-header--sort-at-start]="sortEnabled && getHeaderTextAlign() === 'end'"
|
|
2794
|
+
[class.axp-widget-column-header--sort-active]="headerSortDirection === 'asc' || headerSortDirection === 'desc'"
|
|
2861
2795
|
[class.gap-1]="!sortEnabled"
|
|
2862
|
-
[style.justify-content]="
|
|
2863
|
-
sortEnabled ? 'flex-start' : getHeaderJustifyContent()
|
|
2864
|
-
"
|
|
2796
|
+
[style.justify-content]="sortEnabled ? 'flex-start' : getHeaderJustifyContent()"
|
|
2865
2797
|
(click)="onHeaderClick($event)"
|
|
2866
2798
|
>
|
|
2867
|
-
<span
|
|
2868
|
-
class="axp-widget-column-header__caption truncate"
|
|
2869
|
-
[class.axp-widget-column-header__caption--with-sort]="sortEnabled"
|
|
2870
|
-
[style.text-align]="sortEnabled ? getHeaderTextAlign() : null"
|
|
2871
|
-
>
|
|
2799
|
+
<span class="axp-widget-column-header__caption truncate" [class.axp-widget-column-header__caption--with-sort]="sortEnabled" [style.text-align]="sortEnabled ? getHeaderTextAlign() : null">
|
|
2872
2800
|
@if (isBand) {
|
|
2873
2801
|
{{ caption }}
|
|
2874
2802
|
} @else {
|
|
@@ -2878,84 +2806,40 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
|
|
|
2878
2806
|
@if (sortEnabled) {
|
|
2879
2807
|
<span class="axp-widget-column-header__sort">
|
|
2880
2808
|
@if (headerSortPriority !== undefined && headerSortPriority > 1) {
|
|
2881
|
-
<span
|
|
2882
|
-
class="axp-widget-column-header__sort-priority text-xs opacity-70"
|
|
2883
|
-
>{{ headerSortPriority }}</span
|
|
2884
|
-
>
|
|
2809
|
+
<span class="axp-widget-column-header__sort-priority text-xs opacity-70">{{ headerSortPriority }}</span>
|
|
2885
2810
|
}
|
|
2886
|
-
<i
|
|
2887
|
-
|
|
2888
|
-
[class.text-primary]="headerSortDirection === 'asc'"
|
|
2889
|
-
></i>
|
|
2890
|
-
<i
|
|
2891
|
-
class="fa-solid fa-arrow-down-long text-neutral-400"
|
|
2892
|
-
[class.text-primary]="headerSortDirection === 'desc'"
|
|
2893
|
-
></i>
|
|
2811
|
+
<i class="fa-solid fa-arrow-up-long text-neutral-400" [class.text-primary]="headerSortDirection === 'asc'"></i>
|
|
2812
|
+
<i class="fa-solid fa-arrow-down-long text-neutral-400" [class.text-primary]="headerSortDirection === 'desc'"></i>
|
|
2894
2813
|
</span>
|
|
2895
2814
|
}
|
|
2896
2815
|
</div>
|
|
2897
2816
|
</ng-template>
|
|
2898
2817
|
<ng-template #cell let-row>
|
|
2899
2818
|
@if (expandHandler) {
|
|
2900
|
-
<div
|
|
2901
|
-
class="ax-data-table-nested-indent w-full"
|
|
2902
|
-
[attr.data-level]="row.data?.__meta__?.level || 0"
|
|
2903
|
-
>
|
|
2819
|
+
<div class="ax-data-table-nested-indent w-full" [attr.data-level]="row.data?.__meta__?.level || 0">
|
|
2904
2820
|
@if (hasExpandableRow(row)) {
|
|
2905
|
-
<div
|
|
2906
|
-
(click)="handleExpandRow(row, $event)"
|
|
2907
|
-
class="ax-expand-handler"
|
|
2908
|
-
id="ax-expand-handler-container"
|
|
2909
|
-
>
|
|
2821
|
+
<div (click)="handleExpandRow(row, $event)" class="ax-expand-handler" id="ax-expand-handler-container">
|
|
2910
2822
|
@if (loadingRow() === row) {
|
|
2911
|
-
<i
|
|
2912
|
-
class="fas fa-spinner-third animate-twSpin animate-infinite"
|
|
2913
|
-
></i>
|
|
2823
|
+
<i class="fas fa-spinner-third animate-twSpin animate-infinite"></i>
|
|
2914
2824
|
} @else {
|
|
2915
2825
|
@if (row.data?.__meta__?.expanded) {
|
|
2916
|
-
<i
|
|
2917
|
-
[class]="
|
|
2918
|
-
customCollapseIcon ||
|
|
2919
|
-
'far fa-minus-square text-md opacity-75'
|
|
2920
|
-
"
|
|
2921
|
-
></i>
|
|
2826
|
+
<i [class]="customCollapseIcon || 'far fa-minus-square text-md opacity-75'"></i>
|
|
2922
2827
|
} @else {
|
|
2923
|
-
<i
|
|
2924
|
-
[class]="
|
|
2925
|
-
customExpandIcon || 'far fa-plus-square text-md opacity-75'
|
|
2926
|
-
"
|
|
2927
|
-
></i>
|
|
2828
|
+
<i [class]="customExpandIcon || 'far fa-plus-square text-md opacity-75'"></i>
|
|
2928
2829
|
}
|
|
2929
2830
|
}
|
|
2930
2831
|
</div>
|
|
2931
2832
|
}
|
|
2932
2833
|
@if (component && row?.data) {
|
|
2933
2834
|
<div class="ax-data-table-cell-text min-w-0 flex-1">
|
|
2934
|
-
<ng-container
|
|
2935
|
-
*ngComponentOutlet="
|
|
2936
|
-
component;
|
|
2937
|
-
injector: getRowInjector(row.data);
|
|
2938
|
-
inputs: getInputs(row.data)
|
|
2939
|
-
"
|
|
2940
|
-
></ng-container>
|
|
2835
|
+
<ng-container *ngComponentOutlet="component; injector: getRowInjector(row.data); inputs: getInputs(row.data)"></ng-container>
|
|
2941
2836
|
</div>
|
|
2942
2837
|
}
|
|
2943
2838
|
</div>
|
|
2944
2839
|
} @else {
|
|
2945
|
-
<div
|
|
2946
|
-
class="w-full min-w-0 max-w-full"
|
|
2947
|
-
[class.flex]="getCellUseFlexLayout()"
|
|
2948
|
-
[class.items-center]="getCellUseFlexLayout()"
|
|
2949
|
-
[style.justify-content]="getCellJustifyContent()"
|
|
2950
|
-
>
|
|
2840
|
+
<div class="w-full min-w-0 max-w-full" [class.flex]="getCellUseFlexLayout()" [class.items-center]="getCellUseFlexLayout()" [style.justify-content]="getCellJustifyContent()">
|
|
2951
2841
|
@if (component && row?.data) {
|
|
2952
|
-
<ng-container
|
|
2953
|
-
*ngComponentOutlet="
|
|
2954
|
-
component;
|
|
2955
|
-
injector: getRowInjector(row.data);
|
|
2956
|
-
inputs: getInputs(row.data)
|
|
2957
|
-
"
|
|
2958
|
-
></ng-container>
|
|
2842
|
+
<ng-container *ngComponentOutlet="component; injector: getRowInjector(row.data); inputs: getInputs(row.data)"></ng-container>
|
|
2959
2843
|
}
|
|
2960
2844
|
</div>
|
|
2961
2845
|
}
|