@smallpearl/ngx-helper 0.31.6 → 0.31.10
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/entity-field/index.d.ts +1 -1
- package/entity-field/src/{entity-field-spec.d.ts → entity-field.d.ts} +4 -1
- package/entity-field/src/provider.d.ts +1 -1
- package/fesm2022/smallpearl-ngx-helper-entity-field.mjs.map +1 -1
- package/fesm2022/smallpearl-ngx-helper-mat-entity-crud.mjs +20 -16
- package/fesm2022/smallpearl-ngx-helper-mat-entity-crud.mjs.map +1 -1
- package/fesm2022/smallpearl-ngx-helper-mat-entity-list.mjs +11 -8
- package/fesm2022/smallpearl-ngx-helper-mat-entity-list.mjs.map +1 -1
- package/mat-entity-list/src/mat-entity-list.component.d.ts +1 -0
- package/package.json +16 -16
package/entity-field/index.d.ts
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export * from './src/entity-field
|
|
1
|
+
export * from './src/entity-field';
|
|
2
2
|
export * from './src/provider';
|
|
@@ -1,5 +1,7 @@
|
|
|
1
1
|
import { SPIntlDateFormat } from '@smallpearl/ngx-helper/locale';
|
|
2
2
|
import { SPEntityFieldConfig } from './provider';
|
|
3
|
+
import { Observable } from 'rxjs';
|
|
4
|
+
type FieldValueTypes = string | number | Date | boolean;
|
|
3
5
|
/**
|
|
4
6
|
* This structure defines the data formatting details for a field of the
|
|
5
7
|
* entity. All entity fields need not necessarily be actual entity object's
|
|
@@ -19,7 +21,7 @@ export type SPEntityFieldSpec<TEntity extends {
|
|
|
19
21
|
alignment?: 'start' | 'center' | 'end';
|
|
20
22
|
routerLink?: ((e: TEntity) => string[]) | [string];
|
|
21
23
|
};
|
|
22
|
-
valueFn?: (item: TEntity) =>
|
|
24
|
+
valueFn?: (item: TEntity) => FieldValueTypes | Observable<FieldValueTypes>;
|
|
23
25
|
};
|
|
24
26
|
/**
|
|
25
27
|
* A class that represents a SPEntityFieldSpec<>. This is typically used
|
|
@@ -65,3 +67,4 @@ export declare class SPEntityField<TEntity extends {
|
|
|
65
67
|
hasRouterLink(entity: TEntity): boolean;
|
|
66
68
|
getRouterLink(entity: TEntity): string[];
|
|
67
69
|
}
|
|
70
|
+
export {};
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { InjectionToken } from '@angular/core';
|
|
2
|
-
import { SPEntityFieldSpec } from './entity-field
|
|
2
|
+
import { SPEntityFieldSpec } from './entity-field';
|
|
3
3
|
export type FIELD_VALUE_FN = (entity: any, fieldName: string) => string | number | Date | boolean;
|
|
4
4
|
/**
|
|
5
5
|
* Global config for SPEntityField component.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"smallpearl-ngx-helper-entity-field.mjs","sources":["../../../../projects/smallpearl/ngx-helper/entity-field/src/entity-field
|
|
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;\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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"}
|
|
@@ -190,7 +190,7 @@ class FormViewHostComponent {
|
|
|
190
190
|
}
|
|
191
191
|
/** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: FormViewHostComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
192
192
|
/** @nocollapse */ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.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 }, itemLabel: { classPropertyName: "itemLabel", publicName: "itemLabel", isSignal: true, isRequired: true, transformFunction: null }, itemLabelPlural: { classPropertyName: "itemLabelPlural", publicName: "itemLabelPlural", isSignal: true, isRequired: true, transformFunction: null } }, viewQueries: [{ propertyName: "vc", first: true, predicate: ["clientFormContainer"], descendants: true, read: ViewContainerRef, isSignal: true }], ngImport: i0, template: `
|
|
193
|
-
<div spHostBusyWheel="formBusyWheel">
|
|
193
|
+
<div class="form-host" spHostBusyWheel="formBusyWheel">
|
|
194
194
|
<div class="create-edit-topbar">
|
|
195
195
|
<div class="title">
|
|
196
196
|
{{ title() }}
|
|
@@ -202,9 +202,11 @@ class FormViewHostComponent {
|
|
|
202
202
|
</button>
|
|
203
203
|
</div>
|
|
204
204
|
</div>
|
|
205
|
-
<
|
|
205
|
+
<div class="form-container">
|
|
206
|
+
<ng-container #clientFormContainer></ng-container>
|
|
207
|
+
</div>
|
|
206
208
|
</div>
|
|
207
|
-
`, isInline: true, styles: [".create-edit-topbar{display:flex;flex-direction:row;align-items:center;min-height:48px}.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: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: SPMatHostBusyWheelDirective, selector: "[spHostBusyWheel]", inputs: ["spHostBusyWheel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
209
|
+
`, isInline: true, styles: [".form-host{width:100%!important;height:100%!important;display:flex;flex-direction:column}.form-container{flex-grow:1;overflow:auto}.create-edit-topbar{display:flex;flex-direction:row;align-items:center;min-height:48px}.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: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: SPMatHostBusyWheelDirective, selector: "[spHostBusyWheel]", inputs: ["spHostBusyWheel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
208
210
|
}
|
|
209
211
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: FormViewHostComponent, decorators: [{
|
|
210
212
|
type: Component,
|
|
@@ -214,7 +216,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImpor
|
|
|
214
216
|
MatIconModule,
|
|
215
217
|
SPMatHostBusyWheelDirective,
|
|
216
218
|
], selector: 'sp-create-edit-entity-host', template: `
|
|
217
|
-
<div spHostBusyWheel="formBusyWheel">
|
|
219
|
+
<div class="form-host" spHostBusyWheel="formBusyWheel">
|
|
218
220
|
<div class="create-edit-topbar">
|
|
219
221
|
<div class="title">
|
|
220
222
|
{{ title() }}
|
|
@@ -226,9 +228,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImpor
|
|
|
226
228
|
</button>
|
|
227
229
|
</div>
|
|
228
230
|
</div>
|
|
229
|
-
<
|
|
231
|
+
<div class="form-container">
|
|
232
|
+
<ng-container #clientFormContainer></ng-container>
|
|
233
|
+
</div>
|
|
230
234
|
</div>
|
|
231
|
-
`, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".create-edit-topbar{display:flex;flex-direction:row;align-items:center;min-height:48px}.create-edit-topbar .title{font-size:1.5em;font-weight:500}.create-edit-topbar .spacer{flex-grow:1}\n"] }]
|
|
235
|
+
`, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".form-host{width:100%!important;height:100%!important;display:flex;flex-direction:column}.form-container{flex-grow:1;overflow:auto}.create-edit-topbar{display:flex;flex-direction:row;align-items:center;min-height:48px}.create-edit-topbar .title{font-size:1.5em;font-weight:500}.create-edit-topbar .spacer{flex-grow:1}\n"] }]
|
|
232
236
|
}], ctorParameters: () => [] });
|
|
233
237
|
|
|
234
238
|
class PreviewHostComponent {
|
|
@@ -1195,17 +1199,17 @@ class SPMatEntityCrudComponent extends SPMatEntityListComponent {
|
|
|
1195
1199
|
</as-split-area>
|
|
1196
1200
|
<as-split-area [size]="entityPaneWidth()" [visible]="entityPaneActive()">
|
|
1197
1201
|
<div
|
|
1198
|
-
[class]="previewPaneWrapperClass()"
|
|
1202
|
+
[class]="'preview-pane-wrapper ' + previewPaneWrapperClass()"
|
|
1199
1203
|
spHostBusyWheel="formBusyWheel"
|
|
1200
1204
|
>
|
|
1201
1205
|
<sp-entity-crud-preview-host
|
|
1202
|
-
[ngClass]="createEditViewActive() ? '
|
|
1206
|
+
[ngClass]="createEditViewActive() ? 'sp-hidden' : 'sp-visible'"
|
|
1203
1207
|
[entityCrudComponentBase]="this"
|
|
1204
1208
|
[clientViewTemplate]="previewTemplate()!"
|
|
1205
1209
|
></sp-entity-crud-preview-host>
|
|
1206
1210
|
<!-- Create/Edit Entity -->
|
|
1207
1211
|
<sp-create-edit-entity-host
|
|
1208
|
-
[ngClass]="createEditViewActive() ? '
|
|
1212
|
+
[ngClass]="createEditViewActive() ? 'sp-visible' : 'sp-hidden'"
|
|
1209
1213
|
itemLabel="{{ _itemLabel() | async }}"
|
|
1210
1214
|
itemLabelPlural="{{ _itemLabelPlural() | async }}"
|
|
1211
1215
|
[entityCrudComponentBase]="this"
|
|
@@ -1214,7 +1218,7 @@ class SPMatEntityCrudComponent extends SPMatEntityListComponent {
|
|
|
1214
1218
|
</div>
|
|
1215
1219
|
</as-split-area>
|
|
1216
1220
|
</as-split>
|
|
1217
|
-
`, isInline: true, styles: [".
|
|
1221
|
+
`, isInline: true, styles: [".sp-hidden{display:none}.sp-visible{display:inherit;height:100%!important;width:100%!important}.preview-pane-wrapper{height:100%!important;width:100%!important}.action-bar{display:flex;flex-direction:row;align-items:center;padding-bottom:.5em}.action-bar-title{font-size:1.5em;font-weight:600}.spacer{flex-grow:1}.action-bar-actions{text-align:end}.active-row{font-weight:700}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i5.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1.MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatTableModule }, { kind: "directive", type: i7.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i7.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i7.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i7.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i7.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "ngmodule", type: MatSortModule }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i8.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i8.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i8.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatSnackBarModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: TranslocoModule }, { kind: "directive", type: i10.TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "ngmodule", type: AngularSplitModule }, { kind: "component", type: i11.SplitComponent, selector: "as-split", inputs: ["gutterSize", "gutterStep", "disabled", "gutterClickDeltaPx", "direction", "dir", "unit", "gutterAriaLabel", "restrictMove", "useTransition", "gutterDblClickDuration"], outputs: ["gutterClick", "gutterDblClick", "dragStart", "dragEnd", "transitionEnd"], exportAs: ["asSplit"] }, { kind: "component", type: i11.SplitAreaComponent, selector: "as-split-area", inputs: ["size", "minSize", "maxSize", "lockSize", "visible"], exportAs: ["asSplitArea"] }, { kind: "component", type: SPMatEntityListComponent, selector: "sp-mat-entity-list", inputs: ["entityName", "entityNamePlural", "endpoint", "entityLoaderFn", "columns", "displayedColumns", "pageSize", "idKey", "pagination", "paginator", "sorter", "disableSort", "infiniteScrollContainer", "infiniteScrollDistance", "infiniteScrollThrottle", "infiniteScrollWindow", "httpReqContext", "deferViewInit"], outputs: ["selectEntity"] }, { kind: "component", type: SPMatContextMenuComponent, selector: "sp-mat-context-menu", inputs: ["menuItems", "label", "menuIconName", "enableHover", "contextData", "hasBackdrop"], outputs: ["selected"] }, { kind: "component", type: FormViewHostComponent, selector: "sp-create-edit-entity-host", inputs: ["entityCrudComponentBase", "clientViewTemplate", "itemLabel", "itemLabelPlural"] }, { kind: "directive", type: SPMatHostBusyWheelDirective, selector: "[spHostBusyWheel]", inputs: ["spHostBusyWheel"] }, { kind: "component", type: PreviewHostComponent, selector: "sp-entity-crud-preview-host", inputs: ["entityCrudComponentBase", "clientViewTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1218
1222
|
}
|
|
1219
1223
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: SPMatEntityCrudComponent, decorators: [{
|
|
1220
1224
|
type: Component,
|
|
@@ -1356,17 +1360,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImpor
|
|
|
1356
1360
|
</as-split-area>
|
|
1357
1361
|
<as-split-area [size]="entityPaneWidth()" [visible]="entityPaneActive()">
|
|
1358
1362
|
<div
|
|
1359
|
-
[class]="previewPaneWrapperClass()"
|
|
1363
|
+
[class]="'preview-pane-wrapper ' + previewPaneWrapperClass()"
|
|
1360
1364
|
spHostBusyWheel="formBusyWheel"
|
|
1361
1365
|
>
|
|
1362
1366
|
<sp-entity-crud-preview-host
|
|
1363
|
-
[ngClass]="createEditViewActive() ? '
|
|
1367
|
+
[ngClass]="createEditViewActive() ? 'sp-hidden' : 'sp-visible'"
|
|
1364
1368
|
[entityCrudComponentBase]="this"
|
|
1365
1369
|
[clientViewTemplate]="previewTemplate()!"
|
|
1366
1370
|
></sp-entity-crud-preview-host>
|
|
1367
1371
|
<!-- Create/Edit Entity -->
|
|
1368
1372
|
<sp-create-edit-entity-host
|
|
1369
|
-
[ngClass]="createEditViewActive() ? '
|
|
1373
|
+
[ngClass]="createEditViewActive() ? 'sp-visible' : 'sp-hidden'"
|
|
1370
1374
|
itemLabel="{{ _itemLabel() | async }}"
|
|
1371
1375
|
itemLabelPlural="{{ _itemLabelPlural() | async }}"
|
|
1372
1376
|
[entityCrudComponentBase]="this"
|
|
@@ -1375,7 +1379,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImpor
|
|
|
1375
1379
|
</div>
|
|
1376
1380
|
</as-split-area>
|
|
1377
1381
|
</as-split>
|
|
1378
|
-
`, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".
|
|
1382
|
+
`, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".sp-hidden{display:none}.sp-visible{display:inherit;height:100%!important;width:100%!important}.preview-pane-wrapper{height:100%!important;width:100%!important}.action-bar{display:flex;flex-direction:row;align-items:center;padding-bottom:.5em}.action-bar-title{font-size:1.5em;font-weight:600}.spacer{flex-grow:1}.action-bar-actions{text-align:end}.active-row{font-weight:700}\n"] }]
|
|
1379
1383
|
}], ctorParameters: () => [{ type: i1$1.HttpClient }, { type: i2$1.MatSnackBar }, { type: i3.DomSanitizer }, { type: i0.Injector }], propDecorators: { _clientColumnDefs: [{
|
|
1380
1384
|
type: ContentChildren,
|
|
1381
1385
|
args: [MatColumnDef]
|
|
@@ -1471,7 +1475,7 @@ class SPMatEntityCrudPreviewPaneComponent {
|
|
|
1471
1475
|
<ng-content select="[previewContent]"></ng-content>
|
|
1472
1476
|
</div>
|
|
1473
1477
|
</div>
|
|
1474
|
-
`, isInline: true, styles: [".preview-wrapper{display:flex;flex-direction:column;height:100
|
|
1478
|
+
`, isInline: true, styles: [".preview-wrapper{display:flex;flex-direction:column;height:100%!important;width:100%!important}.spacer{flex:1 1 auto}.preview-content{flex-grow:1;overflow:scroll}\n"], dependencies: [{ kind: "ngmodule", type: MatToolbarModule }, { kind: "component", type: i1$2.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "directive", type: i1$2.MatToolbarRow, selector: "mat-toolbar-row", exportAs: ["matToolbarRow"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1475
1479
|
}
|
|
1476
1480
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: SPMatEntityCrudPreviewPaneComponent, decorators: [{
|
|
1477
1481
|
type: Component,
|
|
@@ -1516,7 +1520,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImpor
|
|
|
1516
1520
|
<ng-content select="[previewContent]"></ng-content>
|
|
1517
1521
|
</div>
|
|
1518
1522
|
</div>
|
|
1519
|
-
`, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".preview-wrapper{display:flex;flex-direction:column;height:100
|
|
1523
|
+
`, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".preview-wrapper{display:flex;flex-direction:column;height:100%!important;width:100%!important}.spacer{flex:1 1 auto}.preview-content{flex-grow:1;overflow:scroll}\n"] }]
|
|
1520
1524
|
}] });
|
|
1521
1525
|
|
|
1522
1526
|
/**
|