@smallpearl/ngx-helper 0.31.15 → 0.31.17
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/README.md +7 -2
- package/entity-field/src/entity-field.d.ts +2 -2
- package/fesm2022/smallpearl-ngx-helper-entity-field.mjs.map +1 -1
- package/fesm2022/smallpearl-ngx-helper-mat-entity-crud.mjs +75 -35
- package/fesm2022/smallpearl-ngx-helper-mat-entity-crud.mjs.map +1 -1
- package/fesm2022/smallpearl-ngx-helper-mat-entity-list.mjs +4 -2
- package/fesm2022/smallpearl-ngx-helper-mat-entity-list.mjs.map +1 -1
- package/fesm2022/smallpearl-ngx-helper-stationary-with-line-items.mjs +8 -3
- package/fesm2022/smallpearl-ngx-helper-stationary-with-line-items.mjs.map +1 -1
- package/mat-entity-crud/src/mat-entity-crud-internal-types.d.ts +1 -0
- package/mat-entity-crud/src/mat-entity-crud.component.d.ts +35 -1
- package/package.json +15 -15
- package/stationary-with-line-items/src/stationary-with-line-items.component.d.ts +2 -0
package/README.md
CHANGED
|
@@ -1,7 +1,12 @@
|
|
|
1
1
|
# ngx-helper
|
|
2
2
|
|
|
3
|
-
|
|
4
|
-
|
|
3
|
+
`WARNING: THIS LIBRARY IS UNDER ACTIVE DEVELOPMENT. EXPECT BREAKING CHANGES BETWEEN RELEASES. USE IT AT YOUR OWN RISK.`
|
|
4
|
+
|
|
5
|
+
This is a library of angular components and other utility code that are not part of the standard angular/material library. Some components are composite components in that they combile multiple standard material library widgets for a common use case scenario.
|
|
6
|
+
|
|
7
|
+
This is meant to be a private library for my own experiments & consumption. Consequently, documentation is grossly inadequate and unit tests are not extensive. Both are areas that I hope to address, but time is working against me.
|
|
8
|
+
|
|
9
|
+
The best way to start using the components is to refer to code in the included `testapp` application. Each library feature is shown in a separate app page and can be seen by running the app (`ng serve`). The app's layout is driven by the `sp-mat-menu-layout` component which leverages material's sidemenu component to deliver a responsive hierarchical layout mechanism.
|
|
5
10
|
|
|
6
11
|
# Components
|
|
7
12
|
|
|
@@ -12,7 +12,7 @@ export type SPEntityFieldSpec<TEntity extends {
|
|
|
12
12
|
[P in IdKey]: PropertyKey;
|
|
13
13
|
}, IdKey extends string = 'id'> = {
|
|
14
14
|
name: string;
|
|
15
|
-
label?: string
|
|
15
|
+
label?: string | Observable<string>;
|
|
16
16
|
valueOptions?: {
|
|
17
17
|
dateTimeFormat?: SPIntlDateFormat;
|
|
18
18
|
isCurrency?: boolean;
|
|
@@ -50,7 +50,7 @@ export declare class SPEntityField<TEntity extends {
|
|
|
50
50
|
/**
|
|
51
51
|
* @returns the label for the field.
|
|
52
52
|
*/
|
|
53
|
-
label(): string
|
|
53
|
+
label(): string | Observable<string>;
|
|
54
54
|
/**
|
|
55
55
|
* Given an entity, returns the value of the field matching the
|
|
56
56
|
* SPEntityFieldSpec<> in fieldSpec.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"smallpearl-ngx-helper-entity-field.mjs","sources":["../../../../projects/smallpearl/ngx-helper/entity-field/src/entity-field.ts","../../../../projects/smallpearl/ngx-helper/entity-field/src/provider.ts","../../../../projects/smallpearl/ngx-helper/entity-field/smallpearl-ngx-helper-entity-field.ts"],"sourcesContent":["import {\n spFormatCurrency,\n spFormatDate,\n SPIntlDateFormat,\n} from '@smallpearl/ngx-helper/locale';\nimport { SPEntityFieldConfig } from './provider';\nimport { Observable } from 'rxjs';\n\ntype FieldValueTypes = string | number | Date | boolean;\n\n/**\n * This structure defines the data formatting details for a field of the\n * entity. All entity fields need not necessarily be actual entity object's\n * properties. Fields can also be computed fields, in which case the valueFn\n * should be initialized with a valid function to provide the field's value.\n */\nexport type SPEntityFieldSpec<TEntity extends { [P in IdKey]: PropertyKey }, IdKey extends string = 'id'> = {\n // Column name. If valueFn is not specified, this will be used as the\n // key name to retrieve the value for the column from TEntity.\n name: string;\n // If omitted, 'name' will be used as field label.\n label?: string
|
|
1
|
+
{"version":3,"file":"smallpearl-ngx-helper-entity-field.mjs","sources":["../../../../projects/smallpearl/ngx-helper/entity-field/src/entity-field.ts","../../../../projects/smallpearl/ngx-helper/entity-field/src/provider.ts","../../../../projects/smallpearl/ngx-helper/entity-field/smallpearl-ngx-helper-entity-field.ts"],"sourcesContent":["import {\n spFormatCurrency,\n spFormatDate,\n SPIntlDateFormat,\n} from '@smallpearl/ngx-helper/locale';\nimport { SPEntityFieldConfig } from './provider';\nimport { Observable } from 'rxjs';\n\ntype FieldValueTypes = string | number | Date | boolean;\n\n/**\n * This structure defines the data formatting details for a field of the\n * entity. All entity fields need not necessarily be actual entity object's\n * properties. Fields can also be computed fields, in which case the valueFn\n * should be initialized with a valid function to provide the field's value.\n */\nexport type SPEntityFieldSpec<TEntity extends { [P in IdKey]: PropertyKey }, IdKey extends string = 'id'> = {\n // Column name. If valueFn is not specified, this will be used as the\n // key name to retrieve the value for the column from TEntity.\n name: string;\n // If omitted, 'name' will be used as field label.\n label?: string|Observable<string>;\n // Column value specific formatting options. Currently, only used for\n // Date types.\n valueOptions?: {\n // Specify the same format string argument that is passed to DatePipe.\n dateTimeFormat?: SPIntlDateFormat;\n // If boolean, number field will be formatted using spFormatCurrency()\n // using the current currency or 'currency' value below.\n isCurrency?: boolean;\n // Currency code, if different from default locale.\n currency?: string;\n // CSS class name; if provided will be applied to field value's wrapper\n // element. This will be <td> & <th>.\n class?: string;\n // Alignment options. Field's value will be aligned based on this.\n alignment?: 'start'|'center'|'end';\n // A fixed string or a function that returns an array of strings\n // to be used as the routerlink for the column value.\n routerLink?: ((e: TEntity) => string[])|[string];\n };\n // If the column value cannot be derived by simple TEntity[name] lookup,\n // use this function to return a custom computed or formatted value.\n valueFn?: (item: TEntity) => FieldValueTypes | Observable<FieldValueTypes>;\n};\n\n/**\n * A class that represents a SPEntityFieldSpec<>. This is typically used\n * by the library to evaluate a SPEntityFieldSpec<> object.\n */\nexport class SPEntityField<TEntity extends { [P in IdKey]: PropertyKey }, IdKey extends string = 'id'> {\n public _fieldSpec!: SPEntityFieldSpec<TEntity, IdKey>;\n\n constructor(\n spec: SPEntityFieldSpec<TEntity, IdKey> | string,\n public fieldConfig?: SPEntityFieldConfig\n ) {\n if (typeof spec === 'string') {\n this._fieldSpec = {\n name: spec,\n };\n } else {\n this._fieldSpec = spec;\n }\n }\n\n get spec() {\n return this._fieldSpec;\n }\n\n /**\n * Returns the effective fieldValueOptions by merging the global field\n * options (if one has been spefified) with the local field value options.\n * @returns SPEntityFieldSpec<any>['valueOptions']\n */\n get options() {\n let globalFieldValueOptions: SPEntityFieldSpec<any>['valueOptions'] = {};\n if (this.fieldConfig && this.fieldConfig?.fieldValueOptions && this.fieldConfig.fieldValueOptions.has(this._fieldSpec.name)) {\n globalFieldValueOptions = this.fieldConfig.fieldValueOptions.get(this._fieldSpec.name);\n }\n return {\n ...globalFieldValueOptions,\n ...(this._fieldSpec?.valueOptions ?? {})\n };\n }\n /**\n * @returns the label for the field.\n */\n label() {\n return this._fieldSpec.label ?? this._fieldSpec.name\n }\n\n /**\n * Given an entity, returns the value of the field matching the\n * SPEntityFieldSpec<> in fieldSpec.\n * @param entity TEntity instance which will be evaluated for\n * SPEntityFieldSpec<>.\n * @returns\n */\n value(entity: TEntity) {\n let val = undefined;\n if (!this._fieldSpec.valueFn) {\n if (\n this.fieldConfig &&\n this.fieldConfig?.fieldValueFns &&\n this.fieldConfig.fieldValueFns.has(this._fieldSpec.name)\n ) {\n val = this.fieldConfig.fieldValueFns.get(this._fieldSpec.name)!(entity, this._fieldSpec.name);\n } else {\n val = (entity as any)[this._fieldSpec.name];\n }\n } else {\n val = this._fieldSpec.valueFn(entity);\n }\n const valueOptions = this.options;\n if (val instanceof Date) {\n val = spFormatDate(val);\n } else if (\n typeof val === 'number' &&\n valueOptions?.isCurrency\n ) {\n val = spFormatCurrency(val, this._fieldSpec?.valueOptions?.currency);\n } else if (typeof val === 'boolean') {\n val = val ? '✔' : '✖';\n }\n return val;\n }\n\n /**\n * If specified, will be added to the CSS classes of the field's wrapper\n * element.\n */\n get class() {\n return this._fieldSpec?.valueOptions?.class ?? '';\n }\n\n hasRouterLink(entity: TEntity) {\n return !!this._fieldSpec?.valueOptions?.routerLink;\n }\n\n getRouterLink(entity: TEntity) {\n const rl = this._fieldSpec?.valueOptions?.routerLink;\n if (rl) {\n if (typeof rl == 'function') {\n return rl(entity);\n }\n return rl\n }\n return [];\n }\n}\n","import { InjectionToken } from '@angular/core';\nimport { SPEntityFieldSpec } from './entity-field';\n\n\nexport type FIELD_VALUE_FN = (entity: any, fieldName: string) => string|number|Date|boolean;\n\n/**\n * Global config for SPEntityField component.\n */\nexport interface SPEntityFieldConfig {\n /**\n * These are global field value functions.\n *\n * If a value function for a field is not explicitly specified, this map is\n * looked up with the field name. If an entry exists in this table, it will\n * be used to render the field's value.\n *\n * This is useful for formatting certain fields which tend to have the\n * same name across the app. For instance fields such as 'amount', 'total'\n * or 'balance'. Or 'date', 'timestamp', etc.\n */\n fieldValueFns?: Map<string, FIELD_VALUE_FN>;\n /**\n * Similar to above, but allows setting the options for certain fields\n * globally. As in the case of `fieldValueFns`, the per field specification,\n * if one exists, takes precedence over the global setting.\n */\n fieldValueOptions?: Map<string, SPEntityFieldSpec<any>['valueOptions']>;\n}\n\nexport const SP_ENTITY_FIELD_CONFIG = new InjectionToken<SPEntityFieldConfig>(\n 'SPEntityFieldConfig'\n);\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
|
|
@@ -183,27 +183,29 @@ class FormViewHostComponent {
|
|
|
183
183
|
}
|
|
184
184
|
/** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: FormViewHostComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
185
185
|
/** @nocollapse */ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.6", type: FormViewHostComponent, isStandalone: true, selector: "sp-create-edit-entity-host", inputs: { entityCrudComponentBase: { classPropertyName: "entityCrudComponentBase", publicName: "entityCrudComponentBase", isSignal: true, isRequired: true, transformFunction: null }, clientViewTemplate: { classPropertyName: "clientViewTemplate", publicName: "clientViewTemplate", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "vc", first: true, predicate: ["clientFormContainer"], descendants: true, read: ViewContainerRef, isSignal: true }], ngImport: i0, template: `
|
|
186
|
-
<div [class]="'form-wrapper ' + entityCrudComponentBase().
|
|
187
|
-
<div class="
|
|
188
|
-
<div class="
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
186
|
+
<div [class]="'sp-mat-crud-form-wrapper ' + entityCrudComponentBase().getFormPaneWrapperClass()" spHostBusyWheel="formBusyWheel" *transloco="let t">
|
|
187
|
+
<div [class]="'sp-mat-crud-form-content ' + entityCrudComponentBase().getFormPaneContentClass()">
|
|
188
|
+
<div class="create-edit-topbar">
|
|
189
|
+
<div class="title">
|
|
190
|
+
@if (title()) {
|
|
191
|
+
{{ title() | async }}
|
|
192
|
+
} @else {
|
|
193
|
+
{{ t(('spMatEntityCrud.' + (entity() ? 'editItem' : 'newItem')), { item: (this._itemLabel() | async )}) }}
|
|
194
|
+
}
|
|
195
|
+
</div>
|
|
196
|
+
<div class="spacer"></div>
|
|
197
|
+
<div class="close">
|
|
198
|
+
<button mat-icon-button (click)="onClose()">
|
|
199
|
+
<mat-icon>cancel</mat-icon>
|
|
200
|
+
</button>
|
|
201
|
+
</div>
|
|
194
202
|
</div>
|
|
195
|
-
<div class="
|
|
196
|
-
|
|
197
|
-
<button mat-icon-button (click)="onClose()">
|
|
198
|
-
<mat-icon>cancel</mat-icon>
|
|
199
|
-
</button>
|
|
203
|
+
<div class="form-container">
|
|
204
|
+
<ng-container #clientFormContainer></ng-container>
|
|
200
205
|
</div>
|
|
201
206
|
</div>
|
|
202
|
-
<div class="form-container">
|
|
203
|
-
<ng-container #clientFormContainer></ng-container>
|
|
204
|
-
</div>
|
|
205
207
|
</div>
|
|
206
|
-
`, isInline: true, styles: [".form-wrapper{width:100%!important;height:100%!important
|
|
208
|
+
`, isInline: true, styles: [".sp-mat-crud-form-wrapper{width:100%!important;height:100%!important}.sp-mat-crud-form-content{height:100%;width:100%;display:flex;flex-direction:column;padding:.4em}.create-edit-topbar{display:flex;flex-direction:row;align-items:center;min-height:48px;padding:.4em}.form-container{padding-top:.4em;flex-grow:1;overflow:auto}.create-edit-topbar .title{font-size:1.5em;font-weight:500}.create-edit-topbar .spacer{flex-grow:1}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: TranslocoModule }, { kind: "directive", type: i4$1.TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "directive", type: SPMatHostBusyWheelDirective, selector: "[spHostBusyWheel]", inputs: ["spHostBusyWheel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
207
209
|
}
|
|
208
210
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: FormViewHostComponent, decorators: [{
|
|
209
211
|
type: Component,
|
|
@@ -214,27 +216,29 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImpor
|
|
|
214
216
|
TranslocoModule,
|
|
215
217
|
SPMatHostBusyWheelDirective,
|
|
216
218
|
], selector: 'sp-create-edit-entity-host', template: `
|
|
217
|
-
<div [class]="'form-wrapper ' + entityCrudComponentBase().
|
|
218
|
-
<div class="
|
|
219
|
-
<div class="
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
219
|
+
<div [class]="'sp-mat-crud-form-wrapper ' + entityCrudComponentBase().getFormPaneWrapperClass()" spHostBusyWheel="formBusyWheel" *transloco="let t">
|
|
220
|
+
<div [class]="'sp-mat-crud-form-content ' + entityCrudComponentBase().getFormPaneContentClass()">
|
|
221
|
+
<div class="create-edit-topbar">
|
|
222
|
+
<div class="title">
|
|
223
|
+
@if (title()) {
|
|
224
|
+
{{ title() | async }}
|
|
225
|
+
} @else {
|
|
226
|
+
{{ t(('spMatEntityCrud.' + (entity() ? 'editItem' : 'newItem')), { item: (this._itemLabel() | async )}) }}
|
|
227
|
+
}
|
|
228
|
+
</div>
|
|
229
|
+
<div class="spacer"></div>
|
|
230
|
+
<div class="close">
|
|
231
|
+
<button mat-icon-button (click)="onClose()">
|
|
232
|
+
<mat-icon>cancel</mat-icon>
|
|
233
|
+
</button>
|
|
234
|
+
</div>
|
|
225
235
|
</div>
|
|
226
|
-
<div class="
|
|
227
|
-
|
|
228
|
-
<button mat-icon-button (click)="onClose()">
|
|
229
|
-
<mat-icon>cancel</mat-icon>
|
|
230
|
-
</button>
|
|
236
|
+
<div class="form-container">
|
|
237
|
+
<ng-container #clientFormContainer></ng-container>
|
|
231
238
|
</div>
|
|
232
239
|
</div>
|
|
233
|
-
<div class="form-container">
|
|
234
|
-
<ng-container #clientFormContainer></ng-container>
|
|
235
|
-
</div>
|
|
236
240
|
</div>
|
|
237
|
-
`, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".form-wrapper{width:100%!important;height:100%!important
|
|
241
|
+
`, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".sp-mat-crud-form-wrapper{width:100%!important;height:100%!important}.sp-mat-crud-form-content{height:100%;width:100%;display:flex;flex-direction:column;padding:.4em}.create-edit-topbar{display:flex;flex-direction:row;align-items:center;min-height:48px;padding:.4em}.form-container{padding-top:.4em;flex-grow:1;overflow:auto}.create-edit-topbar .title{font-size:1.5em;font-weight:500}.create-edit-topbar .spacer{flex-grow:1}\n"] }]
|
|
238
242
|
}], ctorParameters: () => [] });
|
|
239
243
|
|
|
240
244
|
class PreviewHostComponent {
|
|
@@ -452,12 +456,45 @@ class SPMatEntityCrudComponent extends SPMatEntityListComponent {
|
|
|
452
456
|
listPaneWrapperClass = input('sp-mat-crud-list-pane-wrapper-class');
|
|
453
457
|
/**
|
|
454
458
|
* The class class that will be applied to the preview pane wrapper.
|
|
459
|
+
* Inside this wrapper, another div element with class='previewPaneContentClass()'
|
|
460
|
+
* will be created to host the preview content. The client supplied preview
|
|
461
|
+
* template will be rendered inside this div.
|
|
462
|
+
*
|
|
463
|
+
* +----------------------------------------+
|
|
464
|
+
* | previewPaneWrapperClass |
|
|
465
|
+
* |----------------------------------------|
|
|
466
|
+
* | preview toolbar |
|
|
467
|
+
* |----------------------------------------|
|
|
468
|
+
* | +------------------------------------+ |
|
|
469
|
+
* | | div class=previewPaneContentClass()| |
|
|
470
|
+
* | |------------------------------------| |
|
|
471
|
+
* | | client supplied preview template | |
|
|
472
|
+
* | +------------------------------------+ |
|
|
473
|
+
* +----------------------------------------+
|
|
455
474
|
*/
|
|
456
475
|
previewPaneWrapperClass = input('sp-mat-crud-preview-pane-wrapper-class');
|
|
457
476
|
/**
|
|
458
477
|
* The class class that will be applied to the preview pane content.
|
|
459
478
|
*/
|
|
460
479
|
previewPaneContentClass = input('sp-mat-crud-preview-pane-content-class');
|
|
480
|
+
/**
|
|
481
|
+
* The class class that will be applied to the form pane wrapper. Inside this
|
|
482
|
+
* wrapper, another div element with class='formPaneContentClass()' will be
|
|
483
|
+
* created to host the form content. The client supplied form template will
|
|
484
|
+
* be rendered inside this div.
|
|
485
|
+
*
|
|
486
|
+
* +----------------------------------------+
|
|
487
|
+
* | formPaneWrapperClass |
|
|
488
|
+
* | +------------------------------------+ |
|
|
489
|
+
* | | div class=formPaneContentClass() | |
|
|
490
|
+
* | |------------------------------------| |
|
|
491
|
+
* | | form title + close button | |
|
|
492
|
+
* | |------------------------------------| |
|
|
493
|
+
* | | client supplied form template | |
|
|
494
|
+
* | +------------------------------------+ |
|
|
495
|
+
* +----------------------------------------+
|
|
496
|
+
*/
|
|
497
|
+
formPaneWrapperClass = input('sp-mat-crud-form-pane-wrapper-class');
|
|
461
498
|
/**
|
|
462
499
|
* The CSS class that will be applied to the form pane content.
|
|
463
500
|
*/
|
|
@@ -1004,6 +1041,9 @@ class SPMatEntityCrudComponent extends SPMatEntityListComponent {
|
|
|
1004
1041
|
getPreviewPaneContentClass() {
|
|
1005
1042
|
return this.previewPaneContentClass();
|
|
1006
1043
|
}
|
|
1044
|
+
getFormPaneWrapperClass() {
|
|
1045
|
+
return this.formPaneWrapperClass();
|
|
1046
|
+
}
|
|
1007
1047
|
getFormPaneContentClass() {
|
|
1008
1048
|
return this.formPaneContentClass();
|
|
1009
1049
|
}
|
|
@@ -1051,7 +1091,7 @@ class SPMatEntityCrudComponent extends SPMatEntityListComponent {
|
|
|
1051
1091
|
}
|
|
1052
1092
|
}
|
|
1053
1093
|
/** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: SPMatEntityCrudComponent, deps: [{ token: i1.HttpClient }, { token: i2$1.MatSnackBar }, { token: i3$1.DomSanitizer }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
|
|
1054
|
-
/** @nocollapse */ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.6", type: SPMatEntityCrudComponent, isStandalone: true, selector: "sp-mat-entity-crud", inputs: { itemLabel: { classPropertyName: "itemLabel", publicName: "itemLabel", isSignal: true, isRequired: false, transformFunction: null }, itemLabelPlural: { classPropertyName: "itemLabelPlural", publicName: "itemLabelPlural", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, itemActions: { classPropertyName: "itemActions", publicName: "itemActions", isSignal: true, isRequired: false, transformFunction: null }, newItemLink: { classPropertyName: "newItemLink", publicName: "newItemLink", isSignal: true, isRequired: false, transformFunction: null }, newItemLabel: { classPropertyName: "newItemLabel", publicName: "newItemLabel", isSignal: true, isRequired: false, transformFunction: null }, editItemTitle: { classPropertyName: "editItemTitle", publicName: "editItemTitle", isSignal: true, isRequired: false, transformFunction: null }, newItemSubTypes: { classPropertyName: "newItemSubTypes", publicName: "newItemSubTypes", isSignal: true, isRequired: false, transformFunction: null }, crudOpFn: { classPropertyName: "crudOpFn", publicName: "crudOpFn", isSignal: true, isRequired: false, transformFunction: null }, previewTemplate: { classPropertyName: "previewTemplate", publicName: "previewTemplate", isSignal: true, isRequired: false, transformFunction: null }, allowEntityActionFn: { classPropertyName: "allowEntityActionFn", publicName: "allowEntityActionFn", isSignal: true, isRequired: false, transformFunction: null }, headerTemplate: { classPropertyName: "headerTemplate", publicName: "headerTemplate", isSignal: true, isRequired: false, transformFunction: null }, actionsTemplate: { classPropertyName: "actionsTemplate", publicName: "actionsTemplate", isSignal: true, isRequired: false, transformFunction: null }, crudResponseParser: { classPropertyName: "crudResponseParser", publicName: "crudResponseParser", isSignal: true, isRequired: false, transformFunction: null }, createEditFormTemplate: { classPropertyName: "createEditFormTemplate", publicName: "createEditFormTemplate", isSignal: true, isRequired: false, transformFunction: null }, disableItemActions: { classPropertyName: "disableItemActions", publicName: "disableItemActions", isSignal: true, isRequired: false, transformFunction: null }, disableCreate: { classPropertyName: "disableCreate", publicName: "disableCreate", isSignal: true, isRequired: false, transformFunction: null }, refreshAfterEdit: { classPropertyName: "refreshAfterEdit", publicName: "refreshAfterEdit", isSignal: true, isRequired: false, transformFunction: null }, crudHttpReqContext: { classPropertyName: "crudHttpReqContext", publicName: "crudHttpReqContext", isSignal: true, isRequired: false, transformFunction: null }, editPaneWidth: { classPropertyName: "editPaneWidth", publicName: "editPaneWidth", isSignal: true, isRequired: false, transformFunction: null }, previewPaneWidth: { classPropertyName: "previewPaneWidth", publicName: "previewPaneWidth", isSignal: true, isRequired: false, transformFunction: null }, listPaneWrapperClass: { classPropertyName: "listPaneWrapperClass", publicName: "listPaneWrapperClass", isSignal: true, isRequired: false, transformFunction: null }, previewPaneWrapperClass: { classPropertyName: "previewPaneWrapperClass", publicName: "previewPaneWrapperClass", isSignal: true, isRequired: false, transformFunction: null }, previewPaneContentClass: { classPropertyName: "previewPaneContentClass", publicName: "previewPaneContentClass", isSignal: true, isRequired: false, transformFunction: null }, formPaneContentClass: { classPropertyName: "formPaneContentClass", publicName: "formPaneContentClass", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { action: "action", entityViewPaneActivated: "entityViewPaneActivated" }, providers: [provideTranslocoScope('sp-mat-entity-crud')], queries: [{ propertyName: "_clientColumnDefs", predicate: MatColumnDef }], viewQueries: [{ propertyName: "componentColumns", predicate: MatColumnDef, descendants: true, isSignal: true }, { propertyName: "spEntitiesList", first: true, predicate: ["entitiesList"], descendants: true, isSignal: true }, { propertyName: "createEditHostComponent", first: true, predicate: FormViewHostComponent, descendants: true, isSignal: true }, { propertyName: "previewHostComponent", first: true, predicate: PreviewHostComponent, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: `
|
|
1094
|
+
/** @nocollapse */ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.6", type: SPMatEntityCrudComponent, isStandalone: true, selector: "sp-mat-entity-crud", inputs: { itemLabel: { classPropertyName: "itemLabel", publicName: "itemLabel", isSignal: true, isRequired: false, transformFunction: null }, itemLabelPlural: { classPropertyName: "itemLabelPlural", publicName: "itemLabelPlural", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, itemActions: { classPropertyName: "itemActions", publicName: "itemActions", isSignal: true, isRequired: false, transformFunction: null }, newItemLink: { classPropertyName: "newItemLink", publicName: "newItemLink", isSignal: true, isRequired: false, transformFunction: null }, newItemLabel: { classPropertyName: "newItemLabel", publicName: "newItemLabel", isSignal: true, isRequired: false, transformFunction: null }, editItemTitle: { classPropertyName: "editItemTitle", publicName: "editItemTitle", isSignal: true, isRequired: false, transformFunction: null }, newItemSubTypes: { classPropertyName: "newItemSubTypes", publicName: "newItemSubTypes", isSignal: true, isRequired: false, transformFunction: null }, crudOpFn: { classPropertyName: "crudOpFn", publicName: "crudOpFn", isSignal: true, isRequired: false, transformFunction: null }, previewTemplate: { classPropertyName: "previewTemplate", publicName: "previewTemplate", isSignal: true, isRequired: false, transformFunction: null }, allowEntityActionFn: { classPropertyName: "allowEntityActionFn", publicName: "allowEntityActionFn", isSignal: true, isRequired: false, transformFunction: null }, headerTemplate: { classPropertyName: "headerTemplate", publicName: "headerTemplate", isSignal: true, isRequired: false, transformFunction: null }, actionsTemplate: { classPropertyName: "actionsTemplate", publicName: "actionsTemplate", isSignal: true, isRequired: false, transformFunction: null }, crudResponseParser: { classPropertyName: "crudResponseParser", publicName: "crudResponseParser", isSignal: true, isRequired: false, transformFunction: null }, createEditFormTemplate: { classPropertyName: "createEditFormTemplate", publicName: "createEditFormTemplate", isSignal: true, isRequired: false, transformFunction: null }, disableItemActions: { classPropertyName: "disableItemActions", publicName: "disableItemActions", isSignal: true, isRequired: false, transformFunction: null }, disableCreate: { classPropertyName: "disableCreate", publicName: "disableCreate", isSignal: true, isRequired: false, transformFunction: null }, refreshAfterEdit: { classPropertyName: "refreshAfterEdit", publicName: "refreshAfterEdit", isSignal: true, isRequired: false, transformFunction: null }, crudHttpReqContext: { classPropertyName: "crudHttpReqContext", publicName: "crudHttpReqContext", isSignal: true, isRequired: false, transformFunction: null }, editPaneWidth: { classPropertyName: "editPaneWidth", publicName: "editPaneWidth", isSignal: true, isRequired: false, transformFunction: null }, previewPaneWidth: { classPropertyName: "previewPaneWidth", publicName: "previewPaneWidth", isSignal: true, isRequired: false, transformFunction: null }, listPaneWrapperClass: { classPropertyName: "listPaneWrapperClass", publicName: "listPaneWrapperClass", isSignal: true, isRequired: false, transformFunction: null }, previewPaneWrapperClass: { classPropertyName: "previewPaneWrapperClass", publicName: "previewPaneWrapperClass", isSignal: true, isRequired: false, transformFunction: null }, previewPaneContentClass: { classPropertyName: "previewPaneContentClass", publicName: "previewPaneContentClass", isSignal: true, isRequired: false, transformFunction: null }, formPaneWrapperClass: { classPropertyName: "formPaneWrapperClass", publicName: "formPaneWrapperClass", isSignal: true, isRequired: false, transformFunction: null }, formPaneContentClass: { classPropertyName: "formPaneContentClass", publicName: "formPaneContentClass", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { action: "action", entityViewPaneActivated: "entityViewPaneActivated" }, providers: [provideTranslocoScope('sp-mat-entity-crud')], queries: [{ propertyName: "_clientColumnDefs", predicate: MatColumnDef }], viewQueries: [{ propertyName: "componentColumns", predicate: MatColumnDef, descendants: true, isSignal: true }, { propertyName: "spEntitiesList", first: true, predicate: ["entitiesList"], descendants: true, isSignal: true }, { propertyName: "createEditHostComponent", first: true, predicate: FormViewHostComponent, descendants: true, isSignal: true }, { propertyName: "previewHostComponent", first: true, predicate: PreviewHostComponent, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: `
|
|
1055
1095
|
<as-split direction="horizontal" [gutterSize]="6" *transloco="let t">
|
|
1056
1096
|
<as-split-area
|
|
1057
1097
|
[size]="entitiesPaneWidth()"
|