@igo2/common 21.0.0-next.2 → 21.0.0-next.21
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.
- package/fesm2022/igo2-common-action.mjs +46 -61
- package/fesm2022/igo2-common-action.mjs.map +1 -1
- package/fesm2022/igo2-common-backdrop.mjs +11 -19
- package/fesm2022/igo2-common-backdrop.mjs.map +1 -1
- package/fesm2022/igo2-common-badge.mjs +7 -7
- package/fesm2022/igo2-common-badge.mjs.map +1 -1
- package/fesm2022/igo2-common-clickout.mjs +7 -7
- package/fesm2022/igo2-common-clone.mjs +7 -7
- package/fesm2022/igo2-common-collapsible.mjs +15 -23
- package/fesm2022/igo2-common-collapsible.mjs.map +1 -1
- package/fesm2022/igo2-common-color.mjs +8 -8
- package/fesm2022/igo2-common-color.mjs.map +1 -1
- package/fesm2022/igo2-common-confirm-dialog.mjs +12 -11
- package/fesm2022/igo2-common-confirm-dialog.mjs.map +1 -1
- package/fesm2022/igo2-common-context-menu.mjs +15 -13
- package/fesm2022/igo2-common-context-menu.mjs.map +1 -1
- package/fesm2022/igo2-common-custom-html.mjs +10 -10
- package/fesm2022/igo2-common-datepicker.mjs +23 -17
- package/fesm2022/igo2-common-datepicker.mjs.map +1 -1
- package/fesm2022/igo2-common-dom.mjs +10 -8
- package/fesm2022/igo2-common-dom.mjs.map +1 -1
- package/fesm2022/igo2-common-drag-drop.mjs +69 -37
- package/fesm2022/igo2-common-drag-drop.mjs.map +1 -1
- package/fesm2022/igo2-common-dynamic-component.mjs +23 -17
- package/fesm2022/igo2-common-dynamic-component.mjs.map +1 -1
- package/fesm2022/igo2-common-entity.mjs +161 -128
- package/fesm2022/igo2-common-entity.mjs.map +1 -1
- package/fesm2022/igo2-common-flexible.mjs +25 -77
- package/fesm2022/igo2-common-flexible.mjs.map +1 -1
- package/fesm2022/igo2-common-form.mjs +417 -116
- package/fesm2022/igo2-common-form.mjs.map +1 -1
- package/fesm2022/igo2-common-home-button.mjs +7 -7
- package/fesm2022/igo2-common-icon.mjs +7 -7
- package/fesm2022/igo2-common-icon.mjs.map +1 -1
- package/fesm2022/igo2-common-image.mjs +10 -10
- package/fesm2022/igo2-common-image.mjs.map +1 -1
- package/fesm2022/igo2-common-interactive-tour.mjs +53 -30
- package/fesm2022/igo2-common-interactive-tour.mjs.map +1 -1
- package/fesm2022/igo2-common-json-dialog.mjs +11 -11
- package/fesm2022/igo2-common-json-dialog.mjs.map +1 -1
- package/fesm2022/igo2-common-keyvalue.mjs +10 -8
- package/fesm2022/igo2-common-keyvalue.mjs.map +1 -1
- package/fesm2022/igo2-common-list.mjs +21 -16
- package/fesm2022/igo2-common-list.mjs.map +1 -1
- package/fesm2022/igo2-common-panel.mjs +8 -8
- package/fesm2022/igo2-common-panel.mjs.map +1 -1
- package/fesm2022/igo2-common-resizable-bar.mjs +8 -10
- package/fesm2022/igo2-common-resizable-bar.mjs.map +1 -1
- package/fesm2022/igo2-common-select-value-dialog.mjs +23 -13
- package/fesm2022/igo2-common-select-value-dialog.mjs.map +1 -1
- package/fesm2022/igo2-common-sidenav.mjs +7 -7
- package/fesm2022/igo2-common-sidenav.mjs.map +1 -1
- package/fesm2022/igo2-common-spinner.mjs +11 -11
- package/fesm2022/igo2-common-spinner.mjs.map +1 -1
- package/fesm2022/igo2-common-stop-propagation.mjs +10 -10
- package/fesm2022/igo2-common-table.mjs +59 -66
- package/fesm2022/igo2-common-table.mjs.map +1 -1
- package/fesm2022/igo2-common-timepicker.mjs +11 -12
- package/fesm2022/igo2-common-timepicker.mjs.map +1 -1
- package/fesm2022/igo2-common-tool.mjs +32 -29
- package/fesm2022/igo2-common-tool.mjs.map +1 -1
- package/fesm2022/igo2-common-widget.mjs +17 -17
- package/fesm2022/igo2-common-widget.mjs.map +1 -1
- package/fesm2022/igo2-common-workspace.mjs +28 -32
- package/fesm2022/igo2-common-workspace.mjs.map +1 -1
- package/package.json +3 -3
- package/style/style.css +1 -1
- package/types/igo2-common-action.d.ts +2 -5
- package/types/igo2-common-backdrop.d.ts +2 -4
- package/types/igo2-common-badge.d.ts +4 -4
- package/types/igo2-common-collapsible.d.ts +2 -4
- package/types/igo2-common-confirm-dialog.d.ts +1 -1
- package/types/igo2-common-context-menu.d.ts +2 -2
- package/types/igo2-common-datepicker.d.ts +9 -9
- package/types/igo2-common-drag-drop.d.ts +14 -12
- package/types/igo2-common-dynamic-component.d.ts +3 -3
- package/types/igo2-common-entity.d.ts +63 -59
- package/types/igo2-common-flexible.d.ts +14 -28
- package/types/igo2-common-form.d.ts +213 -74
- package/types/igo2-common-icon.d.ts +1 -1
- package/types/igo2-common-interactive-tour.d.ts +6 -6
- package/types/igo2-common-json-dialog.d.ts +4 -4
- package/types/igo2-common-keyvalue.d.ts +4 -1
- package/types/igo2-common-list.d.ts +7 -7
- package/types/igo2-common-panel.d.ts +1 -1
- package/types/igo2-common-resizable-bar.d.ts +4 -5
- package/types/igo2-common-select-value-dialog.d.ts +2 -2
- package/types/igo2-common-sidenav.d.ts +2 -2
- package/types/igo2-common-spinner.d.ts +1 -1
- package/types/igo2-common-table.d.ts +16 -17
- package/types/igo2-common-timepicker.d.ts +3 -3
- package/types/igo2-common-tool.d.ts +7 -8
- package/types/igo2-common-widget.d.ts +7 -7
- package/types/igo2-common-workspace.d.ts +12 -12
|
@@ -202,11 +202,11 @@ class EntityService {
|
|
|
202
202
|
}
|
|
203
203
|
buildUrl(field) {
|
|
204
204
|
const relation = field.relation;
|
|
205
|
-
if (relation
|
|
205
|
+
if (relation?.url)
|
|
206
206
|
return relation.url;
|
|
207
207
|
const baseUrl = this.configService.getConfig('edition.url');
|
|
208
|
-
if (!relation
|
|
209
|
-
return;
|
|
208
|
+
if (!relation?.table) {
|
|
209
|
+
return undefined;
|
|
210
210
|
}
|
|
211
211
|
return baseUrl ? baseUrl + relation.table : relation.table;
|
|
212
212
|
}
|
|
@@ -227,7 +227,7 @@ class EntityService {
|
|
|
227
227
|
}
|
|
228
228
|
getRelationFilterParamName(field, relation) {
|
|
229
229
|
const param = relation.params;
|
|
230
|
-
if (param
|
|
230
|
+
if (param?.field !== field) {
|
|
231
231
|
return field;
|
|
232
232
|
}
|
|
233
233
|
return param?.name ?? field;
|
|
@@ -245,10 +245,10 @@ class EntityService {
|
|
|
245
245
|
}
|
|
246
246
|
return value?.split(',').map((v) => v.trim()) ?? [];
|
|
247
247
|
}
|
|
248
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
249
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.
|
|
248
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: EntityService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
249
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: EntityService, providedIn: 'root' });
|
|
250
250
|
}
|
|
251
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
251
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: EntityService, decorators: [{
|
|
252
252
|
type: Injectable,
|
|
253
253
|
args: [{
|
|
254
254
|
providedIn: 'root'
|
|
@@ -1163,8 +1163,8 @@ class EntityStoreWatcher {
|
|
|
1163
1163
|
*/
|
|
1164
1164
|
setupObservers() {
|
|
1165
1165
|
this.teardownObservers();
|
|
1166
|
-
this.entities$$ = this.store
|
|
1167
|
-
this.state$$ = this.store
|
|
1166
|
+
this.entities$$ = this.store?.entities$.subscribe(() => this.onEntitiesChange());
|
|
1167
|
+
this.state$$ = this.store?.state.change$
|
|
1168
1168
|
.pipe(skip(1))
|
|
1169
1169
|
.subscribe(() => this.onStateChange());
|
|
1170
1170
|
}
|
|
@@ -1194,7 +1194,9 @@ class EntityStoreWatcher {
|
|
|
1194
1194
|
*/
|
|
1195
1195
|
onStateChange() {
|
|
1196
1196
|
let changesDetected = false;
|
|
1197
|
-
const storeIndex = this.store
|
|
1197
|
+
const storeIndex = this.store?.state.index;
|
|
1198
|
+
if (!storeIndex)
|
|
1199
|
+
return;
|
|
1198
1200
|
const innerIndex = this.innerStateIndex;
|
|
1199
1201
|
if (storeIndex.size !== innerIndex.size) {
|
|
1200
1202
|
changesDetected = this.detectChanges();
|
|
@@ -1211,7 +1213,7 @@ class EntityStoreWatcher {
|
|
|
1211
1213
|
changesDetected = this.detectChanges();
|
|
1212
1214
|
}
|
|
1213
1215
|
}
|
|
1214
|
-
this.innerStateIndex.set(key, Object.assign({}, storeValue));
|
|
1216
|
+
this.innerStateIndex.set(key, Object.assign({}, storeValue || {}));
|
|
1215
1217
|
}
|
|
1216
1218
|
}
|
|
1217
1219
|
/**
|
|
@@ -1300,7 +1302,9 @@ class EntityTransaction {
|
|
|
1300
1302
|
return;
|
|
1301
1303
|
}
|
|
1302
1304
|
else if (existingOperation.type === EntityOperationType.Update) {
|
|
1303
|
-
|
|
1305
|
+
if (existingOperation.previous) {
|
|
1306
|
+
previous = existingOperation.previous;
|
|
1307
|
+
}
|
|
1304
1308
|
}
|
|
1305
1309
|
}
|
|
1306
1310
|
this.doUpdate(previous, current, store, meta);
|
|
@@ -1813,7 +1817,7 @@ class EntitySelectorComponent {
|
|
|
1813
1817
|
/**
|
|
1814
1818
|
* Entity store
|
|
1815
1819
|
*/
|
|
1816
|
-
store = input(
|
|
1820
|
+
store = input(...(ngDevMode ? [undefined, { debugName: "store" }] : /* istanbul ignore next */ []));
|
|
1817
1821
|
/**
|
|
1818
1822
|
* Title accessor
|
|
1819
1823
|
*/
|
|
@@ -1821,7 +1825,7 @@ class EntitySelectorComponent {
|
|
|
1821
1825
|
/**
|
|
1822
1826
|
* Text to display when nothing is selected
|
|
1823
1827
|
*/
|
|
1824
|
-
emptyText = input(
|
|
1828
|
+
emptyText = input(...(ngDevMode ? [undefined, { debugName: "emptyText" }] : /* istanbul ignore next */ []));
|
|
1825
1829
|
/**
|
|
1826
1830
|
* Wheter selecting many entities is allowed
|
|
1827
1831
|
*/
|
|
@@ -1837,7 +1841,7 @@ class EntitySelectorComponent {
|
|
|
1837
1841
|
/**
|
|
1838
1842
|
* Field placeholder
|
|
1839
1843
|
*/
|
|
1840
|
-
placeholder = input(
|
|
1844
|
+
placeholder = input(...(ngDevMode ? [undefined, { debugName: "placeholder" }] : /* istanbul ignore next */ []));
|
|
1841
1845
|
/**
|
|
1842
1846
|
* Wheter the selector is disabled or not
|
|
1843
1847
|
*/
|
|
@@ -1851,13 +1855,16 @@ class EntitySelectorComponent {
|
|
|
1851
1855
|
* @internal
|
|
1852
1856
|
*/
|
|
1853
1857
|
ngOnInit() {
|
|
1854
|
-
|
|
1855
|
-
|
|
1856
|
-
.
|
|
1857
|
-
.
|
|
1858
|
-
|
|
1859
|
-
|
|
1860
|
-
|
|
1858
|
+
const store = this.store();
|
|
1859
|
+
if (store) {
|
|
1860
|
+
this.watcher = new EntityStoreWatcher(store, this.cdRef);
|
|
1861
|
+
this.selected$$ = store.stateView
|
|
1862
|
+
.manyBy$((record) => record.state.selected === true)
|
|
1863
|
+
.subscribe((records) => {
|
|
1864
|
+
const entities = records.map((record) => record.entity);
|
|
1865
|
+
this.onSelectFromStore(entities);
|
|
1866
|
+
});
|
|
1867
|
+
}
|
|
1861
1868
|
}
|
|
1862
1869
|
/**
|
|
1863
1870
|
* Unsubscribe to the selected entity and destroy the store watcher
|
|
@@ -1876,7 +1883,7 @@ class EntitySelectorComponent {
|
|
|
1876
1883
|
const multiSelect = values.find((_value) => _value === this.multiSelectValue);
|
|
1877
1884
|
let entities = values.filter((_value) => _value !== this.multiSelectValue);
|
|
1878
1885
|
const store = this.store();
|
|
1879
|
-
if (multiSelect !== undefined) {
|
|
1886
|
+
if (store && multiSelect !== undefined) {
|
|
1880
1887
|
if (entities.length === store.count) {
|
|
1881
1888
|
entities = [];
|
|
1882
1889
|
}
|
|
@@ -1885,11 +1892,13 @@ class EntitySelectorComponent {
|
|
|
1885
1892
|
}
|
|
1886
1893
|
}
|
|
1887
1894
|
entities = entities.filter((entity) => entity !== this.emptyValue);
|
|
1888
|
-
if (
|
|
1889
|
-
|
|
1890
|
-
|
|
1891
|
-
|
|
1892
|
-
|
|
1895
|
+
if (store) {
|
|
1896
|
+
if (entities.length === 0) {
|
|
1897
|
+
store.state.updateAll({ selected: false });
|
|
1898
|
+
}
|
|
1899
|
+
else {
|
|
1900
|
+
store.state.updateMany(entities, { selected: true }, true);
|
|
1901
|
+
}
|
|
1893
1902
|
}
|
|
1894
1903
|
const value = this.multi() ? entities : event.value;
|
|
1895
1904
|
this.selectedChange.emit({ selected: true, value });
|
|
@@ -1906,6 +1915,9 @@ class EntitySelectorComponent {
|
|
|
1906
1915
|
}
|
|
1907
1916
|
updateMultiToggleWithEntities(entities) {
|
|
1908
1917
|
const store = this.store();
|
|
1918
|
+
if (!store) {
|
|
1919
|
+
return;
|
|
1920
|
+
}
|
|
1909
1921
|
const multiNoneText = this.multiNoneText();
|
|
1910
1922
|
const multiAllText = this.multiAllText();
|
|
1911
1923
|
if (entities.length === store.count &&
|
|
@@ -1917,23 +1929,23 @@ class EntitySelectorComponent {
|
|
|
1917
1929
|
this.multiText$.next(multiAllText);
|
|
1918
1930
|
}
|
|
1919
1931
|
}
|
|
1920
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
1921
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.
|
|
1932
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: EntitySelectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1933
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: EntitySelectorComponent, isStandalone: true, selector: "igo-entity-selector", inputs: { store: { classPropertyName: "store", publicName: "store", isSignal: true, isRequired: false, transformFunction: null }, titleAccessor: { classPropertyName: "titleAccessor", publicName: "titleAccessor", isSignal: true, isRequired: false, transformFunction: null }, emptyText: { classPropertyName: "emptyText", publicName: "emptyText", isSignal: true, isRequired: false, transformFunction: null }, multi: { classPropertyName: "multi", publicName: "multi", isSignal: true, isRequired: false, transformFunction: null }, multiAllText: { classPropertyName: "multiAllText", publicName: "multiAllText", isSignal: true, isRequired: false, transformFunction: null }, multiNoneText: { classPropertyName: "multiNoneText", publicName: "multiNoneText", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedChange: "selectedChange" }, ngImport: i0, template: "<mat-form-field class=\"igo-entity-selector\" subscriptSizing=\"dynamic\">\n <mat-select\n [disabled]=\"disabled()\"\n [value]=\"selected$ | async\"\n [multiple]=\"multi()\"\n [placeholder]=\"placeholder() ?? ''\"\n (selectionChange)=\"onSelectionChange($event)\"\n >\n @if (emptyText() !== undefined && multi() === false) {\n <mat-option [value]=\"emptyValue\">{{ emptyText() }}</mat-option>\n }\n @if (multi() === true) {\n <mat-option [value]=\"multiSelectValue\">{{\n multiText$ | async\n }}</mat-option>\n }\n @for (record of store()?.stateView?.all$() | async; track record) {\n <mat-option [value]=\"record.entity\">\n {{ titleAccessor()(record.entity) }}\n </mat-option>\n }\n </mat-select>\n</mat-form-field>\n", styles: [":host{--mat-form-field-container-height: 48px;--mat-form-field-container-vertical-padding: 12px}mat-form-field{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i2.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatOptionModule }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1922
1934
|
}
|
|
1923
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
1935
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: EntitySelectorComponent, decorators: [{
|
|
1924
1936
|
type: Component,
|
|
1925
|
-
args: [{ selector: 'igo-entity-selector', changeDetection: ChangeDetectionStrategy.OnPush, imports: [MatFormFieldModule, MatSelectModule, MatOptionModule, AsyncPipe], template: "<mat-form-field class=\"igo-entity-selector\" subscriptSizing=\"dynamic\">\n <mat-select\n [disabled]=\"disabled()\"\n [value]=\"selected$ | async\"\n [multiple]=\"multi()\"\n [placeholder]=\"placeholder()\"\n (selectionChange)=\"onSelectionChange($event)\"\n >\n @if (emptyText() !== undefined && multi() === false) {\n <mat-option [value]=\"emptyValue\">{{ emptyText() }}</mat-option>\n }\n @if (multi() === true) {\n <mat-option [value]=\"multiSelectValue\">{{\n multiText$ | async\n }}</mat-option>\n }\n @for (record of store()
|
|
1937
|
+
args: [{ selector: 'igo-entity-selector', changeDetection: ChangeDetectionStrategy.OnPush, imports: [MatFormFieldModule, MatSelectModule, MatOptionModule, AsyncPipe], template: "<mat-form-field class=\"igo-entity-selector\" subscriptSizing=\"dynamic\">\n <mat-select\n [disabled]=\"disabled()\"\n [value]=\"selected$ | async\"\n [multiple]=\"multi()\"\n [placeholder]=\"placeholder() ?? ''\"\n (selectionChange)=\"onSelectionChange($event)\"\n >\n @if (emptyText() !== undefined && multi() === false) {\n <mat-option [value]=\"emptyValue\">{{ emptyText() }}</mat-option>\n }\n @if (multi() === true) {\n <mat-option [value]=\"multiSelectValue\">{{\n multiText$ | async\n }}</mat-option>\n }\n @for (record of store()?.stateView?.all$() | async; track record) {\n <mat-option [value]=\"record.entity\">\n {{ titleAccessor()(record.entity) }}\n </mat-option>\n }\n </mat-select>\n</mat-form-field>\n", styles: [":host{--mat-form-field-container-height: 48px;--mat-form-field-container-vertical-padding: 12px}mat-form-field{width:100%}\n"] }]
|
|
1926
1938
|
}], propDecorators: { store: [{ type: i0.Input, args: [{ isSignal: true, alias: "store", required: false }] }], titleAccessor: [{ type: i0.Input, args: [{ isSignal: true, alias: "titleAccessor", required: false }] }], emptyText: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyText", required: false }] }], multi: [{ type: i0.Input, args: [{ isSignal: true, alias: "multi", required: false }] }], multiAllText: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiAllText", required: false }] }], multiNoneText: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiNoneText", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], selectedChange: [{ type: i0.Output, args: ["selectedChange"] }] } });
|
|
1927
1939
|
|
|
1928
1940
|
/**
|
|
1929
1941
|
* @deprecated import the EntitySelectorComponent directly
|
|
1930
1942
|
*/
|
|
1931
1943
|
class IgoEntitySelectorModule {
|
|
1932
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
1933
|
-
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.
|
|
1934
|
-
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.
|
|
1944
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: IgoEntitySelectorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
1945
|
+
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.19", ngImport: i0, type: IgoEntitySelectorModule, imports: [EntitySelectorComponent], exports: [EntitySelectorComponent] });
|
|
1946
|
+
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: IgoEntitySelectorModule, imports: [EntitySelectorComponent] });
|
|
1935
1947
|
}
|
|
1936
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
1948
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: IgoEntitySelectorModule, decorators: [{
|
|
1937
1949
|
type: NgModule,
|
|
1938
1950
|
args: [{
|
|
1939
1951
|
imports: [EntitySelectorComponent],
|
|
@@ -1957,11 +1969,11 @@ class EntityTablePaginatorComponent {
|
|
|
1957
1969
|
/**
|
|
1958
1970
|
* Entity store
|
|
1959
1971
|
*/
|
|
1960
|
-
store = input(
|
|
1972
|
+
store = input(...(ngDevMode ? [undefined, { debugName: "store" }] : /* istanbul ignore next */ []));
|
|
1961
1973
|
/**
|
|
1962
1974
|
* Paginator options
|
|
1963
1975
|
*/
|
|
1964
|
-
paginatorOptions = input(
|
|
1976
|
+
paginatorOptions = input(...(ngDevMode ? [undefined, { debugName: "paginatorOptions" }] : /* istanbul ignore next */ []));
|
|
1965
1977
|
length = 0;
|
|
1966
1978
|
/**
|
|
1967
1979
|
* Paginator emitted.
|
|
@@ -1970,10 +1982,13 @@ class EntityTablePaginatorComponent {
|
|
|
1970
1982
|
paginator = viewChild(MatPaginator, ...(ngDevMode ? [{ debugName: "paginator" }] : /* istanbul ignore next */ []));
|
|
1971
1983
|
ngOnChanges() {
|
|
1972
1984
|
this.unsubscribeAll();
|
|
1973
|
-
|
|
1974
|
-
|
|
1975
|
-
this.
|
|
1976
|
-
|
|
1985
|
+
const store = this.store();
|
|
1986
|
+
if (store) {
|
|
1987
|
+
this.count$$ = store.stateView.count$.subscribe((count) => {
|
|
1988
|
+
this.length = count;
|
|
1989
|
+
this.emitPaginator();
|
|
1990
|
+
});
|
|
1991
|
+
}
|
|
1977
1992
|
this.entitySortChange$$ = this.entitySortChange$().subscribe(() => {
|
|
1978
1993
|
const paginator = this.paginator();
|
|
1979
1994
|
if (paginator) {
|
|
@@ -2005,28 +2020,40 @@ class EntityTablePaginatorComponent {
|
|
|
2005
2020
|
this.paginationLabelTranslation$$.push(this.languageService.translate
|
|
2006
2021
|
.get('igo.common.paginator.firstPageLabel')
|
|
2007
2022
|
.subscribe((label) => {
|
|
2008
|
-
this.paginator()
|
|
2023
|
+
const p = this.paginator();
|
|
2024
|
+
if (p)
|
|
2025
|
+
p._intl.firstPageLabel = label;
|
|
2009
2026
|
}));
|
|
2010
|
-
this.paginator()
|
|
2027
|
+
const p = this.paginator();
|
|
2028
|
+
if (p)
|
|
2029
|
+
p._intl.getRangeLabel = this.rangeLabel;
|
|
2011
2030
|
this.paginationLabelTranslation$$.push(this.languageService.translate
|
|
2012
2031
|
.get('igo.common.paginator.itemsPerPageLabel')
|
|
2013
2032
|
.subscribe((label) => {
|
|
2014
|
-
this.paginator()
|
|
2033
|
+
const p = this.paginator();
|
|
2034
|
+
if (p)
|
|
2035
|
+
p._intl.itemsPerPageLabel = label;
|
|
2015
2036
|
}));
|
|
2016
2037
|
this.paginationLabelTranslation$$.push(this.languageService.translate
|
|
2017
2038
|
.get('igo.common.paginator.lastPageLabel')
|
|
2018
2039
|
.subscribe((label) => {
|
|
2019
|
-
this.paginator()
|
|
2040
|
+
const p = this.paginator();
|
|
2041
|
+
if (p)
|
|
2042
|
+
p._intl.lastPageLabel = label;
|
|
2020
2043
|
}));
|
|
2021
2044
|
this.paginationLabelTranslation$$.push(this.languageService.translate
|
|
2022
2045
|
.get('igo.common.paginator.nextPageLabel')
|
|
2023
2046
|
.subscribe((label) => {
|
|
2024
|
-
this.paginator()
|
|
2047
|
+
const p = this.paginator();
|
|
2048
|
+
if (p)
|
|
2049
|
+
p._intl.nextPageLabel = label;
|
|
2025
2050
|
}));
|
|
2026
2051
|
this.paginationLabelTranslation$$.push(this.languageService.translate
|
|
2027
2052
|
.get('igo.common.paginator.previousPageLabel')
|
|
2028
2053
|
.subscribe((label) => {
|
|
2029
|
-
this.paginator()
|
|
2054
|
+
const p = this.paginator();
|
|
2055
|
+
if (p)
|
|
2056
|
+
p._intl.previousPageLabel = label;
|
|
2030
2057
|
}));
|
|
2031
2058
|
}
|
|
2032
2059
|
rangeLabel = (page, pageSize, length) => {
|
|
@@ -2059,12 +2086,14 @@ class EntityTablePaginatorComponent {
|
|
|
2059
2086
|
this.unsubscribeAll();
|
|
2060
2087
|
}
|
|
2061
2088
|
emitPaginator() {
|
|
2062
|
-
this.
|
|
2089
|
+
const p = this.paginator();
|
|
2090
|
+
if (p)
|
|
2091
|
+
this.paginatorChange.emit(p);
|
|
2063
2092
|
}
|
|
2064
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
2065
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.
|
|
2093
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: EntityTablePaginatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2094
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.19", type: EntityTablePaginatorComponent, isStandalone: true, selector: "igo-entity-table-paginator", inputs: { entitySortChange$: { classPropertyName: "entitySortChange$", publicName: "entitySortChange$", isSignal: true, isRequired: false, transformFunction: null }, store: { classPropertyName: "store", publicName: "store", isSignal: true, isRequired: false, transformFunction: null }, paginatorOptions: { classPropertyName: "paginatorOptions", publicName: "paginatorOptions", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { paginatorChange: "paginatorChange" }, viewQueries: [{ propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true, isSignal: true }], usesOnChanges: true, ngImport: i0, template: "<mat-paginator\n [disabled]=\"disabled\"\n [hidePageSize]=\"hidePageSize\"\n [length]=\"length\"\n [pageIndex]=\"pageIndex\"\n [pageSize]=\"pageSize\"\n [pageSizeOptions]=\"pageSizeOptions\"\n [showFirstLastButtons]=\"showFirstLastButtons\"\n (page)=\"emitPaginator()\"\n/>\n", styles: [":host ::ng-deep .mat-mdc-paginator-container{min-height:unset}\n"], dependencies: [{ kind: "ngmodule", type: MatPaginatorModule }, { kind: "component", type: i1$1.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2066
2095
|
}
|
|
2067
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
2096
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: EntityTablePaginatorComponent, decorators: [{
|
|
2068
2097
|
type: Component,
|
|
2069
2098
|
args: [{ selector: 'igo-entity-table-paginator', changeDetection: ChangeDetectionStrategy.OnPush, imports: [MatPaginatorModule], template: "<mat-paginator\n [disabled]=\"disabled\"\n [hidePageSize]=\"hidePageSize\"\n [length]=\"length\"\n [pageIndex]=\"pageIndex\"\n [pageSize]=\"pageSize\"\n [pageSizeOptions]=\"pageSizeOptions\"\n [showFirstLastButtons]=\"showFirstLastButtons\"\n (page)=\"emitPaginator()\"\n/>\n", styles: [":host ::ng-deep .mat-mdc-paginator-container{min-height:unset}\n"] }]
|
|
2070
2099
|
}], propDecorators: { entitySortChange$: [{ type: i0.Input, args: [{ isSignal: true, alias: "entitySortChange$", required: false }] }], store: [{ type: i0.Input, args: [{ isSignal: true, alias: "store", required: false }] }], paginatorOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "paginatorOptions", required: false }] }], paginatorChange: [{ type: i0.Output, args: ["paginatorChange"] }], paginator: [{ type: i0.ViewChild, args: [i0.forwardRef(() => MatPaginator), { isSignal: true }] }] } });
|
|
@@ -2173,10 +2202,10 @@ class EntityTableRowDirective {
|
|
|
2173
2202
|
removeCls(cls) {
|
|
2174
2203
|
this.renderer.removeClass(this.el.nativeElement, cls);
|
|
2175
2204
|
}
|
|
2176
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
2177
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.
|
|
2205
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: EntityTableRowDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
2206
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.19", type: EntityTableRowDirective, isStandalone: true, selector: "[igoEntityTableRow]", inputs: { selection: { classPropertyName: "selection", publicName: "selection", isSignal: true, isRequired: false, transformFunction: null }, selectOnClick: { classPropertyName: "selectOnClick", publicName: "selectOnClick", isSignal: true, isRequired: false, transformFunction: null }, highlightSelection: { classPropertyName: "highlightSelection", publicName: "highlightSelection", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: false, isRequired: false, transformFunction: null }, scrollBehavior: { classPropertyName: "scrollBehavior", publicName: "scrollBehavior", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { select: "select" }, host: { listeners: { "click": "onClick()" } }, ngImport: i0 });
|
|
2178
2207
|
}
|
|
2179
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
2208
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: EntityTableRowDirective, decorators: [{
|
|
2180
2209
|
type: Directive,
|
|
2181
2210
|
args: [{
|
|
2182
2211
|
selector: '[igoEntityTableRow]'
|
|
@@ -2233,7 +2262,7 @@ class EntityTableComponent {
|
|
|
2233
2262
|
/**
|
|
2234
2263
|
* Entity store
|
|
2235
2264
|
*/
|
|
2236
|
-
store = input(
|
|
2265
|
+
store = input(...(ngDevMode ? [undefined, { debugName: "store" }] : /* istanbul ignore next */ []));
|
|
2237
2266
|
/**
|
|
2238
2267
|
* Table paginator
|
|
2239
2268
|
*/
|
|
@@ -2248,7 +2277,7 @@ class EntityTableComponent {
|
|
|
2248
2277
|
/**
|
|
2249
2278
|
* Table template
|
|
2250
2279
|
*/
|
|
2251
|
-
template = input(
|
|
2280
|
+
template = input(...(ngDevMode ? [undefined, { debugName: "template" }] : /* istanbul ignore next */ []));
|
|
2252
2281
|
/**
|
|
2253
2282
|
* Scroll behavior on selection
|
|
2254
2283
|
*/
|
|
@@ -2264,7 +2293,7 @@ class EntityTableComponent {
|
|
|
2264
2293
|
/**
|
|
2265
2294
|
* Paginator options
|
|
2266
2295
|
*/
|
|
2267
|
-
paginatorOptions = input(
|
|
2296
|
+
paginatorOptions = input(...(ngDevMode ? [undefined, { debugName: "paginatorOptions" }] : /* istanbul ignore next */ []));
|
|
2268
2297
|
/**
|
|
2269
2298
|
* Event emitted when an entity (row) is clicked
|
|
2270
2299
|
*/
|
|
@@ -2283,8 +2312,8 @@ class EntityTableComponent {
|
|
|
2283
2312
|
*/
|
|
2284
2313
|
get headers() {
|
|
2285
2314
|
let columns = this.template()
|
|
2286
|
-
|
|
2287
|
-
.map((column) => column.name);
|
|
2315
|
+
?.columns.filter((column) => column.visible !== false)
|
|
2316
|
+
.map((column) => column.name) ?? [];
|
|
2288
2317
|
if (this.selectionCheckbox === true) {
|
|
2289
2318
|
columns = ['selectionCheckbox'].concat(columns);
|
|
2290
2319
|
}
|
|
@@ -2300,21 +2329,21 @@ class EntityTableComponent {
|
|
|
2300
2329
|
* @internal
|
|
2301
2330
|
*/
|
|
2302
2331
|
get selection() {
|
|
2303
|
-
return this.template()
|
|
2332
|
+
return this.template()?.selection || false;
|
|
2304
2333
|
}
|
|
2305
2334
|
/**
|
|
2306
2335
|
* Whether a selection checkbox should be displayed
|
|
2307
2336
|
* @internal
|
|
2308
2337
|
*/
|
|
2309
2338
|
get selectionCheckbox() {
|
|
2310
|
-
return this.template()
|
|
2339
|
+
return this.template()?.selectionCheckbox || false;
|
|
2311
2340
|
}
|
|
2312
2341
|
/**
|
|
2313
2342
|
* Whether selection many entities should eb supported
|
|
2314
2343
|
* @internal
|
|
2315
2344
|
*/
|
|
2316
2345
|
get selectMany() {
|
|
2317
|
-
return this.template()
|
|
2346
|
+
return this.template()?.selectMany || false;
|
|
2318
2347
|
}
|
|
2319
2348
|
/**
|
|
2320
2349
|
* Whether selection many entities should eb supported
|
|
@@ -2322,11 +2351,11 @@ class EntityTableComponent {
|
|
|
2322
2351
|
*/
|
|
2323
2352
|
get fixedHeader() {
|
|
2324
2353
|
const template = this.template();
|
|
2325
|
-
return template
|
|
2354
|
+
return template?.fixedHeader === undefined ? true : template.fixedHeader;
|
|
2326
2355
|
}
|
|
2327
2356
|
get tableHeight() {
|
|
2328
2357
|
const template = this.template();
|
|
2329
|
-
return template
|
|
2358
|
+
return template?.tableHeight ? template.tableHeight : 'auto';
|
|
2330
2359
|
}
|
|
2331
2360
|
constructor() {
|
|
2332
2361
|
this.dateAdapter.setLocale('fr-CA');
|
|
@@ -2339,7 +2368,7 @@ class EntityTableComponent {
|
|
|
2339
2368
|
this.handleDatasource();
|
|
2340
2369
|
this.dataSource.paginator = this.paginator;
|
|
2341
2370
|
this.store()
|
|
2342
|
-
|
|
2371
|
+
?.state.change$.pipe(debounceTime(100))
|
|
2343
2372
|
.subscribe(() => {
|
|
2344
2373
|
this.handleDatasource();
|
|
2345
2374
|
this.refresh();
|
|
@@ -2359,7 +2388,7 @@ class EntityTableComponent {
|
|
|
2359
2388
|
*/
|
|
2360
2389
|
onValueChange(column, record, event) {
|
|
2361
2390
|
const key = this.getColumnKeyWithoutPropertiesTag(column);
|
|
2362
|
-
record.entity.properties[key] = event.target
|
|
2391
|
+
record.entity.properties[key] = event.target?.value;
|
|
2363
2392
|
}
|
|
2364
2393
|
/**
|
|
2365
2394
|
* Process boolean value change (edition)
|
|
@@ -2398,7 +2427,7 @@ class EntityTableComponent {
|
|
|
2398
2427
|
*/
|
|
2399
2428
|
enableEdit(record) {
|
|
2400
2429
|
const item = record.entity.properties || record.entity;
|
|
2401
|
-
this.template()
|
|
2430
|
+
this.template()?.columns.forEach((column) => {
|
|
2402
2431
|
column.title =
|
|
2403
2432
|
column.validation?.mandatory && !column.title.includes('*')
|
|
2404
2433
|
? column.title + ' *'
|
|
@@ -2429,7 +2458,7 @@ class EntityTableComponent {
|
|
|
2429
2458
|
this.filteredOptions[column.name] = new Observable();
|
|
2430
2459
|
this.filteredOptions[column.name] = this.formGroup.controls[column.name].valueChanges.pipe(map$1((value) => {
|
|
2431
2460
|
if (value?.length) {
|
|
2432
|
-
return column.domainValues?.filter((option) => {
|
|
2461
|
+
return (column.domainValues?.filter((option) => {
|
|
2433
2462
|
const filterNormalized = value
|
|
2434
2463
|
? value
|
|
2435
2464
|
.toLowerCase()
|
|
@@ -2441,11 +2470,12 @@ class EntityTableComponent {
|
|
|
2441
2470
|
.normalize('NFD')
|
|
2442
2471
|
.replace(/[\u0300-\u036f]/g, '');
|
|
2443
2472
|
return featureNameNormalized.includes(filterNormalized);
|
|
2444
|
-
});
|
|
2473
|
+
}) ?? []);
|
|
2445
2474
|
}
|
|
2475
|
+
return [];
|
|
2446
2476
|
}));
|
|
2447
2477
|
let formControlValue = item[key];
|
|
2448
|
-
column.domainValues
|
|
2478
|
+
column.domainValues?.forEach((option) => {
|
|
2449
2479
|
if (typeof formControlValue === 'string' &&
|
|
2450
2480
|
StringUtils.isValidNumber(formControlValue) &&
|
|
2451
2481
|
!StringUtils.isOctalNumber(formControlValue)) {
|
|
@@ -2488,17 +2518,18 @@ class EntityTableComponent {
|
|
|
2488
2518
|
handleDatasource() {
|
|
2489
2519
|
this.unsubscribeStore();
|
|
2490
2520
|
this.selection$$ = this.store()
|
|
2491
|
-
|
|
2521
|
+
?.stateView.manyBy$((record) => record.state.selected === true)
|
|
2492
2522
|
.subscribe((records) => {
|
|
2493
2523
|
const firstSelected = records[0];
|
|
2494
2524
|
const firstSelectedStateviewPosition = this.store()
|
|
2495
|
-
|
|
2525
|
+
?.stateView.all()
|
|
2496
2526
|
.indexOf(firstSelected);
|
|
2497
2527
|
const pageMax = this.paginator
|
|
2498
2528
|
? this.paginator.pageSize * (this.paginator.pageIndex + 1)
|
|
2499
2529
|
: 0;
|
|
2500
2530
|
const pageMin = this.paginator ? pageMax - this.paginator.pageSize : 0;
|
|
2501
2531
|
if (this.paginator &&
|
|
2532
|
+
firstSelectedStateviewPosition !== undefined &&
|
|
2502
2533
|
(firstSelectedStateviewPosition < pageMin ||
|
|
2503
2534
|
firstSelectedStateviewPosition >= pageMax)) {
|
|
2504
2535
|
const pageToReach = Math.floor(firstSelectedStateviewPosition / this.paginator.pageSize);
|
|
@@ -2507,7 +2538,7 @@ class EntityTableComponent {
|
|
|
2507
2538
|
this.selectionState$.next(this.computeSelectionState(records));
|
|
2508
2539
|
});
|
|
2509
2540
|
this.dataSource$$ = this.store()
|
|
2510
|
-
|
|
2541
|
+
?.stateView.all$()
|
|
2511
2542
|
.subscribe((all) => {
|
|
2512
2543
|
if (all[0]) {
|
|
2513
2544
|
this.enableEdit(all[0]);
|
|
@@ -2515,7 +2546,7 @@ class EntityTableComponent {
|
|
|
2515
2546
|
this.dataSource.data = all.map((record) => {
|
|
2516
2547
|
return {
|
|
2517
2548
|
record,
|
|
2518
|
-
cellData: this.template()
|
|
2549
|
+
cellData: (this.template()?.columns.reduce((cellData, column) => {
|
|
2519
2550
|
const value = this.getValue(record, column);
|
|
2520
2551
|
cellData[column.name] = {
|
|
2521
2552
|
class: this.getCellClass(record, column),
|
|
@@ -2524,7 +2555,7 @@ class EntityTableComponent {
|
|
|
2524
2555
|
isImg: this.isImg(value)
|
|
2525
2556
|
};
|
|
2526
2557
|
return cellData;
|
|
2527
|
-
}, {})
|
|
2558
|
+
}, {}) ?? {})
|
|
2528
2559
|
};
|
|
2529
2560
|
});
|
|
2530
2561
|
});
|
|
@@ -2572,9 +2603,9 @@ class EntityTableComponent {
|
|
|
2572
2603
|
*/
|
|
2573
2604
|
onSort(event) {
|
|
2574
2605
|
const direction = event.direction;
|
|
2575
|
-
const column = this.template()
|
|
2576
|
-
if (direction === 'asc' || direction === 'desc') {
|
|
2577
|
-
this.store()
|
|
2606
|
+
const column = this.template()?.columns.find((c) => c.name === event.active);
|
|
2607
|
+
if (column && (direction === 'asc' || direction === 'desc')) {
|
|
2608
|
+
this.store()?.stateView.sort({
|
|
2578
2609
|
valueAccessor: (record) => this.getValue(record, column),
|
|
2579
2610
|
direction,
|
|
2580
2611
|
nullsFirst: this.sortNullsFirst()
|
|
@@ -2583,7 +2614,7 @@ class EntityTableComponent {
|
|
|
2583
2614
|
this.entitySortChange$.next(true);
|
|
2584
2615
|
}
|
|
2585
2616
|
else {
|
|
2586
|
-
this.store()
|
|
2617
|
+
this.store()?.stateView.sort(undefined);
|
|
2587
2618
|
}
|
|
2588
2619
|
}
|
|
2589
2620
|
/**
|
|
@@ -2592,7 +2623,7 @@ class EntityTableComponent {
|
|
|
2592
2623
|
* @internal
|
|
2593
2624
|
*/
|
|
2594
2625
|
onRowClick(record) {
|
|
2595
|
-
this.lastRecordCheckedKey = this.store()
|
|
2626
|
+
this.lastRecordCheckedKey = this.store()?.stateView.getKey(record);
|
|
2596
2627
|
this.entityClick.emit(record.entity);
|
|
2597
2628
|
}
|
|
2598
2629
|
/**
|
|
@@ -2607,7 +2638,7 @@ class EntityTableComponent {
|
|
|
2607
2638
|
return;
|
|
2608
2639
|
}
|
|
2609
2640
|
const entity = record.entity;
|
|
2610
|
-
this.store()
|
|
2641
|
+
this.store()?.state.update(entity, { selected: true }, true);
|
|
2611
2642
|
this.entitySelectChange.emit({ added: [entity] });
|
|
2612
2643
|
}
|
|
2613
2644
|
/**
|
|
@@ -2619,9 +2650,11 @@ class EntityTableComponent {
|
|
|
2619
2650
|
if (this.selection === false) {
|
|
2620
2651
|
return;
|
|
2621
2652
|
}
|
|
2622
|
-
const entities = this.store()
|
|
2653
|
+
const entities = this.store()?.view.all();
|
|
2654
|
+
if (entities === undefined)
|
|
2655
|
+
return;
|
|
2623
2656
|
this.entitySelectChange.emit({ added: [entities] });
|
|
2624
|
-
this.store()
|
|
2657
|
+
this.store()?.state.updateMany(entities, { selected: toggle });
|
|
2625
2658
|
}
|
|
2626
2659
|
/**
|
|
2627
2660
|
* When an entity is toggled, select or unselect it in the store. On select,
|
|
@@ -2636,11 +2669,11 @@ class EntityTableComponent {
|
|
|
2636
2669
|
}
|
|
2637
2670
|
const entity = record.entity;
|
|
2638
2671
|
const exclusive = toggle === true && !this.selectMany;
|
|
2639
|
-
this.store()
|
|
2672
|
+
this.store()?.state.update(entity, { selected: toggle }, exclusive);
|
|
2640
2673
|
if (toggle === true) {
|
|
2641
2674
|
this.entitySelectChange.emit({ added: [entity] });
|
|
2642
2675
|
}
|
|
2643
|
-
this.lastRecordCheckedKey = this.store()
|
|
2676
|
+
this.lastRecordCheckedKey = this.store()?.stateView.getKey(record);
|
|
2644
2677
|
}
|
|
2645
2678
|
/**
|
|
2646
2679
|
* When an entity is toggled, select or unselect it in the store. On select,
|
|
@@ -2662,21 +2695,25 @@ class EntityTableComponent {
|
|
|
2662
2695
|
// See https://github.com/angular/components/issues/6232
|
|
2663
2696
|
const range = window.document.createRange();
|
|
2664
2697
|
range.selectNode(event.target);
|
|
2665
|
-
window.getSelection()
|
|
2666
|
-
window.getSelection()
|
|
2698
|
+
window.getSelection()?.removeAllRanges();
|
|
2699
|
+
window.getSelection()?.addRange(range);
|
|
2667
2700
|
event.stopImmediatePropagation();
|
|
2668
|
-
const records = this.store()
|
|
2701
|
+
const records = this.store()?.stateView.all();
|
|
2702
|
+
if (!records)
|
|
2703
|
+
return;
|
|
2669
2704
|
const recordIndex = records.indexOf(record);
|
|
2670
|
-
const lastRecordChecked = this.store()
|
|
2671
|
-
const lastRecordIndex =
|
|
2705
|
+
const lastRecordChecked = this.store()?.stateView.get(this.lastRecordCheckedKey);
|
|
2706
|
+
const lastRecordIndex = lastRecordChecked
|
|
2707
|
+
? records.indexOf(lastRecordChecked)
|
|
2708
|
+
: -1;
|
|
2672
2709
|
const indexes = [recordIndex, lastRecordIndex];
|
|
2673
2710
|
const selectRecords = records.slice(Math.min(...indexes), Math.max(...indexes) + 1);
|
|
2674
2711
|
const entities = selectRecords.map((_record) => _record.entity);
|
|
2675
|
-
this.store()
|
|
2712
|
+
this.store()?.state.updateMany(entities, { selected: toggle });
|
|
2676
2713
|
if (toggle === true) {
|
|
2677
2714
|
this.entitySelectChange.emit({ added: entities });
|
|
2678
2715
|
}
|
|
2679
|
-
this.lastRecordCheckedKey = this.store()
|
|
2716
|
+
this.lastRecordCheckedKey = this.store()?.stateView.getKey(record);
|
|
2680
2717
|
}
|
|
2681
2718
|
/**
|
|
2682
2719
|
* Compute the selection state
|
|
@@ -2688,7 +2725,7 @@ class EntityTableComponent {
|
|
|
2688
2725
|
const selectionCount = selectedRecords.length;
|
|
2689
2726
|
return selectionCount === 0
|
|
2690
2727
|
? states.None
|
|
2691
|
-
: selectionCount === this.store()
|
|
2728
|
+
: selectionCount === this.store()?.stateView.count
|
|
2692
2729
|
? states.All
|
|
2693
2730
|
: states.Some;
|
|
2694
2731
|
}
|
|
@@ -2702,7 +2739,7 @@ class EntityTableComponent {
|
|
|
2702
2739
|
let sortable = column.sort;
|
|
2703
2740
|
if (sortable === undefined) {
|
|
2704
2741
|
const template = this.template();
|
|
2705
|
-
sortable = template
|
|
2742
|
+
sortable = template?.sort === undefined ? false : template.sort;
|
|
2706
2743
|
}
|
|
2707
2744
|
return sortable;
|
|
2708
2745
|
}
|
|
@@ -2718,20 +2755,15 @@ class EntityTableComponent {
|
|
|
2718
2755
|
}
|
|
2719
2756
|
isImg(value) {
|
|
2720
2757
|
if (this.isUrl(value)) {
|
|
2721
|
-
return (['jpg', 'png', 'gif'].indexOf(value.split('.').pop()
|
|
2722
|
-
-1);
|
|
2723
|
-
}
|
|
2724
|
-
else {
|
|
2725
|
-
return false;
|
|
2758
|
+
return (['jpg', 'png', 'gif'].indexOf(value.split('.').pop()?.toLowerCase() ?? '') !== -1);
|
|
2726
2759
|
}
|
|
2760
|
+
return false;
|
|
2727
2761
|
}
|
|
2728
2762
|
isUrl(value) {
|
|
2729
2763
|
if (typeof value === 'string') {
|
|
2730
2764
|
return (value.slice(0, 8) === 'https://' || value.slice(0, 7) === 'http://');
|
|
2731
2765
|
}
|
|
2732
|
-
|
|
2733
|
-
return false;
|
|
2734
|
-
}
|
|
2766
|
+
return false;
|
|
2735
2767
|
}
|
|
2736
2768
|
/**
|
|
2737
2769
|
* Method to access an entity's values
|
|
@@ -2747,10 +2779,10 @@ class EntityTableComponent {
|
|
|
2747
2779
|
return column.valueAccessor(entity, record);
|
|
2748
2780
|
}
|
|
2749
2781
|
const template = this.template();
|
|
2750
|
-
if (template
|
|
2782
|
+
if (template?.valueAccessor !== undefined) {
|
|
2751
2783
|
return template.valueAccessor(entity, column.name, record);
|
|
2752
2784
|
}
|
|
2753
|
-
value = this.store()
|
|
2785
|
+
value = this.store()?.getProperty(entity, column.name);
|
|
2754
2786
|
if (column.type === 'boolean') {
|
|
2755
2787
|
if (value === undefined || value === null || value === '') {
|
|
2756
2788
|
value = false;
|
|
@@ -2775,7 +2807,7 @@ class EntityTableComponent {
|
|
|
2775
2807
|
if (column.multiple) {
|
|
2776
2808
|
let list_id;
|
|
2777
2809
|
typeof value === 'string'
|
|
2778
|
-
? (list_id = value.match(/[\w.-]+/g).map(Number))
|
|
2810
|
+
? (list_id = (value.match(/[\w.-]+/g) ?? []).map(Number))
|
|
2779
2811
|
: (list_id = value);
|
|
2780
2812
|
const list_option = [];
|
|
2781
2813
|
column.domainValues.forEach((option) => {
|
|
@@ -2858,9 +2890,10 @@ class EntityTableComponent {
|
|
|
2858
2890
|
* @internal
|
|
2859
2891
|
*/
|
|
2860
2892
|
getValidationAttributeValue(column, validationType) {
|
|
2893
|
+
const validation = column.validation;
|
|
2861
2894
|
if (column.validation !== undefined &&
|
|
2862
|
-
|
|
2863
|
-
return
|
|
2895
|
+
validation[validationType] !== undefined) {
|
|
2896
|
+
return validation[validationType];
|
|
2864
2897
|
}
|
|
2865
2898
|
else {
|
|
2866
2899
|
return false;
|
|
@@ -2897,7 +2930,7 @@ class EntityTableComponent {
|
|
|
2897
2930
|
* @internal
|
|
2898
2931
|
*/
|
|
2899
2932
|
getHeaderClass() {
|
|
2900
|
-
const func = this.template()
|
|
2933
|
+
const func = this.template()?.headerClassFunc;
|
|
2901
2934
|
if (func instanceof Function) {
|
|
2902
2935
|
return func();
|
|
2903
2936
|
}
|
|
@@ -2911,7 +2944,7 @@ class EntityTableComponent {
|
|
|
2911
2944
|
*/
|
|
2912
2945
|
getRowClass(record) {
|
|
2913
2946
|
const entity = record.entity;
|
|
2914
|
-
const func = this.template()
|
|
2947
|
+
const func = this.template()?.rowClassFunc;
|
|
2915
2948
|
if (func instanceof Function) {
|
|
2916
2949
|
return func(entity, record);
|
|
2917
2950
|
}
|
|
@@ -2927,7 +2960,7 @@ class EntityTableComponent {
|
|
|
2927
2960
|
getCellClass(record, column) {
|
|
2928
2961
|
const entity = record.entity;
|
|
2929
2962
|
const cls = {};
|
|
2930
|
-
const tableFunc = this.template()
|
|
2963
|
+
const tableFunc = this.template()?.cellClassFunc;
|
|
2931
2964
|
if (tableFunc instanceof Function) {
|
|
2932
2965
|
Object.assign(cls, tableFunc(entity, column, record));
|
|
2933
2966
|
}
|
|
@@ -2958,14 +2991,14 @@ class EntityTableComponent {
|
|
|
2958
2991
|
}
|
|
2959
2992
|
return column;
|
|
2960
2993
|
}
|
|
2961
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
2962
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.
|
|
2994
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: EntityTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2995
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: EntityTableComponent, isStandalone: true, selector: "igo-entity-table", inputs: { store: { classPropertyName: "store", publicName: "store", isSignal: true, isRequired: false, transformFunction: null }, paginator: { classPropertyName: "paginator", publicName: "paginator", isSignal: false, isRequired: false, transformFunction: null }, template: { classPropertyName: "template", publicName: "template", isSignal: true, isRequired: false, transformFunction: null }, scrollBehavior: { classPropertyName: "scrollBehavior", publicName: "scrollBehavior", isSignal: true, isRequired: false, transformFunction: null }, sortNullsFirst: { classPropertyName: "sortNullsFirst", publicName: "sortNullsFirst", isSignal: true, isRequired: false, transformFunction: null }, withPaginator: { classPropertyName: "withPaginator", publicName: "withPaginator", isSignal: true, isRequired: false, transformFunction: null }, paginatorOptions: { classPropertyName: "paginatorOptions", publicName: "paginatorOptions", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { entityClick: "entityClick", entitySelectChange: "entitySelectChange", entitySortChange: "entitySortChange" }, providers: [
|
|
2963
2996
|
{ provide: MatFormFieldControl, useExisting: EntityTableComponent },
|
|
2964
2997
|
provideMomentDateAdapter()
|
|
2965
|
-
], usesOnChanges: true, ngImport: i0, template: "<div class=\"table-container\" [style.height]=\"tableHeight\">\n <table\n id=\"currentWorkspaceTable\"\n mat-table\n matSort\n [ngClass]=\"getTableClass()\"\n [dataSource]=\"dataSource\"\n [trackBy]=\"getTrackByFunction()\"\n (matSortChange)=\"onSort($event)\"\n >\n <ng-container matColumnDef=\"selectionCheckbox\" class=\"mat-cell-checkbox\">\n <th mat-header-cell *matHeaderCellDef>\n @if (selectMany) {\n @let selectionState = selectionState$ | async;\n @if (selectionState) {\n <mat-checkbox\n (change)=\"onToggleRows($event.checked)\"\n [checked]=\"selectionState === entityTableSelectionState.All\"\n [indeterminate]=\"\n selectionState === entityTableSelectionState.Some\n \"\n />\n }\n }\n </th>\n <td mat-cell *matCellDef=\"let row\">\n <mat-checkbox\n (mousedown)=\"$event.shiftKey ? $event.preventDefault() : null\"\n (click)=\"\n $event.shiftKey\n ? onShiftToggleRow(!rowIsSelected(row.record), row.record, $event)\n : $event.stopPropagation()\n \"\n (change)=\"onToggleRow($event.checked, row.record)\"\n [checked]=\"rowIsSelected(row.record)\"\n />\n </td>\n </ng-container>\n\n @for (column of template().columns; track column) {\n <ng-container [matColumnDef]=\"column.name\">\n @if (columnIsSortable(column)) {\n <th\n mat-header-cell\n *matHeaderCellDef\n mat-sort-header\n [matTooltip]=\"column.tooltip ? column.tooltip : undefined\"\n >\n {{ column.title }}\n </th>\n } @else {\n <th\n mat-header-cell\n *matHeaderCellDef\n [matTooltip]=\"column.tooltip ? column.tooltip : undefined\"\n >\n {{ column.title }}\n </th>\n }\n\n @let columnRenderer = getColumnRenderer(column);\n @if (columnRenderer) {\n @switch (columnRenderer) {\n @case (entityTableColumnRenderer.HTML) {\n <ng-container *matCellDef=\"let row\">\n @if (!row.cellData[column.name].isUrl) {\n <td\n mat-cell\n class=\"mat-cell-text\"\n [ngClass]=\"row.cellData[column.name].class\"\n [innerHTML]=\"row.cellData[column.name].value\"\n ></td>\n } @else {\n <td\n mat-cell\n class=\"mat-cell-text\"\n [ngClass]=\"row.cellData[column.name].class\"\n >\n <a\n href=\"{{ row.cellData[column.name].value }}\"\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n (click)=\"$event.stopPropagation()\"\n >\n @if (row.cellData[column.name].isImg) {\n <img\n igoImageError\n src=\"{{\n row.cellData[column.name].value\n | secureImage\n | async\n }}\"\n width=\"50\"\n heigth=\"auto\"\n />\n } @else {\n <span>{{ 'igo.geo.targetHtmlUrl' | translate }} </span>\n }\n </a>\n </td>\n }\n </ng-container>\n }\n @case (entityTableColumnRenderer.UnsanitizedHTML) {\n <ng-container *matCellDef=\"let row\">\n @if (isEdition(row.record)) {\n <td\n mat-cell\n class=\"mat-cell-text edition\"\n [formGroup]=\"formGroup\"\n [ngClass]=\"row.cellData[column.name].class\"\n >\n @switch (column.type) {\n @case ('date') {\n <div class=\"date-picker\">\n <mat-datepicker-toggle matSuffix [for]=\"picker\" />\n <input\n matInput\n [matDatepicker]=\"picker\"\n [formControlName]=\"column.name\"\n value=\"{{ row.cellData[column.name].value }}\"\n (dateChange)=\"\n onDateChange(column.name, row.record, $event)\n \"\n />\n <mat-datepicker #picker />\n </div>\n }\n @case ('time') {\n <input\n matInput\n type=\"time\"\n [formControlName]=\"column.name\"\n step=\"900\"\n (focus)=\"column.onFocus($event)\"\n (keypress)=\"column.onChange($event)\"\n (blur)=\"column.onBlur($event)\"\n />\n }\n @case ('number') {\n <input\n matInput\n type=\"number\"\n class=\"class_number_edition\"\n [formControlName]=\"column.name\"\n step=\"{{ column.step }}\"\n value=\"{{ row.cellData[column.name].value }}\"\n (input)=\"\n onValueChange(column.name, row.record, $event)\n \"\n readonly=\"{{\n getValidationAttributeValue(column, 'readonly')\n }}\"\n required=\"{{\n getValidationAttributeValue(column, 'mandatory')\n }}\"\n min=\"{{\n getValidationAttributeValue(column, 'minValue')\n }}\"\n max=\"{{\n getValidationAttributeValue(column, 'maxValue')\n }}\"\n />\n }\n @case ('boolean') {\n <mat-checkbox\n [formControlName]=\"column.name\"\n [checked]=\"row.cellData[column.name].value\"\n (change)=\"\n onBooleanValueChange(\n column.name,\n row.record,\n $event\n )\n \"\n />\n }\n @case ('list') {\n <mat-select\n required=\"{{\n getValidationAttributeValue(column, 'mandatory')\n }}\"\n [formControlName]=\"column.name\"\n [multiple]=\"column.multiple\"\n (selectionChange)=\"\n onSelectValueChange(column.name, row.record, $event)\n \"\n [value]=\"row.cellData[column.name].value\"\n >\n @for (\n option of $any(column).domainValues;\n track option\n ) {\n <mat-option\n [value]=\"option.id\"\n [disabled]=\"option.disabled\"\n >\n {{ option.value }}\n </mat-option>\n }\n </mat-select>\n }\n @case ('autocomplete') {\n <input\n matInput\n type=\"text\"\n [formControlName]=\"column.name\"\n [matAutocomplete]=\"auto\"\n required=\"{{\n getValidationAttributeValue(column, 'mandatory')\n }}\"\n value=\"{{ row.cellData[column.name].value }}\"\n readonly=\"{{\n getValidationAttributeValue(column, 'readonly')\n }}\"\n />\n <mat-autocomplete\n #auto=\"matAutocomplete\"\n (optionSelected)=\"\n onAutocompleteValueChange(\n column,\n row.record,\n $event\n )\n \"\n panelWidth=\"430px\"\n >\n @for (\n option of filteredOptions[column.name] | async;\n track option\n ) {\n <mat-option [value]=\"option.id\">\n {{ option.value }}\n </mat-option>\n }\n </mat-autocomplete>\n }\n @default {\n <input\n matInput\n type=\"text\"\n [formControlName]=\"column.name\"\n value=\"{{ row.cellData[column.name].value }}\"\n (input)=\"\n onValueChange(column.name, row.record, $event)\n \"\n readonly=\"{{\n getValidationAttributeValue(column, 'readonly')\n }}\"\n required=\"{{\n getValidationAttributeValue(column, 'mandatory')\n }}\"\n />\n }\n }\n </td>\n } @else {\n @if (!row.cellData[column.name].isUrl) {\n <td\n mat-cell\n class=\"mat-cell-text\"\n [ngClass]=\"row.cellData[column.name].class\"\n [innerHTML]=\"\n row.cellData[column.name].value | sanitizeHtml\n \"\n ></td>\n } @else {\n <td\n mat-cell\n class=\"mat-cell-text\"\n [ngClass]=\"row.cellData[column.name].class\"\n >\n <a\n href=\"{{ row.cellData[column.name].value }}\"\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n (click)=\"$event.stopPropagation()\"\n >\n @if (row.cellData[column.name].isImg) {\n <img\n igoImageError\n src=\"{{\n row.cellData[column.name].value\n | secureImage\n | async\n }}\"\n width=\"50\"\n heigth=\"auto\"\n />\n } @else {\n ><span\n >{{ 'igo.geo.targetHtmlUrl' | translate }}\n </span>\n }\n </a>\n </td>\n }\n }\n </ng-container>\n }\n @case (entityTableColumnRenderer.Icon) {\n <td\n mat-cell\n *matCellDef=\"let row\"\n class=\"mat-cell-text\"\n [ngClass]=\"row.cellData[column.name].class\"\n >\n @if (column.onClick) {\n <mat-icon (click)=\"column.onClick($event)\">{{\n row.cellData[column.name].value || column.icon\n }}</mat-icon>\n } @else {\n <mat-icon>{{\n row.cellData[column.name].value || column.icon\n }}</mat-icon>\n }\n </td>\n }\n @case (entityTableColumnRenderer.ButtonGroup) {\n <ng-container *matCellDef=\"let row\">\n <td\n mat-cell\n class=\"mat-cell-text\"\n [ngClass]=\"row.cellData[column.name].class\"\n >\n @for (\n button of row.cellData[column.name].value;\n track button\n ) {\n @if (\n isEdition(row.record) === button.editMode ||\n button.editMode === undefined\n ) {\n <span>\n @if (button.style === 'mat-icon-button') {\n <button\n igoStopPropagation\n mat-icon-button\n [color]=\"button.color\"\n (mousedown)=\"\n onButtonClick(button.click, row.record)\n \"\n [disabled]=\"button.disabled\"\n >\n <mat-icon>{{ button.icon }}</mat-icon>\n </button>\n } @else {\n <button\n igoStopPropagation\n mat-mini-fab\n [color]=\"button.color\"\n (mousedown)=\"\n onButtonClick(button.click, row.record)\n \"\n [disabled]=\"button.disabled\"\n >\n <mat-icon>{{ button.icon }}</mat-icon>\n </button>\n }\n </span>\n }\n }\n </td>\n </ng-container>\n }\n @default {\n <ng-container *matCellDef=\"let row\">\n @if (!row.cellData[column.name].isUrl) {\n <td\n mat-cell\n class=\"mat-cell-text\"\n [ngClass]=\"row.cellData[column.name].class\"\n >\n {{ row.cellData[column.name].value }}\n </td>\n } @else {\n <td\n mat-cell\n class=\"mat-cell-text\"\n [ngClass]=\"row.cellData[column.name].class\"\n >\n <a\n href=\"{{ row.cellData[column.name].value }}\"\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n (click)=\"$event.stopPropagation()\"\n >\n @if (row.cellData[column.name].isImg) {\n <img\n igoImageError\n src=\"{{\n row.cellData[column.name].value\n | secureImage\n | async\n }}\"\n width=\"50\"\n heigth=\"auto\"\n />\n } @else {\n <span>{{\n 'igo.common.entity-table.targetHtmlUrl' | translate\n }}</span>\n }\n </a>\n </td>\n }\n </ng-container>\n }\n }\n }\n </ng-container>\n }\n\n <tr\n mat-header-row\n *matHeaderRowDef=\"headers; sticky: fixedHeader\"\n [ngClass]=\"getHeaderClass()\"\n ></tr>\n <tr\n mat-row\n igoEntityTableRow\n *matRowDef=\"let row; columns: headers\"\n [scrollBehavior]=\"scrollBehavior()\"\n [ngClass]=\"getRowClass(row.record)\"\n [selection]=\"selection\"\n [selected]=\"rowIsSelected(row.record)\"\n (select)=\"onRowSelect(row.record)\"\n (click)=\"onRowClick(row.record)\"\n ></tr>\n </table>\n @if (withPaginator()) {\n <igo-entity-table-paginator\n [store]=\"store()\"\n [paginatorOptions]=\"paginatorOptions()\"\n [entitySortChange$]=\"entitySortChange$\"\n (paginatorChange)=\"paginatorChange($event)\"\n />\n }\n</div>\n", styles: [":host{width:100%;height:100%;display:block;--mat-table-header-container-height: 52px}:host.table-compact tr.mat-mdc-header-row,:host.table-compact ::ng-deep mat-checkbox .mat-ripple{height:36px}:host.table-compact tr.mat-mdc-row,:host.table-compact ::ng-deep mat-checkbox .mat-ripple{height:28px}.table-container{display:flex;flex-direction:column;height:100%;overflow:auto;flex:1 1 auto}.mat-cell-text{overflow:hidden;word-wrap:break-word}table.igo-entity-table-with-selection tr:hover{-moz-box-shadow:2px 0px 2px 0px #dddddd;-webkit-box-shadow:2px 0px 2px 0px #dddddd;-o-box-shadow:2px 0px 2px 0px #dddddd;box-shadow:2px 0 2px #ddd;cursor:pointer}table button{margin:7px}.class_hidden{visibility:hidden}.class_display_none{display:none}.class_boolean,.class_icon,.class_number{text-align:center;padding-right:35px!important}.class_string,.class_text,.class_number_edition{text-align:left}td.edition{background:#a6a6a633}input{border-bottom:1px solid darkgrey}table.igo-entity-table-with-selection tr.igo-entity-table-row-highlighted{background-color:var(--mat-sys-primary-container);color:var(--mat-sys-on-primary-container)}\n"], dependencies: [{ kind: "component", type: EntityTablePaginatorComponent, selector: "igo-entity-table-paginator", inputs: ["entitySortChange$", "store", "paginatorOptions"], outputs: ["paginatorChange"] }, { kind: "directive", type: EntityTableRowDirective, selector: "[igoEntityTableRow]", inputs: ["selection", "selectOnClick", "highlightSelection", "selected", "scrollBehavior"], outputs: ["select"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$2.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i1$2.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: ImageErrorDirective, selector: "[igoImageError]", inputs: ["errorImageUrl", "hideError"] }, { kind: "ngmodule", type: MatAutocompleteModule }, { kind: "component", type: i2$1.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i2$1.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i4.MatMiniFabButton, selector: "button[mat-mini-fab], a[mat-mini-fab], button[matMiniFab], a[matMiniFab]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i4.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i5.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i6.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i6.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i6.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "directive", type: i1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i9.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatNativeDateModule }, { kind: "ngmodule", type: // For the DateAdapter provider
|
|
2998
|
+
], usesOnChanges: true, ngImport: i0, template: "<div class=\"table-container\" [style.height]=\"tableHeight\">\n <table\n id=\"currentWorkspaceTable\"\n mat-table\n matSort\n [ngClass]=\"getTableClass()\"\n [dataSource]=\"dataSource\"\n [trackBy]=\"getTrackByFunction()\"\n (matSortChange)=\"onSort($event)\"\n >\n <ng-container matColumnDef=\"selectionCheckbox\" class=\"mat-cell-checkbox\">\n <th mat-header-cell *matHeaderCellDef>\n @if (selectMany) {\n @let selectionState = selectionState$ | async;\n @if (selectionState) {\n <mat-checkbox\n (change)=\"onToggleRows($event.checked)\"\n [checked]=\"selectionState === entityTableSelectionState.All\"\n [indeterminate]=\"\n selectionState === entityTableSelectionState.Some\n \"\n />\n }\n }\n </th>\n <td mat-cell *matCellDef=\"let row\">\n <mat-checkbox\n (mousedown)=\"$event.shiftKey ? $event.preventDefault() : null\"\n (click)=\"\n $event.shiftKey\n ? onShiftToggleRow(!rowIsSelected(row.record), row.record, $event)\n : $event.stopPropagation()\n \"\n (change)=\"onToggleRow($event.checked, row.record)\"\n [checked]=\"rowIsSelected(row.record)\"\n />\n </td>\n </ng-container>\n\n @let template = this.template();\n @if (template) {\n @for (column of template.columns; track column) {\n <ng-container [matColumnDef]=\"column.name\">\n @if (columnIsSortable(column)) {\n <th\n mat-header-cell\n *matHeaderCellDef\n mat-sort-header\n [matTooltip]=\"column.tooltip ? column.tooltip : undefined\"\n >\n {{ column.title }}\n </th>\n } @else {\n <th\n mat-header-cell\n *matHeaderCellDef\n [matTooltip]=\"column.tooltip ? column.tooltip : undefined\"\n >\n {{ column.title }}\n </th>\n }\n\n @let columnRenderer = getColumnRenderer(column);\n @if (columnRenderer) {\n @switch (columnRenderer) {\n @case (entityTableColumnRenderer.HTML) {\n <ng-container *matCellDef=\"let row\">\n @if (!row.cellData[column.name].isUrl) {\n <td\n mat-cell\n class=\"mat-cell-text\"\n [ngClass]=\"row.cellData[column.name].class\"\n [innerHTML]=\"row.cellData[column.name].value\"\n ></td>\n } @else {\n <td\n mat-cell\n class=\"mat-cell-text\"\n [ngClass]=\"row.cellData[column.name].class\"\n >\n <a\n href=\"{{ row.cellData[column.name].value }}\"\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n (click)=\"$event.stopPropagation()\"\n >\n @if (row.cellData[column.name].isImg) {\n <img\n igoImageError\n src=\"{{\n row.cellData[column.name].value\n | secureImage\n | async\n }}\"\n width=\"50\"\n heigth=\"auto\"\n />\n } @else {\n <span\n >{{ 'igo.geo.targetHtmlUrl' | translate }}\n </span>\n }\n </a>\n </td>\n }\n </ng-container>\n }\n @case (entityTableColumnRenderer.UnsanitizedHTML) {\n <ng-container *matCellDef=\"let row\">\n @if (isEdition(row.record)) {\n <td\n mat-cell\n class=\"mat-cell-text edition\"\n [formGroup]=\"formGroup\"\n [ngClass]=\"row.cellData[column.name].class\"\n >\n @switch (column.type) {\n @case ('date') {\n <div class=\"date-picker\">\n <mat-datepicker-toggle matSuffix [for]=\"picker\" />\n <input\n matInput\n [matDatepicker]=\"picker\"\n [formControlName]=\"column.name\"\n value=\"{{ row.cellData[column.name].value }}\"\n (dateChange)=\"\n onDateChange(column.name, row.record, $event)\n \"\n />\n <mat-datepicker #picker />\n </div>\n }\n @case ('time') {\n <input\n matInput\n type=\"time\"\n [formControlName]=\"column.name\"\n step=\"900\"\n (focus)=\"column?.onFocus($event)\"\n (keypress)=\"column?.onChange($event)\"\n (blur)=\"column?.onBlur($event)\"\n />\n }\n @case ('number') {\n <input\n matInput\n type=\"number\"\n class=\"class_number_edition\"\n [formControlName]=\"column.name\"\n step=\"{{ column.step }}\"\n value=\"{{ row.cellData[column.name].value }}\"\n (input)=\"\n onValueChange(column.name, row.record, $event)\n \"\n readonly=\"{{\n getValidationAttributeValue(column, 'readonly')\n }}\"\n required=\"{{\n getValidationAttributeValue(column, 'mandatory')\n }}\"\n min=\"{{\n getValidationAttributeValue(column, 'minValue')\n }}\"\n max=\"{{\n getValidationAttributeValue(column, 'maxValue')\n }}\"\n />\n }\n @case ('boolean') {\n <mat-checkbox\n [formControlName]=\"column.name\"\n [checked]=\"row.cellData[column.name].value\"\n (change)=\"\n onBooleanValueChange(\n column.name,\n row.record,\n $event\n )\n \"\n />\n }\n @case ('list') {\n <mat-select\n required=\"{{\n getValidationAttributeValue(column, 'mandatory')\n }}\"\n [formControlName]=\"column.name\"\n [multiple]=\"column.multiple\"\n (selectionChange)=\"\n onSelectValueChange(\n column.name,\n row.record,\n $event\n )\n \"\n [value]=\"row.cellData[column.name].value\"\n >\n @for (\n option of $any(column).domainValues;\n track option\n ) {\n <mat-option\n [value]=\"option.id\"\n [disabled]=\"option.disabled\"\n >\n {{ option.value }}\n </mat-option>\n }\n </mat-select>\n }\n @case ('autocomplete') {\n <input\n matInput\n type=\"text\"\n [formControlName]=\"column.name\"\n [matAutocomplete]=\"auto\"\n required=\"{{\n getValidationAttributeValue(column, 'mandatory')\n }}\"\n value=\"{{ row.cellData[column.name].value }}\"\n readonly=\"{{\n getValidationAttributeValue(column, 'readonly')\n }}\"\n />\n <mat-autocomplete\n #auto=\"matAutocomplete\"\n (optionSelected)=\"\n onAutocompleteValueChange(\n column,\n row.record,\n $event\n )\n \"\n panelWidth=\"430px\"\n >\n @for (\n option of filteredOptions[column.name] | async;\n track option\n ) {\n <mat-option [value]=\"option.id\">\n {{ option.value }}\n </mat-option>\n }\n </mat-autocomplete>\n }\n @default {\n <input\n matInput\n type=\"text\"\n [formControlName]=\"column.name\"\n value=\"{{ row.cellData[column.name].value }}\"\n (input)=\"\n onValueChange(column.name, row.record, $event)\n \"\n readonly=\"{{\n getValidationAttributeValue(column, 'readonly')\n }}\"\n required=\"{{\n getValidationAttributeValue(column, 'mandatory')\n }}\"\n />\n }\n }\n </td>\n } @else {\n @if (!row.cellData[column.name].isUrl) {\n <td\n mat-cell\n class=\"mat-cell-text\"\n [ngClass]=\"row.cellData[column.name].class\"\n [innerHTML]=\"\n row.cellData[column.name].value | sanitizeHtml\n \"\n ></td>\n } @else {\n <td\n mat-cell\n class=\"mat-cell-text\"\n [ngClass]=\"row.cellData[column.name].class\"\n >\n <a\n href=\"{{ row.cellData[column.name].value }}\"\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n (click)=\"$event.stopPropagation()\"\n >\n @if (row.cellData[column.name].isImg) {\n <img\n igoImageError\n src=\"{{\n row.cellData[column.name].value\n | secureImage\n | async\n }}\"\n width=\"50\"\n heigth=\"auto\"\n />\n } @else {\n ><span\n >{{ 'igo.geo.targetHtmlUrl' | translate }}\n </span>\n }\n >\n </a>\n </td>\n }\n }\n </ng-container>\n }\n @case (entityTableColumnRenderer.Icon) {\n <td\n mat-cell\n *matCellDef=\"let row\"\n class=\"mat-cell-text\"\n [ngClass]=\"row.cellData[column.name].class\"\n >\n @if (column.onClick) {\n <mat-icon (click)=\"column.onClick($event)\">{{\n row.cellData[column.name].value || column.icon\n }}</mat-icon>\n } @else {\n <mat-icon>{{\n row.cellData[column.name].value || column.icon\n }}</mat-icon>\n }\n </td>\n }\n @case (entityTableColumnRenderer.ButtonGroup) {\n <ng-container *matCellDef=\"let row\">\n <td\n mat-cell\n class=\"mat-cell-text\"\n [ngClass]=\"row.cellData[column.name].class\"\n >\n @for (\n button of row.cellData[column.name].value;\n track button\n ) {\n @if (\n isEdition(row.record) === button.editMode ||\n button.editMode === undefined\n ) {\n <span>\n @if (button.style === 'mat-icon-button') {\n <button\n igoStopPropagation\n mat-icon-button\n [color]=\"button.color\"\n (mousedown)=\"\n onButtonClick(button.click, row.record)\n \"\n [disabled]=\"button.disabled\"\n >\n <mat-icon>{{ button.icon }}</mat-icon>\n </button>\n } @else {\n <button\n igoStopPropagation\n mat-mini-fab\n [color]=\"button.color\"\n (mousedown)=\"\n onButtonClick(button.click, row.record)\n \"\n [disabled]=\"button.disabled\"\n >\n <mat-icon>{{ button.icon }}</mat-icon>\n </button>\n }\n </span>\n }\n }\n </td>\n </ng-container>\n }\n @default {\n <ng-container *matCellDef=\"let row\">\n @if (!row.cellData[column.name].isUrl) {\n <td\n mat-cell\n class=\"mat-cell-text\"\n [ngClass]=\"row.cellData[column.name].class\"\n >\n {{ row.cellData[column.name].value }}\n </td>\n } @else {\n <td\n mat-cell\n class=\"mat-cell-text\"\n [ngClass]=\"row.cellData[column.name].class\"\n >\n <a\n href=\"{{ row.cellData[column.name].value }}\"\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n (click)=\"$event.stopPropagation()\"\n >\n @if (row.cellData[column.name].isImg) {\n <img\n igoImageError\n src=\"{{\n row.cellData[column.name].value\n | secureImage\n | async\n }}\"\n width=\"50\"\n heigth=\"auto\"\n />\n } @else {\n <span>{{\n 'igo.common.entity-table.targetHtmlUrl' | translate\n }}</span>\n }\n >\n </a>\n </td>\n }\n </ng-container>\n }\n }\n }\n </ng-container>\n }\n }\n\n <tr\n mat-header-row\n *matHeaderRowDef=\"headers; sticky: fixedHeader\"\n [ngClass]=\"getHeaderClass()\"\n ></tr>\n <tr\n mat-row\n igoEntityTableRow\n *matRowDef=\"let row; columns: headers\"\n [scrollBehavior]=\"scrollBehavior()\"\n [ngClass]=\"getRowClass(row.record)\"\n [selection]=\"selection\"\n [selected]=\"rowIsSelected(row.record)\"\n (select)=\"onRowSelect(row.record)\"\n (click)=\"onRowClick(row.record)\"\n ></tr>\n </table>\n @if (withPaginator()) {\n <igo-entity-table-paginator\n [store]=\"store()\"\n [paginatorOptions]=\"paginatorOptions()\"\n [entitySortChange$]=\"entitySortChange$\"\n (paginatorChange)=\"paginatorChange($event)\"\n />\n }\n</div>\n", styles: [":host{width:100%;height:100%;display:block;--mat-table-header-container-height: 52px}:host.table-compact tr.mat-mdc-header-row,:host.table-compact ::ng-deep mat-checkbox .mat-ripple{height:36px}:host.table-compact tr.mat-mdc-row,:host.table-compact ::ng-deep mat-checkbox .mat-ripple{height:28px}.table-container{display:flex;flex-direction:column;height:100%;overflow:auto;flex:1 1 auto}.mat-cell-text{overflow:hidden;word-wrap:break-word}table.igo-entity-table-with-selection tr:hover{-moz-box-shadow:2px 0px 2px 0px #dddddd;-webkit-box-shadow:2px 0px 2px 0px #dddddd;-o-box-shadow:2px 0px 2px 0px #dddddd;box-shadow:2px 0 2px #ddd;cursor:pointer}table button{margin:7px}.class_hidden{visibility:hidden}.class_display_none{display:none}.class_boolean,.class_icon,.class_number{text-align:center;padding-right:35px!important}.class_string,.class_text,.class_number_edition{text-align:left}td.edition{background:#a6a6a633}input{border-bottom:1px solid darkgrey}table.igo-entity-table-with-selection tr.igo-entity-table-row-highlighted{background-color:var(--mat-sys-primary-container);color:var(--mat-sys-on-primary-container)}\n"], dependencies: [{ kind: "component", type: EntityTablePaginatorComponent, selector: "igo-entity-table-paginator", inputs: ["entitySortChange$", "store", "paginatorOptions"], outputs: ["paginatorChange"] }, { kind: "directive", type: EntityTableRowDirective, selector: "[igoEntityTableRow]", inputs: ["selection", "selectOnClick", "highlightSelection", "selected", "scrollBehavior"], outputs: ["select"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$2.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i1$2.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: ImageErrorDirective, selector: "[igoImageError]", inputs: ["errorImageUrl", "hideError"] }, { kind: "ngmodule", type: MatAutocompleteModule }, { kind: "component", type: i2$1.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i2$1.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i4.MatMiniFabButton, selector: "button[mat-mini-fab], a[mat-mini-fab], button[matMiniFab], a[matMiniFab]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i4.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i5.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i6.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i6.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i6.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "directive", type: i1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i9.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatNativeDateModule }, { kind: "ngmodule", type: // For the DateAdapter provider
|
|
2966
2999
|
MatOptionModule }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i2.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "ngmodule", type: MatSortModule }, { kind: "directive", type: i10.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i10.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "ngmodule", type: MatTableModule }, { kind: "component", type: i11.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i11.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i11.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i11.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i11.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i11.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i11.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i11.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i11.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i11.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i12.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: StopPropagationDirective, selector: "[igoStopPropagation]" }, { kind: "ngmodule", type: IgoLanguageModule }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: SanitizeHtmlPipe, name: "sanitizeHtml" }, { kind: "pipe", type: SecureImagePipe, name: "secureImage" }, { kind: "pipe", type: i13.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2967
3000
|
}
|
|
2968
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
3001
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: EntityTableComponent, decorators: [{
|
|
2969
3002
|
type: Component,
|
|
2970
3003
|
args: [{ selector: 'igo-entity-table', changeDetection: ChangeDetectionStrategy.OnPush, providers: [
|
|
2971
3004
|
{ provide: MatFormFieldControl, useExisting: EntityTableComponent },
|
|
@@ -2995,7 +3028,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImpo
|
|
|
2995
3028
|
SecureImagePipe,
|
|
2996
3029
|
StopPropagationDirective,
|
|
2997
3030
|
IgoLanguageModule
|
|
2998
|
-
], template: "<div class=\"table-container\" [style.height]=\"tableHeight\">\n <table\n id=\"currentWorkspaceTable\"\n mat-table\n matSort\n [ngClass]=\"getTableClass()\"\n [dataSource]=\"dataSource\"\n [trackBy]=\"getTrackByFunction()\"\n (matSortChange)=\"onSort($event)\"\n >\n <ng-container matColumnDef=\"selectionCheckbox\" class=\"mat-cell-checkbox\">\n <th mat-header-cell *matHeaderCellDef>\n @if (selectMany) {\n @let selectionState = selectionState$ | async;\n @if (selectionState) {\n <mat-checkbox\n (change)=\"onToggleRows($event.checked)\"\n [checked]=\"selectionState === entityTableSelectionState.All\"\n [indeterminate]=\"\n selectionState === entityTableSelectionState.Some\n \"\n />\n }\n }\n </th>\n <td mat-cell *matCellDef=\"let row\">\n <mat-checkbox\n (mousedown)=\"$event.shiftKey ? $event.preventDefault() : null\"\n (click)=\"\n $event.shiftKey\n ? onShiftToggleRow(!rowIsSelected(row.record), row.record, $event)\n : $event.stopPropagation()\n \"\n (change)=\"onToggleRow($event.checked, row.record)\"\n [checked]=\"rowIsSelected(row.record)\"\n />\n </td>\n </ng-container>\n\n @for (column of template().columns; track column) {\n <ng-container [matColumnDef]=\"column.name\">\n @if (columnIsSortable(column)) {\n <th\n mat-header-cell\n *matHeaderCellDef\n mat-sort-header\n [matTooltip]=\"column.tooltip ? column.tooltip : undefined\"\n >\n {{ column.title }}\n </th>\n } @else {\n <th\n mat-header-cell\n *matHeaderCellDef\n [matTooltip]=\"column.tooltip ? column.tooltip : undefined\"\n >\n {{ column.title }}\n </th>\n }\n\n @let columnRenderer = getColumnRenderer(column);\n @if (columnRenderer) {\n @switch (columnRenderer) {\n @case (entityTableColumnRenderer.HTML) {\n <ng-container *matCellDef=\"let row\">\n @if (!row.cellData[column.name].isUrl) {\n <td\n mat-cell\n class=\"mat-cell-text\"\n [ngClass]=\"row.cellData[column.name].class\"\n [innerHTML]=\"row.cellData[column.name].value\"\n ></td>\n } @else {\n <td\n mat-cell\n class=\"mat-cell-text\"\n [ngClass]=\"row.cellData[column.name].class\"\n >\n <a\n href=\"{{ row.cellData[column.name].value }}\"\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n (click)=\"$event.stopPropagation()\"\n >\n @if (row.cellData[column.name].isImg) {\n <img\n igoImageError\n src=\"{{\n row.cellData[column.name].value\n | secureImage\n | async\n }}\"\n width=\"50\"\n heigth=\"auto\"\n />\n } @else {\n <span>{{ 'igo.geo.targetHtmlUrl' | translate }} </span>\n }\n </a>\n </td>\n }\n </ng-container>\n }\n @case (entityTableColumnRenderer.UnsanitizedHTML) {\n <ng-container *matCellDef=\"let row\">\n @if (isEdition(row.record)) {\n <td\n mat-cell\n class=\"mat-cell-text edition\"\n [formGroup]=\"formGroup\"\n [ngClass]=\"row.cellData[column.name].class\"\n >\n @switch (column.type) {\n @case ('date') {\n <div class=\"date-picker\">\n <mat-datepicker-toggle matSuffix [for]=\"picker\" />\n <input\n matInput\n [matDatepicker]=\"picker\"\n [formControlName]=\"column.name\"\n value=\"{{ row.cellData[column.name].value }}\"\n (dateChange)=\"\n onDateChange(column.name, row.record, $event)\n \"\n />\n <mat-datepicker #picker />\n </div>\n }\n @case ('time') {\n <input\n matInput\n type=\"time\"\n [formControlName]=\"column.name\"\n step=\"900\"\n (focus)=\"column.onFocus($event)\"\n (keypress)=\"column.onChange($event)\"\n (blur)=\"column.onBlur($event)\"\n />\n }\n @case ('number') {\n <input\n matInput\n type=\"number\"\n class=\"class_number_edition\"\n [formControlName]=\"column.name\"\n step=\"{{ column.step }}\"\n value=\"{{ row.cellData[column.name].value }}\"\n (input)=\"\n onValueChange(column.name, row.record, $event)\n \"\n readonly=\"{{\n getValidationAttributeValue(column, 'readonly')\n }}\"\n required=\"{{\n getValidationAttributeValue(column, 'mandatory')\n }}\"\n min=\"{{\n getValidationAttributeValue(column, 'minValue')\n }}\"\n max=\"{{\n getValidationAttributeValue(column, 'maxValue')\n }}\"\n />\n }\n @case ('boolean') {\n <mat-checkbox\n [formControlName]=\"column.name\"\n [checked]=\"row.cellData[column.name].value\"\n (change)=\"\n onBooleanValueChange(\n column.name,\n row.record,\n $event\n )\n \"\n />\n }\n @case ('list') {\n <mat-select\n required=\"{{\n getValidationAttributeValue(column, 'mandatory')\n }}\"\n [formControlName]=\"column.name\"\n [multiple]=\"column.multiple\"\n (selectionChange)=\"\n onSelectValueChange(column.name, row.record, $event)\n \"\n [value]=\"row.cellData[column.name].value\"\n >\n @for (\n option of $any(column).domainValues;\n track option\n ) {\n <mat-option\n [value]=\"option.id\"\n [disabled]=\"option.disabled\"\n >\n {{ option.value }}\n </mat-option>\n }\n </mat-select>\n }\n @case ('autocomplete') {\n <input\n matInput\n type=\"text\"\n [formControlName]=\"column.name\"\n [matAutocomplete]=\"auto\"\n required=\"{{\n getValidationAttributeValue(column, 'mandatory')\n }}\"\n value=\"{{ row.cellData[column.name].value }}\"\n readonly=\"{{\n getValidationAttributeValue(column, 'readonly')\n }}\"\n />\n <mat-autocomplete\n #auto=\"matAutocomplete\"\n (optionSelected)=\"\n onAutocompleteValueChange(\n column,\n row.record,\n $event\n )\n \"\n panelWidth=\"430px\"\n >\n @for (\n option of filteredOptions[column.name] | async;\n track option\n ) {\n <mat-option [value]=\"option.id\">\n {{ option.value }}\n </mat-option>\n }\n </mat-autocomplete>\n }\n @default {\n <input\n matInput\n type=\"text\"\n [formControlName]=\"column.name\"\n value=\"{{ row.cellData[column.name].value }}\"\n (input)=\"\n onValueChange(column.name, row.record, $event)\n \"\n readonly=\"{{\n getValidationAttributeValue(column, 'readonly')\n }}\"\n required=\"{{\n getValidationAttributeValue(column, 'mandatory')\n }}\"\n />\n }\n }\n </td>\n } @else {\n @if (!row.cellData[column.name].isUrl) {\n <td\n mat-cell\n class=\"mat-cell-text\"\n [ngClass]=\"row.cellData[column.name].class\"\n [innerHTML]=\"\n row.cellData[column.name].value | sanitizeHtml\n \"\n ></td>\n } @else {\n <td\n mat-cell\n class=\"mat-cell-text\"\n [ngClass]=\"row.cellData[column.name].class\"\n >\n <a\n href=\"{{ row.cellData[column.name].value }}\"\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n (click)=\"$event.stopPropagation()\"\n >\n @if (row.cellData[column.name].isImg) {\n <img\n igoImageError\n src=\"{{\n row.cellData[column.name].value\n | secureImage\n | async\n }}\"\n width=\"50\"\n heigth=\"auto\"\n />\n } @else {\n ><span\n >{{ 'igo.geo.targetHtmlUrl' | translate }}\n </span>\n }\n </a>\n </td>\n }\n }\n </ng-container>\n }\n @case (entityTableColumnRenderer.Icon) {\n <td\n mat-cell\n *matCellDef=\"let row\"\n class=\"mat-cell-text\"\n [ngClass]=\"row.cellData[column.name].class\"\n >\n @if (column.onClick) {\n <mat-icon (click)=\"column.onClick($event)\">{{\n row.cellData[column.name].value || column.icon\n }}</mat-icon>\n } @else {\n <mat-icon>{{\n row.cellData[column.name].value || column.icon\n }}</mat-icon>\n }\n </td>\n }\n @case (entityTableColumnRenderer.ButtonGroup) {\n <ng-container *matCellDef=\"let row\">\n <td\n mat-cell\n class=\"mat-cell-text\"\n [ngClass]=\"row.cellData[column.name].class\"\n >\n @for (\n button of row.cellData[column.name].value;\n track button\n ) {\n @if (\n isEdition(row.record) === button.editMode ||\n button.editMode === undefined\n ) {\n <span>\n @if (button.style === 'mat-icon-button') {\n <button\n igoStopPropagation\n mat-icon-button\n [color]=\"button.color\"\n (mousedown)=\"\n onButtonClick(button.click, row.record)\n \"\n [disabled]=\"button.disabled\"\n >\n <mat-icon>{{ button.icon }}</mat-icon>\n </button>\n } @else {\n <button\n igoStopPropagation\n mat-mini-fab\n [color]=\"button.color\"\n (mousedown)=\"\n onButtonClick(button.click, row.record)\n \"\n [disabled]=\"button.disabled\"\n >\n <mat-icon>{{ button.icon }}</mat-icon>\n </button>\n }\n </span>\n }\n }\n </td>\n </ng-container>\n }\n @default {\n <ng-container *matCellDef=\"let row\">\n @if (!row.cellData[column.name].isUrl) {\n <td\n mat-cell\n class=\"mat-cell-text\"\n [ngClass]=\"row.cellData[column.name].class\"\n >\n {{ row.cellData[column.name].value }}\n </td>\n } @else {\n <td\n mat-cell\n class=\"mat-cell-text\"\n [ngClass]=\"row.cellData[column.name].class\"\n >\n <a\n href=\"{{ row.cellData[column.name].value }}\"\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n (click)=\"$event.stopPropagation()\"\n >\n @if (row.cellData[column.name].isImg) {\n <img\n igoImageError\n src=\"{{\n row.cellData[column.name].value\n | secureImage\n | async\n }}\"\n width=\"50\"\n heigth=\"auto\"\n />\n } @else {\n <span>{{\n 'igo.common.entity-table.targetHtmlUrl' | translate\n }}</span>\n }\n </a>\n </td>\n }\n </ng-container>\n }\n }\n }\n </ng-container>\n }\n\n <tr\n mat-header-row\n *matHeaderRowDef=\"headers; sticky: fixedHeader\"\n [ngClass]=\"getHeaderClass()\"\n ></tr>\n <tr\n mat-row\n igoEntityTableRow\n *matRowDef=\"let row; columns: headers\"\n [scrollBehavior]=\"scrollBehavior()\"\n [ngClass]=\"getRowClass(row.record)\"\n [selection]=\"selection\"\n [selected]=\"rowIsSelected(row.record)\"\n (select)=\"onRowSelect(row.record)\"\n (click)=\"onRowClick(row.record)\"\n ></tr>\n </table>\n @if (withPaginator()) {\n <igo-entity-table-paginator\n [store]=\"store()\"\n [paginatorOptions]=\"paginatorOptions()\"\n [entitySortChange$]=\"entitySortChange$\"\n (paginatorChange)=\"paginatorChange($event)\"\n />\n }\n</div>\n", styles: [":host{width:100%;height:100%;display:block;--mat-table-header-container-height: 52px}:host.table-compact tr.mat-mdc-header-row,:host.table-compact ::ng-deep mat-checkbox .mat-ripple{height:36px}:host.table-compact tr.mat-mdc-row,:host.table-compact ::ng-deep mat-checkbox .mat-ripple{height:28px}.table-container{display:flex;flex-direction:column;height:100%;overflow:auto;flex:1 1 auto}.mat-cell-text{overflow:hidden;word-wrap:break-word}table.igo-entity-table-with-selection tr:hover{-moz-box-shadow:2px 0px 2px 0px #dddddd;-webkit-box-shadow:2px 0px 2px 0px #dddddd;-o-box-shadow:2px 0px 2px 0px #dddddd;box-shadow:2px 0 2px #ddd;cursor:pointer}table button{margin:7px}.class_hidden{visibility:hidden}.class_display_none{display:none}.class_boolean,.class_icon,.class_number{text-align:center;padding-right:35px!important}.class_string,.class_text,.class_number_edition{text-align:left}td.edition{background:#a6a6a633}input{border-bottom:1px solid darkgrey}table.igo-entity-table-with-selection tr.igo-entity-table-row-highlighted{background-color:var(--mat-sys-primary-container);color:var(--mat-sys-on-primary-container)}\n"] }]
|
|
3031
|
+
], template: "<div class=\"table-container\" [style.height]=\"tableHeight\">\n <table\n id=\"currentWorkspaceTable\"\n mat-table\n matSort\n [ngClass]=\"getTableClass()\"\n [dataSource]=\"dataSource\"\n [trackBy]=\"getTrackByFunction()\"\n (matSortChange)=\"onSort($event)\"\n >\n <ng-container matColumnDef=\"selectionCheckbox\" class=\"mat-cell-checkbox\">\n <th mat-header-cell *matHeaderCellDef>\n @if (selectMany) {\n @let selectionState = selectionState$ | async;\n @if (selectionState) {\n <mat-checkbox\n (change)=\"onToggleRows($event.checked)\"\n [checked]=\"selectionState === entityTableSelectionState.All\"\n [indeterminate]=\"\n selectionState === entityTableSelectionState.Some\n \"\n />\n }\n }\n </th>\n <td mat-cell *matCellDef=\"let row\">\n <mat-checkbox\n (mousedown)=\"$event.shiftKey ? $event.preventDefault() : null\"\n (click)=\"\n $event.shiftKey\n ? onShiftToggleRow(!rowIsSelected(row.record), row.record, $event)\n : $event.stopPropagation()\n \"\n (change)=\"onToggleRow($event.checked, row.record)\"\n [checked]=\"rowIsSelected(row.record)\"\n />\n </td>\n </ng-container>\n\n @let template = this.template();\n @if (template) {\n @for (column of template.columns; track column) {\n <ng-container [matColumnDef]=\"column.name\">\n @if (columnIsSortable(column)) {\n <th\n mat-header-cell\n *matHeaderCellDef\n mat-sort-header\n [matTooltip]=\"column.tooltip ? column.tooltip : undefined\"\n >\n {{ column.title }}\n </th>\n } @else {\n <th\n mat-header-cell\n *matHeaderCellDef\n [matTooltip]=\"column.tooltip ? column.tooltip : undefined\"\n >\n {{ column.title }}\n </th>\n }\n\n @let columnRenderer = getColumnRenderer(column);\n @if (columnRenderer) {\n @switch (columnRenderer) {\n @case (entityTableColumnRenderer.HTML) {\n <ng-container *matCellDef=\"let row\">\n @if (!row.cellData[column.name].isUrl) {\n <td\n mat-cell\n class=\"mat-cell-text\"\n [ngClass]=\"row.cellData[column.name].class\"\n [innerHTML]=\"row.cellData[column.name].value\"\n ></td>\n } @else {\n <td\n mat-cell\n class=\"mat-cell-text\"\n [ngClass]=\"row.cellData[column.name].class\"\n >\n <a\n href=\"{{ row.cellData[column.name].value }}\"\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n (click)=\"$event.stopPropagation()\"\n >\n @if (row.cellData[column.name].isImg) {\n <img\n igoImageError\n src=\"{{\n row.cellData[column.name].value\n | secureImage\n | async\n }}\"\n width=\"50\"\n heigth=\"auto\"\n />\n } @else {\n <span\n >{{ 'igo.geo.targetHtmlUrl' | translate }}\n </span>\n }\n </a>\n </td>\n }\n </ng-container>\n }\n @case (entityTableColumnRenderer.UnsanitizedHTML) {\n <ng-container *matCellDef=\"let row\">\n @if (isEdition(row.record)) {\n <td\n mat-cell\n class=\"mat-cell-text edition\"\n [formGroup]=\"formGroup\"\n [ngClass]=\"row.cellData[column.name].class\"\n >\n @switch (column.type) {\n @case ('date') {\n <div class=\"date-picker\">\n <mat-datepicker-toggle matSuffix [for]=\"picker\" />\n <input\n matInput\n [matDatepicker]=\"picker\"\n [formControlName]=\"column.name\"\n value=\"{{ row.cellData[column.name].value }}\"\n (dateChange)=\"\n onDateChange(column.name, row.record, $event)\n \"\n />\n <mat-datepicker #picker />\n </div>\n }\n @case ('time') {\n <input\n matInput\n type=\"time\"\n [formControlName]=\"column.name\"\n step=\"900\"\n (focus)=\"column?.onFocus($event)\"\n (keypress)=\"column?.onChange($event)\"\n (blur)=\"column?.onBlur($event)\"\n />\n }\n @case ('number') {\n <input\n matInput\n type=\"number\"\n class=\"class_number_edition\"\n [formControlName]=\"column.name\"\n step=\"{{ column.step }}\"\n value=\"{{ row.cellData[column.name].value }}\"\n (input)=\"\n onValueChange(column.name, row.record, $event)\n \"\n readonly=\"{{\n getValidationAttributeValue(column, 'readonly')\n }}\"\n required=\"{{\n getValidationAttributeValue(column, 'mandatory')\n }}\"\n min=\"{{\n getValidationAttributeValue(column, 'minValue')\n }}\"\n max=\"{{\n getValidationAttributeValue(column, 'maxValue')\n }}\"\n />\n }\n @case ('boolean') {\n <mat-checkbox\n [formControlName]=\"column.name\"\n [checked]=\"row.cellData[column.name].value\"\n (change)=\"\n onBooleanValueChange(\n column.name,\n row.record,\n $event\n )\n \"\n />\n }\n @case ('list') {\n <mat-select\n required=\"{{\n getValidationAttributeValue(column, 'mandatory')\n }}\"\n [formControlName]=\"column.name\"\n [multiple]=\"column.multiple\"\n (selectionChange)=\"\n onSelectValueChange(\n column.name,\n row.record,\n $event\n )\n \"\n [value]=\"row.cellData[column.name].value\"\n >\n @for (\n option of $any(column).domainValues;\n track option\n ) {\n <mat-option\n [value]=\"option.id\"\n [disabled]=\"option.disabled\"\n >\n {{ option.value }}\n </mat-option>\n }\n </mat-select>\n }\n @case ('autocomplete') {\n <input\n matInput\n type=\"text\"\n [formControlName]=\"column.name\"\n [matAutocomplete]=\"auto\"\n required=\"{{\n getValidationAttributeValue(column, 'mandatory')\n }}\"\n value=\"{{ row.cellData[column.name].value }}\"\n readonly=\"{{\n getValidationAttributeValue(column, 'readonly')\n }}\"\n />\n <mat-autocomplete\n #auto=\"matAutocomplete\"\n (optionSelected)=\"\n onAutocompleteValueChange(\n column,\n row.record,\n $event\n )\n \"\n panelWidth=\"430px\"\n >\n @for (\n option of filteredOptions[column.name] | async;\n track option\n ) {\n <mat-option [value]=\"option.id\">\n {{ option.value }}\n </mat-option>\n }\n </mat-autocomplete>\n }\n @default {\n <input\n matInput\n type=\"text\"\n [formControlName]=\"column.name\"\n value=\"{{ row.cellData[column.name].value }}\"\n (input)=\"\n onValueChange(column.name, row.record, $event)\n \"\n readonly=\"{{\n getValidationAttributeValue(column, 'readonly')\n }}\"\n required=\"{{\n getValidationAttributeValue(column, 'mandatory')\n }}\"\n />\n }\n }\n </td>\n } @else {\n @if (!row.cellData[column.name].isUrl) {\n <td\n mat-cell\n class=\"mat-cell-text\"\n [ngClass]=\"row.cellData[column.name].class\"\n [innerHTML]=\"\n row.cellData[column.name].value | sanitizeHtml\n \"\n ></td>\n } @else {\n <td\n mat-cell\n class=\"mat-cell-text\"\n [ngClass]=\"row.cellData[column.name].class\"\n >\n <a\n href=\"{{ row.cellData[column.name].value }}\"\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n (click)=\"$event.stopPropagation()\"\n >\n @if (row.cellData[column.name].isImg) {\n <img\n igoImageError\n src=\"{{\n row.cellData[column.name].value\n | secureImage\n | async\n }}\"\n width=\"50\"\n heigth=\"auto\"\n />\n } @else {\n ><span\n >{{ 'igo.geo.targetHtmlUrl' | translate }}\n </span>\n }\n >\n </a>\n </td>\n }\n }\n </ng-container>\n }\n @case (entityTableColumnRenderer.Icon) {\n <td\n mat-cell\n *matCellDef=\"let row\"\n class=\"mat-cell-text\"\n [ngClass]=\"row.cellData[column.name].class\"\n >\n @if (column.onClick) {\n <mat-icon (click)=\"column.onClick($event)\">{{\n row.cellData[column.name].value || column.icon\n }}</mat-icon>\n } @else {\n <mat-icon>{{\n row.cellData[column.name].value || column.icon\n }}</mat-icon>\n }\n </td>\n }\n @case (entityTableColumnRenderer.ButtonGroup) {\n <ng-container *matCellDef=\"let row\">\n <td\n mat-cell\n class=\"mat-cell-text\"\n [ngClass]=\"row.cellData[column.name].class\"\n >\n @for (\n button of row.cellData[column.name].value;\n track button\n ) {\n @if (\n isEdition(row.record) === button.editMode ||\n button.editMode === undefined\n ) {\n <span>\n @if (button.style === 'mat-icon-button') {\n <button\n igoStopPropagation\n mat-icon-button\n [color]=\"button.color\"\n (mousedown)=\"\n onButtonClick(button.click, row.record)\n \"\n [disabled]=\"button.disabled\"\n >\n <mat-icon>{{ button.icon }}</mat-icon>\n </button>\n } @else {\n <button\n igoStopPropagation\n mat-mini-fab\n [color]=\"button.color\"\n (mousedown)=\"\n onButtonClick(button.click, row.record)\n \"\n [disabled]=\"button.disabled\"\n >\n <mat-icon>{{ button.icon }}</mat-icon>\n </button>\n }\n </span>\n }\n }\n </td>\n </ng-container>\n }\n @default {\n <ng-container *matCellDef=\"let row\">\n @if (!row.cellData[column.name].isUrl) {\n <td\n mat-cell\n class=\"mat-cell-text\"\n [ngClass]=\"row.cellData[column.name].class\"\n >\n {{ row.cellData[column.name].value }}\n </td>\n } @else {\n <td\n mat-cell\n class=\"mat-cell-text\"\n [ngClass]=\"row.cellData[column.name].class\"\n >\n <a\n href=\"{{ row.cellData[column.name].value }}\"\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n (click)=\"$event.stopPropagation()\"\n >\n @if (row.cellData[column.name].isImg) {\n <img\n igoImageError\n src=\"{{\n row.cellData[column.name].value\n | secureImage\n | async\n }}\"\n width=\"50\"\n heigth=\"auto\"\n />\n } @else {\n <span>{{\n 'igo.common.entity-table.targetHtmlUrl' | translate\n }}</span>\n }\n >\n </a>\n </td>\n }\n </ng-container>\n }\n }\n }\n </ng-container>\n }\n }\n\n <tr\n mat-header-row\n *matHeaderRowDef=\"headers; sticky: fixedHeader\"\n [ngClass]=\"getHeaderClass()\"\n ></tr>\n <tr\n mat-row\n igoEntityTableRow\n *matRowDef=\"let row; columns: headers\"\n [scrollBehavior]=\"scrollBehavior()\"\n [ngClass]=\"getRowClass(row.record)\"\n [selection]=\"selection\"\n [selected]=\"rowIsSelected(row.record)\"\n (select)=\"onRowSelect(row.record)\"\n (click)=\"onRowClick(row.record)\"\n ></tr>\n </table>\n @if (withPaginator()) {\n <igo-entity-table-paginator\n [store]=\"store()\"\n [paginatorOptions]=\"paginatorOptions()\"\n [entitySortChange$]=\"entitySortChange$\"\n (paginatorChange)=\"paginatorChange($event)\"\n />\n }\n</div>\n", styles: [":host{width:100%;height:100%;display:block;--mat-table-header-container-height: 52px}:host.table-compact tr.mat-mdc-header-row,:host.table-compact ::ng-deep mat-checkbox .mat-ripple{height:36px}:host.table-compact tr.mat-mdc-row,:host.table-compact ::ng-deep mat-checkbox .mat-ripple{height:28px}.table-container{display:flex;flex-direction:column;height:100%;overflow:auto;flex:1 1 auto}.mat-cell-text{overflow:hidden;word-wrap:break-word}table.igo-entity-table-with-selection tr:hover{-moz-box-shadow:2px 0px 2px 0px #dddddd;-webkit-box-shadow:2px 0px 2px 0px #dddddd;-o-box-shadow:2px 0px 2px 0px #dddddd;box-shadow:2px 0 2px #ddd;cursor:pointer}table button{margin:7px}.class_hidden{visibility:hidden}.class_display_none{display:none}.class_boolean,.class_icon,.class_number{text-align:center;padding-right:35px!important}.class_string,.class_text,.class_number_edition{text-align:left}td.edition{background:#a6a6a633}input{border-bottom:1px solid darkgrey}table.igo-entity-table-with-selection tr.igo-entity-table-row-highlighted{background-color:var(--mat-sys-primary-container);color:var(--mat-sys-on-primary-container)}\n"] }]
|
|
2999
3032
|
}], ctorParameters: () => [], propDecorators: { store: [{ type: i0.Input, args: [{ isSignal: true, alias: "store", required: false }] }], paginator: [{
|
|
3000
3033
|
type: Input
|
|
3001
3034
|
}], template: [{ type: i0.Input, args: [{ isSignal: true, alias: "template", required: false }] }], scrollBehavior: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollBehavior", required: false }] }], sortNullsFirst: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortNullsFirst", required: false }] }], withPaginator: [{ type: i0.Input, args: [{ isSignal: true, alias: "withPaginator", required: false }] }], paginatorOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "paginatorOptions", required: false }] }], entityClick: [{ type: i0.Output, args: ["entityClick"] }], entitySelectChange: [{ type: i0.Output, args: ["entitySelectChange"] }], entitySortChange: [{ type: i0.Output, args: ["entitySortChange"] }] } });
|
|
@@ -3004,11 +3037,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImpo
|
|
|
3004
3037
|
* @deprecated import the EntityTableComponent directly
|
|
3005
3038
|
*/
|
|
3006
3039
|
class IgoEntityTableModule {
|
|
3007
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
3008
|
-
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.
|
|
3009
|
-
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.
|
|
3040
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: IgoEntityTableModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
3041
|
+
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.19", ngImport: i0, type: IgoEntityTableModule, imports: [EntityTableComponent], exports: [EntityTableComponent] });
|
|
3042
|
+
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: IgoEntityTableModule, imports: [EntityTableComponent] });
|
|
3010
3043
|
}
|
|
3011
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
3044
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: IgoEntityTableModule, decorators: [{
|
|
3012
3045
|
type: NgModule,
|
|
3013
3046
|
args: [{
|
|
3014
3047
|
imports: [EntityTableComponent],
|
|
@@ -3020,11 +3053,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImpo
|
|
|
3020
3053
|
* @deprecated import the EntityTablePaginatorComponent directly
|
|
3021
3054
|
*/
|
|
3022
3055
|
class IgoEntityTablePaginatorModule {
|
|
3023
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
3024
|
-
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.
|
|
3025
|
-
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.
|
|
3056
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: IgoEntityTablePaginatorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
3057
|
+
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.19", ngImport: i0, type: IgoEntityTablePaginatorModule, imports: [EntityTablePaginatorComponent], exports: [EntityTablePaginatorComponent] });
|
|
3058
|
+
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: IgoEntityTablePaginatorModule, imports: [EntityTablePaginatorComponent] });
|
|
3026
3059
|
}
|
|
3027
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
3060
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: IgoEntityTablePaginatorModule, decorators: [{
|
|
3028
3061
|
type: NgModule,
|
|
3029
3062
|
args: [{
|
|
3030
3063
|
imports: [EntityTablePaginatorComponent],
|
|
@@ -3041,15 +3074,15 @@ const ENTITY_DIRECTIVES = [
|
|
|
3041
3074
|
* @deprecated import the components directly or ENTITY_DIRECTIVES for every components/directives
|
|
3042
3075
|
*/
|
|
3043
3076
|
class IgoEntityModule {
|
|
3044
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
3045
|
-
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.
|
|
3077
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: IgoEntityModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
3078
|
+
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.19", ngImport: i0, type: IgoEntityModule, imports: [EntitySelectorComponent,
|
|
3046
3079
|
EntityTableComponent,
|
|
3047
3080
|
EntityTablePaginatorComponent], exports: [EntitySelectorComponent,
|
|
3048
3081
|
EntityTableComponent,
|
|
3049
3082
|
EntityTablePaginatorComponent] });
|
|
3050
|
-
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.
|
|
3083
|
+
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: IgoEntityModule, imports: [ENTITY_DIRECTIVES] });
|
|
3051
3084
|
}
|
|
3052
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
3085
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: IgoEntityModule, decorators: [{
|
|
3053
3086
|
type: NgModule,
|
|
3054
3087
|
args: [{
|
|
3055
3088
|
imports: [...ENTITY_DIRECTIVES],
|