@elderbyte/ngx-starter 19.2.0 → 19.2.2
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/elderbyte-ngx-starter.mjs +79 -82
- package/fesm2022/elderbyte-ngx-starter.mjs.map +1 -1
- package/lib/common/selection/selection-model.d.ts +0 -3
- package/lib/components/data-view/grid/elder-grid/elder-grid.component.d.ts +7 -4
- package/lib/components/data-view/grid/elder-tile/elder-tile.component.d.ts +1 -0
- package/lib/components/data-view/master-detail/elder-master-activation.directive.d.ts +9 -7
- package/lib/components/data-view/master-detail/elder-master-detail.module.d.ts +2 -2
- package/lib/components/data-view/master-detail/{elder-master-detail.component.d.ts → master-detail/elder-master-detail.component.d.ts} +8 -15
- package/package.json +1 -1
- package/src/lib/components/data-view/grid/elder-grid/elder-grid.component.scss +36 -6
- /package/src/lib/components/data-view/master-detail/{elder-master-detail.component.scss → master-detail/elder-master-detail.component.scss} +0 -0
|
@@ -7893,7 +7893,6 @@ class SelectionModel {
|
|
|
7893
7893
|
this.log = LoggerFactory.getLogger(this.constructor.name);
|
|
7894
7894
|
this._selectionMap = new Map();
|
|
7895
7895
|
this._selection = new BehaviorSubject([]);
|
|
7896
|
-
this._selectionSig = toSignal(this._selection);
|
|
7897
7896
|
this._multiple = multiple;
|
|
7898
7897
|
this._keyGetterFn = keyGetter;
|
|
7899
7898
|
this._selectableEvaluatorFn = selectableEvaluatorFn;
|
|
@@ -7913,9 +7912,6 @@ class SelectionModel {
|
|
|
7913
7912
|
get selection() {
|
|
7914
7913
|
return this._selection.asObservable();
|
|
7915
7914
|
}
|
|
7916
|
-
get selectionSig() {
|
|
7917
|
-
return this._selectionSig;
|
|
7918
|
-
}
|
|
7919
7915
|
get selectionSnapshot() {
|
|
7920
7916
|
return this._selection.getValue();
|
|
7921
7917
|
}
|
|
@@ -18893,6 +18889,7 @@ class ElderTileComponent {
|
|
|
18893
18889
|
this.value = input.required();
|
|
18894
18890
|
this.selectionEnabled = input(false, { transform: booleanTransformFn });
|
|
18895
18891
|
this.selectionModel = input(undefined);
|
|
18892
|
+
this.selection = toSignal(toObservable(this.selectionModel).pipe(switchMap((model) => model.selection)));
|
|
18896
18893
|
this.interactionMode = input('open');
|
|
18897
18894
|
this.outlined = input(false, { transform: booleanTransformFn });
|
|
18898
18895
|
this.logger = LoggerFactory.getLogger(this.constructor.name);
|
|
@@ -19007,11 +19004,11 @@ class ElderTileComponent {
|
|
|
19007
19004
|
}
|
|
19008
19005
|
}
|
|
19009
19006
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: ElderTileComponent, deps: [{ token: ActivationModel, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
19010
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.0", type: ElderTileComponent, isStandalone: true, selector: "elder-tile", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, selectionEnabled: { classPropertyName: "selectionEnabled", publicName: "selectionEnabled", isSignal: true, isRequired: false, transformFunction: null }, selectionModel: { classPropertyName: "selectionModel", publicName: "selectionModel", isSignal: true, isRequired: false, transformFunction: null }, interactionMode: { classPropertyName: "interactionMode", publicName: "interactionMode", isSignal: true, isRequired: false, transformFunction: null }, outlined: { classPropertyName: "outlined", publicName: "outlined", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "focus": "onFocus($event)", "blur": "onBlur($event)", "click": "onClick($event)" } }, viewQueries: [{ propertyName: "elderTileRef", first: true, predicate: ["elderTile"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\n #elderTile\n class=\"elder-tile full\"\n [class.outlined]=\"outlined()\"\n [class.activated]=\"activated()\"\n [tabindex]=\"focusable ? -1 : undefined\"\n>\n <div class=\"elder-tile-content\">\n <ng-content></ng-content>\n <!-- Overlay (Selection) -->\n\n <div class=\"elder-tile-overlay elder-click-through\"></div>\n\n @if (selectionEnabled()) {\n @if (
|
|
19007
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.0", type: ElderTileComponent, isStandalone: true, selector: "elder-tile", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, selectionEnabled: { classPropertyName: "selectionEnabled", publicName: "selectionEnabled", isSignal: true, isRequired: false, transformFunction: null }, selectionModel: { classPropertyName: "selectionModel", publicName: "selectionModel", isSignal: true, isRequired: false, transformFunction: null }, interactionMode: { classPropertyName: "interactionMode", publicName: "interactionMode", isSignal: true, isRequired: false, transformFunction: null }, outlined: { classPropertyName: "outlined", publicName: "outlined", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "focus": "onFocus($event)", "blur": "onBlur($event)", "click": "onClick($event)" } }, viewQueries: [{ propertyName: "elderTileRef", first: true, predicate: ["elderTile"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\n #elderTile\n class=\"elder-tile full\"\n [class.outlined]=\"outlined()\"\n [class.activated]=\"activated()\"\n [tabindex]=\"focusable ? -1 : undefined\"\n>\n <div class=\"elder-tile-content\">\n <ng-content></ng-content>\n <!-- Overlay (Selection) -->\n\n <div class=\"elder-tile-overlay elder-click-through\"></div>\n\n @if (selectionEnabled()) {\n @if (selection(); as selection) {\n <div\n class=\"elder-selection-overlay elder-click-through\"\n [class.elder-selection-overlay-hidden]=\"!inSelectionMode(selection)\"\n [class.elder-selection-overlay-visible]=\"inSelectionMode(selection)\"\n >\n <button\n mat-icon-button\n type=\"button\"\n (click)=\"selectionModel().toggle(value())\"\n elderStopEventPropagation\n class=\"elder-tile-check\"\n >\n @let isSelected = selectionModel().isSelected(value());\n <mat-icon [class.elder-selected]=\"isSelected\">\n {{ isSelected ? 'check_circle' : 'radio_button_unchecked' }}\n </mat-icon>\n </button>\n </div>\n }\n }\n </div>\n</div>\n", styles: [".elder-tile{border-radius:var(--elder-pane-border-radius);background-color:var(--md-sys-color-surface-container-low);text-align:left;overflow:hidden;transition:box-shadow .2s cubic-bezier(0,0,.2,1),border .25s linear}.elder-tile:hover{border-color:var(--md-sys-color-primary)}.elder-tile-content{position:relative;width:100%;height:100%;border-radius:var(--elder-pane-border-radius)}.elder-tile-content:hover .elder-tile-overlay{opacity:1;background-color:#ffffff14}.elder-tile:active{z-index:100;box-shadow:var(--elder-box-shadow-default)}.elder-selection-overlay{position:absolute;inset:0;transition:background-color .1s ease-in,opacity .1s ease-in}.elder-tile-overlay{position:absolute;inset:0}.elder-selection-overlay-visible{opacity:1;tab-index:0}.elder-selection-overlay-hidden{opacity:0;tab-index:-1}.elder-click-through{pointer-events:none}.elder-tile-check{pointer-events:auto}.elder-tile-check mat-icon{color:var(--md-sys-color-outline-variant);background-color:var(--md-sys-color-surface);border-radius:12px}.elder-tile-check mat-icon.elder-selected{color:var(--md-sys-color-tertiary)}.elder-tile-check:hover mat-icon{color:var(--md-sys-color-primary)}.elder-tile:focus{outline:2px solid var(--elder-color-highlight-focus)}.elder-tile.activated:focus{outline:2px solid var(--elder-color-highlight-focus)}.elder-tile.activated{outline:2px dashed var(--elder-color-highlight-focus)}\n"], dependencies: [{ kind: "directive", type: ElderStopEventPropagationDirective, selector: "[elderStopEventPropagation]" }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
19011
19008
|
}
|
|
19012
19009
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: ElderTileComponent, decorators: [{
|
|
19013
19010
|
type: Component,
|
|
19014
|
-
args: [{ selector: 'elder-tile', imports: [ElderStopEventPropagationDirective, MatIcon, MatIconButton], changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, template: "<div\n #elderTile\n class=\"elder-tile full\"\n [class.outlined]=\"outlined()\"\n [class.activated]=\"activated()\"\n [tabindex]=\"focusable ? -1 : undefined\"\n>\n <div class=\"elder-tile-content\">\n <ng-content></ng-content>\n <!-- Overlay (Selection) -->\n\n <div class=\"elder-tile-overlay elder-click-through\"></div>\n\n @if (selectionEnabled()) {\n @if (
|
|
19011
|
+
args: [{ selector: 'elder-tile', imports: [ElderStopEventPropagationDirective, MatIcon, MatIconButton], changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, template: "<div\n #elderTile\n class=\"elder-tile full\"\n [class.outlined]=\"outlined()\"\n [class.activated]=\"activated()\"\n [tabindex]=\"focusable ? -1 : undefined\"\n>\n <div class=\"elder-tile-content\">\n <ng-content></ng-content>\n <!-- Overlay (Selection) -->\n\n <div class=\"elder-tile-overlay elder-click-through\"></div>\n\n @if (selectionEnabled()) {\n @if (selection(); as selection) {\n <div\n class=\"elder-selection-overlay elder-click-through\"\n [class.elder-selection-overlay-hidden]=\"!inSelectionMode(selection)\"\n [class.elder-selection-overlay-visible]=\"inSelectionMode(selection)\"\n >\n <button\n mat-icon-button\n type=\"button\"\n (click)=\"selectionModel().toggle(value())\"\n elderStopEventPropagation\n class=\"elder-tile-check\"\n >\n @let isSelected = selectionModel().isSelected(value());\n <mat-icon [class.elder-selected]=\"isSelected\">\n {{ isSelected ? 'check_circle' : 'radio_button_unchecked' }}\n </mat-icon>\n </button>\n </div>\n }\n }\n </div>\n</div>\n", styles: [".elder-tile{border-radius:var(--elder-pane-border-radius);background-color:var(--md-sys-color-surface-container-low);text-align:left;overflow:hidden;transition:box-shadow .2s cubic-bezier(0,0,.2,1),border .25s linear}.elder-tile:hover{border-color:var(--md-sys-color-primary)}.elder-tile-content{position:relative;width:100%;height:100%;border-radius:var(--elder-pane-border-radius)}.elder-tile-content:hover .elder-tile-overlay{opacity:1;background-color:#ffffff14}.elder-tile:active{z-index:100;box-shadow:var(--elder-box-shadow-default)}.elder-selection-overlay{position:absolute;inset:0;transition:background-color .1s ease-in,opacity .1s ease-in}.elder-tile-overlay{position:absolute;inset:0}.elder-selection-overlay-visible{opacity:1;tab-index:0}.elder-selection-overlay-hidden{opacity:0;tab-index:-1}.elder-click-through{pointer-events:none}.elder-tile-check{pointer-events:auto}.elder-tile-check mat-icon{color:var(--md-sys-color-outline-variant);background-color:var(--md-sys-color-surface);border-radius:12px}.elder-tile-check mat-icon.elder-selected{color:var(--md-sys-color-tertiary)}.elder-tile-check:hover mat-icon{color:var(--md-sys-color-primary)}.elder-tile:focus{outline:2px solid var(--elder-color-highlight-focus)}.elder-tile.activated:focus{outline:2px solid var(--elder-color-highlight-focus)}.elder-tile.activated{outline:2px dashed var(--elder-color-highlight-focus)}\n"] }]
|
|
19015
19012
|
}], ctorParameters: () => [{ type: ActivationModel, decorators: [{
|
|
19016
19013
|
type: Optional
|
|
19017
19014
|
}] }], propDecorators: { onFocus: [{
|
|
@@ -19082,7 +19079,7 @@ class ElderGridComponent extends ElderDataViewBaseComponent {
|
|
|
19082
19079
|
* *
|
|
19083
19080
|
**************************************************************************/
|
|
19084
19081
|
this.log = LoggerFactory.getLogger(this.constructor.name);
|
|
19085
|
-
this.
|
|
19082
|
+
this._staticColumnCount$ = new BehaviorSubject(4);
|
|
19086
19083
|
this.sizeToColumns = new Map([
|
|
19087
19084
|
[Breakpoints.XSmall, 1],
|
|
19088
19085
|
[Breakpoints.Small, 2],
|
|
@@ -19100,13 +19097,25 @@ class ElderGridComponent extends ElderDataViewBaseComponent {
|
|
|
19100
19097
|
this.footerVisible = true;
|
|
19101
19098
|
this.itemHeight = 250;
|
|
19102
19099
|
this.tileOutlined = input(false, { transform: booleanTransformFn });
|
|
19103
|
-
this.responsiveColumnCount = true;
|
|
19100
|
+
this.responsiveColumnCount = input(true, { transform: booleanTransformFn });
|
|
19104
19101
|
this.tiles = viewChildren(ElderTileComponent);
|
|
19105
19102
|
this.availableCompositeSorts = [];
|
|
19106
19103
|
this.sortTranslationPrefix = 'documents.sorts.';
|
|
19107
19104
|
this.hiddenField = null;
|
|
19108
19105
|
this.selectionVisible = true;
|
|
19109
19106
|
this.pageSizeOptions = [30, 50, 100, 150, 200];
|
|
19107
|
+
this.rowClass = computed(() => {
|
|
19108
|
+
return 'cols-' + this.activeColumnCount();
|
|
19109
|
+
});
|
|
19110
|
+
this.activeColumnCount$ = toObservable(this.responsiveColumnCount).pipe(switchMap$1((responsive) => {
|
|
19111
|
+
if (responsive) {
|
|
19112
|
+
return this.responsiveColumn();
|
|
19113
|
+
}
|
|
19114
|
+
else {
|
|
19115
|
+
return this._staticColumnCount$;
|
|
19116
|
+
}
|
|
19117
|
+
}), share());
|
|
19118
|
+
this.activeColumnCount = toSignal(this.activeColumnCount$);
|
|
19110
19119
|
}
|
|
19111
19120
|
/***************************************************************************
|
|
19112
19121
|
* *
|
|
@@ -19115,11 +19124,10 @@ class ElderGridComponent extends ElderDataViewBaseComponent {
|
|
|
19115
19124
|
**************************************************************************/
|
|
19116
19125
|
ngOnInit() {
|
|
19117
19126
|
super.ngOnInit();
|
|
19118
|
-
const columnCount$ = this.responsiveColumnCount ? this.responsiveColumn() : this._columnCount;
|
|
19119
19127
|
this.dataRows$ = combineLatest([
|
|
19120
19128
|
this.dataContext$.pipe(filter((dc) => !!dc), switchMap$1((dc) => dc.data)),
|
|
19121
|
-
|
|
19122
|
-
]).pipe(debounceTime(50), map(([data,
|
|
19129
|
+
this.activeColumnCount$,
|
|
19130
|
+
]).pipe(debounceTime(50), map(([data, activeColumnCount]) => this.buildGridRow(data, activeColumnCount)));
|
|
19123
19131
|
}
|
|
19124
19132
|
ngAfterViewInit() {
|
|
19125
19133
|
MatTableDataContextBindingBuilder.start(this.dataContext$)
|
|
@@ -19150,10 +19158,10 @@ class ElderGridComponent extends ElderDataViewBaseComponent {
|
|
|
19150
19158
|
return this.dataContinuable;
|
|
19151
19159
|
}
|
|
19152
19160
|
set columnCount(count) {
|
|
19153
|
-
this.
|
|
19161
|
+
this._staticColumnCount$.next(count);
|
|
19154
19162
|
}
|
|
19155
19163
|
get columnCount() {
|
|
19156
|
-
return this.
|
|
19164
|
+
return this._staticColumnCount$.getValue();
|
|
19157
19165
|
}
|
|
19158
19166
|
/***************************************************************************
|
|
19159
19167
|
* *
|
|
@@ -19229,9 +19237,9 @@ class ElderGridComponent extends ElderDataViewBaseComponent {
|
|
|
19229
19237
|
}
|
|
19230
19238
|
}
|
|
19231
19239
|
return this.sizeToColumns.get(activeSize);
|
|
19232
|
-
}), debounceTime(100), startWith(this.
|
|
19240
|
+
}), debounceTime(100), startWith(this.initialColumnCount()));
|
|
19233
19241
|
}
|
|
19234
|
-
|
|
19242
|
+
initialColumnCount() {
|
|
19235
19243
|
let columnCount = 1;
|
|
19236
19244
|
this.sizeToColumns.forEach((cols, mqAlias) => {
|
|
19237
19245
|
if (this.breakpointObserver.isMatched(mqAlias)) {
|
|
@@ -19245,12 +19253,12 @@ class ElderGridComponent extends ElderDataViewBaseComponent {
|
|
|
19245
19253
|
return tiles.find((tile) => tile.value() === item);
|
|
19246
19254
|
}
|
|
19247
19255
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: ElderGridComponent, deps: [{ token: SelectionModel, optional: true }, { token: ElderDataViewOptionsProvider, optional: true, skipSelf: true }, { token: i3.BreakpointObserver }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
19248
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.0", type: ElderGridComponent, isStandalone: true, selector: "elder-grid", inputs: { toolbarVisible: { classPropertyName: "toolbarVisible", publicName: "toolbarVisible", isSignal: false, isRequired: false, transformFunction: null }, footerVisible: { classPropertyName: "footerVisible", publicName: "footerVisible", isSignal: false, isRequired: false, transformFunction: null }, itemHeight: { classPropertyName: "itemHeight", publicName: "itemHeight", isSignal: false, isRequired: false, transformFunction: null }, tileOutlined: { classPropertyName: "tileOutlined", publicName: "tileOutlined", isSignal: true, isRequired: false, transformFunction: null }, responsiveColumnCount: { classPropertyName: "responsiveColumnCount", publicName: "responsiveColumnCount", isSignal:
|
|
19256
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.0", type: ElderGridComponent, isStandalone: true, selector: "elder-grid", inputs: { toolbarVisible: { classPropertyName: "toolbarVisible", publicName: "toolbarVisible", isSignal: false, isRequired: false, transformFunction: null }, footerVisible: { classPropertyName: "footerVisible", publicName: "footerVisible", isSignal: false, isRequired: false, transformFunction: null }, itemHeight: { classPropertyName: "itemHeight", publicName: "itemHeight", isSignal: false, isRequired: false, transformFunction: null }, tileOutlined: { classPropertyName: "tileOutlined", publicName: "tileOutlined", isSignal: true, isRequired: false, transformFunction: null }, responsiveColumnCount: { classPropertyName: "responsiveColumnCount", publicName: "responsiveColumnCount", isSignal: true, isRequired: false, transformFunction: null }, availableSorts: { classPropertyName: "availableSorts", publicName: "availableSorts", isSignal: false, isRequired: false, transformFunction: null }, sortTranslationPrefix: { classPropertyName: "sortTranslationPrefix", publicName: "sortTranslationPrefix", isSignal: false, isRequired: false, transformFunction: null }, hiddenField: { classPropertyName: "hiddenField", publicName: "hiddenField", isSignal: false, isRequired: false, transformFunction: null }, selectionVisible: { classPropertyName: "selectionVisible", publicName: "selectionVisible", isSignal: false, isRequired: false, transformFunction: null }, pageSizeOptions: { classPropertyName: "pageSizeOptions", publicName: "pageSizeOptions", isSignal: false, isRequired: false, transformFunction: null }, tileTemplate: { classPropertyName: "tileTemplate", publicName: "tileTemplate", isSignal: false, isRequired: false, transformFunction: null }, toolbarTemplate: { classPropertyName: "toolbarTemplate", publicName: "toolbarTemplate", isSignal: false, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: false, isRequired: false, transformFunction: null }, columnCount: { classPropertyName: "columnCount", publicName: "columnCount", isSignal: false, isRequired: false, transformFunction: null } }, providers: [
|
|
19249
19257
|
{
|
|
19250
19258
|
provide: ELDER_DATA_VIEW,
|
|
19251
19259
|
useExisting: forwardRef(() => ElderGridComponent),
|
|
19252
19260
|
},
|
|
19253
|
-
], queries: [{ propertyName: "tileTemplateQuery", first: true, predicate: ElderGridTileDirective, descendants: true, read: TemplateRef, static: true }, { propertyName: "toolbarTemplateQuery", first: true, predicate: ElderGridToolbarDirective, descendants: true, read: TemplateRef, static: true }], viewQueries: [{ propertyName: "tiles", predicate: ElderTileComponent, descendants: true, isSignal: true }, { propertyName: "virtualScrollViewPort", first: true, predicate: ["virtualScrollViewPort"], descendants: true, static: true }, { propertyName: "matPaginator", first: true, predicate: MatPaginator, descendants: true }], usesInheritance: true, ngImport: i0, template: "<!-- eslint-disable @angular-eslint/template/interactive-supports-focus -->\n<!-- eslint-disable @angular-eslint/template/click-events-have-key-events -->\n<div class=\"full elder-grid-component\">\n @if (dc(); as dc) {\n <!-- Grid Browser -->\n <div\n class=\"layout-col full elder-grid-container\"\n [elderDataContextSelection]=\"dc\"\n #dataSelection=\"elderDataContextSelection\"\n [elderDataContextSelectionModel]=\"selectionModel\"\n >\n <!-- Toolbar Row -->\n @if (toolbarVisible) {\n <div class=\"layout-row place-start-center flex-none elder-grid-toolbar\">\n @if (selectionVisible) {\n <div class=\"layout-col flex-none px-sm\">\n <elder-selection-master-checkbox class=\"flex-none\"></elder-selection-master-checkbox>\n </div>\n }\n\n <!-- Toolbar -->\n @if (toolbarTemplate) {\n <ng-template\n *ngTemplateOutlet=\"toolbarTemplate; context: { $implicit: this }\"\n ></ng-template>\n }\n\n @if (availableCompositeSorts && availableCompositeSorts.length > 0) {\n <elder-composite-sort\n class=\"flex-none\"\n [availableSorts]=\"availableCompositeSorts\"\n [translationPrefix]=\"sortTranslationPrefix\"\n [elderCompositeSortDc]=\"dc\"\n >\n </elder-composite-sort>\n }\n </div>\n\n <mat-divider></mat-divider>\n }\n\n <elder-data-context-state-indicator class=\"flex-none\" [dataContext]=\"dc\">\n </elder-data-context-state-indicator>\n\n <!-- [cdkDropListSortingDisabled]=\"true\" -->\n <!-- cdkDropList -->\n <cdk-virtual-scroll-viewport\n class=\"layout-col flex elder-grid-browser\"\n id=\"{{ scrollContainerId }}\"\n [itemSize]=\"itemHeight\"\n [minBufferPx]=\"itemHeight * 2\"\n [maxBufferPx]=\"itemHeight * 3\"\n #virtualScrollViewPort\n elderInfiniteScroll\n [eventThrottle]=\"200\"\n [offsetFactor]=\"2\"\n [ignoreScrollEvent]=\"dcStatus()?.loading\"\n [containerId]=\"scrollContainerId\"\n [listenToHost]=\"false\"\n (closeToEnd)=\"requestMoreDataZoned($event)\"\n >\n <!-- (scrolling)=\"onScrolling($event)\" -->\n\n <div\n *cdkVirtualFor=\"\n let gridRow of dataRows$;\n trackBy: TrackGridRowByIdFn;\n templateCacheSize: 50\n \"\n class=\"elder-grid-tile-row\"\n [style.height]=\"itemHeight + 'px'\"\n >\n @for (tile of gridRow.cells; track getId(tile)) {\n <!-- Tile Cell -->\n @if (isTileVisible(tile)) {\n <elder-tile\n class=\"elder-grid-tile\"\n [value]=\"tile\"\n [selectionEnabled]=\"selectionVisible\"\n [selectionModel]=\"selectionModel\"\n [outlined]=\"tileOutlined()\"\n (click)=\"onItemClick(tile)\"\n (dblclick)=\"onItemDoubleClick(tile)\"\n >\n <ng-container\n *ngTemplateOutlet=\"\n tileTemplate || simpleTileTemplate;\n context: { $implicit: tile }\n \"\n ></ng-container>\n </elder-tile>\n } @else {\n <div class=\"elder-grid-tile-hidden\"></div>\n }\n }\n </div>\n </cdk-virtual-scroll-viewport>\n\n <mat-progress-bar\n class=\"flex-none\"\n [mode]=\"dcStatus()?.loading ? 'indeterminate' : 'determinate'\"\n [color]=\"dcStatus()?.hasError ? 'warn' : 'primary'\"\n >\n </mat-progress-bar>\n\n <!-- Footer -->\n @if (footerVisible) {\n <div class=\"layout-row place-end-center gap-md flex-none elder-grid-footer\">\n <!-- Continuable -->\n @if (isContinuable) {\n <span class=\"mat-caption noselect\" style=\"color: var(--md-sys-color-outline)\">\n {{ viewData()?.length }} / {{ total() }}\n </span>\n\n <button\n mat-icon-button\n type=\"button\"\n color=\"primary\"\n [disabled]=\"!canLoadMore()\"\n (click)=\"dataSnapshot.loadMore()\"\n >\n <mat-icon>keyboard_arrow_down</mat-icon>\n </button>\n }\n\n <!-- Paged -->\n @if (isActivePaged) {\n @if (currentPage(); as page) {\n <mat-paginator\n class=\"flex-none\"\n [length]=\"total()\"\n [pageIndex]=\"page?.index\"\n [pageSize]=\"page?.size\"\n [pageSizeOptions]=\"pageSizeOptions\"\n >\n </mat-paginator>\n }\n }\n\n <!-- Local Source -->\n @if (!isActivePaged && !isContinuable) {\n <span class=\"mat-caption noselect pr-md\" style=\"color: var(--md-sys-color-outline)\">\n {{ viewData()?.length }}\n </span>\n }\n </div>\n }\n </div>\n }\n</div>\n\n<ng-template #simpleTileTemplate let-tile>\n @if (tile) {\n <div class=\"layout-col place-center-center flex\" style=\"background-color: lightblue\">\n <p class=\"noselect\">Tile: {{ tile }}</p>\n </div>\n }\n</ng-template>\n", styles: [".elder-grid-tile{
|
|
19261
|
+
], queries: [{ propertyName: "tileTemplateQuery", first: true, predicate: ElderGridTileDirective, descendants: true, read: TemplateRef, static: true }, { propertyName: "toolbarTemplateQuery", first: true, predicate: ElderGridToolbarDirective, descendants: true, read: TemplateRef, static: true }], viewQueries: [{ propertyName: "tiles", predicate: ElderTileComponent, descendants: true, isSignal: true }, { propertyName: "virtualScrollViewPort", first: true, predicate: ["virtualScrollViewPort"], descendants: true, static: true }, { propertyName: "matPaginator", first: true, predicate: MatPaginator, descendants: true }], usesInheritance: true, ngImport: i0, template: "<!-- eslint-disable @angular-eslint/template/interactive-supports-focus -->\n<!-- eslint-disable @angular-eslint/template/click-events-have-key-events -->\n<div class=\"full elder-grid-component\">\n @if (dc(); as dc) {\n <!-- Grid Browser -->\n <div\n class=\"layout-col full elder-grid-container\"\n [elderDataContextSelection]=\"dc\"\n #dataSelection=\"elderDataContextSelection\"\n [elderDataContextSelectionModel]=\"selectionModel\"\n >\n <!-- Toolbar Row -->\n @if (toolbarVisible) {\n <div class=\"layout-row place-start-center flex-none elder-grid-toolbar\">\n @if (selectionVisible) {\n <div class=\"layout-col flex-none px-sm\">\n <elder-selection-master-checkbox class=\"flex-none\"></elder-selection-master-checkbox>\n </div>\n }\n\n <!-- Toolbar -->\n @if (toolbarTemplate) {\n <ng-template\n *ngTemplateOutlet=\"toolbarTemplate; context: { $implicit: this }\"\n ></ng-template>\n }\n\n @if (availableCompositeSorts && availableCompositeSorts.length > 0) {\n <elder-composite-sort\n class=\"flex-none\"\n [availableSorts]=\"availableCompositeSorts\"\n [translationPrefix]=\"sortTranslationPrefix\"\n [elderCompositeSortDc]=\"dc\"\n >\n </elder-composite-sort>\n }\n </div>\n\n <mat-divider></mat-divider>\n }\n\n <elder-data-context-state-indicator class=\"flex-none\" [dataContext]=\"dc\">\n </elder-data-context-state-indicator>\n\n <!-- [cdkDropListSortingDisabled]=\"true\" -->\n <!-- cdkDropList -->\n <cdk-virtual-scroll-viewport\n class=\"layout-col flex elder-grid-browser\"\n id=\"{{ scrollContainerId }}\"\n [itemSize]=\"itemHeight\"\n [minBufferPx]=\"itemHeight * 2\"\n [maxBufferPx]=\"itemHeight * 3\"\n #virtualScrollViewPort\n elderInfiniteScroll\n [eventThrottle]=\"200\"\n [offsetFactor]=\"2\"\n [ignoreScrollEvent]=\"dcStatus()?.loading\"\n [containerId]=\"scrollContainerId\"\n [listenToHost]=\"false\"\n (closeToEnd)=\"requestMoreDataZoned($event)\"\n >\n <!-- (scrolling)=\"onScrolling($event)\" -->\n\n <div\n *cdkVirtualFor=\"\n let gridRow of dataRows$;\n trackBy: TrackGridRowByIdFn;\n templateCacheSize: 50\n \"\n class=\"elder-grid-tile-row\"\n [style.height]=\"itemHeight + 'px'\"\n [ngClass]=\"rowClass()\"\n >\n @for (tile of gridRow.cells; track getId(tile)) {\n <!-- Tile Cell -->\n @if (isTileVisible(tile)) {\n <elder-tile\n class=\"elder-grid-tile\"\n [value]=\"tile\"\n [selectionEnabled]=\"selectionVisible\"\n [selectionModel]=\"selectionModel\"\n [outlined]=\"tileOutlined()\"\n (click)=\"onItemClick(tile)\"\n (dblclick)=\"onItemDoubleClick(tile)\"\n >\n <ng-container\n *ngTemplateOutlet=\"\n tileTemplate || simpleTileTemplate;\n context: { $implicit: tile }\n \"\n ></ng-container>\n </elder-tile>\n } @else {\n <div class=\"elder-grid-tile-hidden\"></div>\n }\n }\n </div>\n </cdk-virtual-scroll-viewport>\n\n <mat-progress-bar\n class=\"flex-none\"\n [mode]=\"dcStatus()?.loading ? 'indeterminate' : 'determinate'\"\n [color]=\"dcStatus()?.hasError ? 'warn' : 'primary'\"\n >\n </mat-progress-bar>\n\n <!-- Footer -->\n @if (footerVisible) {\n <div class=\"layout-row place-end-center gap-md flex-none elder-grid-footer\">\n <!-- Continuable -->\n @if (isContinuable) {\n <span class=\"mat-caption noselect\" style=\"color: var(--md-sys-color-outline)\">\n {{ viewData()?.length }} / {{ total() }}\n </span>\n\n <button\n mat-icon-button\n type=\"button\"\n color=\"primary\"\n [disabled]=\"!canLoadMore()\"\n (click)=\"dataSnapshot.loadMore()\"\n >\n <mat-icon>keyboard_arrow_down</mat-icon>\n </button>\n }\n\n <!-- Paged -->\n @if (isActivePaged) {\n @if (currentPage(); as page) {\n <mat-paginator\n class=\"flex-none\"\n [length]=\"total()\"\n [pageIndex]=\"page?.index\"\n [pageSize]=\"page?.size\"\n [pageSizeOptions]=\"pageSizeOptions\"\n >\n </mat-paginator>\n }\n }\n\n <!-- Local Source -->\n @if (!isActivePaged && !isContinuable) {\n <span class=\"mat-caption noselect pr-md\" style=\"color: var(--md-sys-color-outline)\">\n {{ viewData()?.length }}\n </span>\n }\n </div>\n }\n </div>\n }\n</div>\n\n<ng-template #simpleTileTemplate let-tile>\n @if (tile) {\n <div class=\"layout-col place-center-center flex\" style=\"background-color: lightblue\">\n <p class=\"noselect\">Tile: {{ tile }}</p>\n </div>\n }\n</ng-template>\n", styles: [".elder-grid-tile{width:100%;height:100%;cursor:pointer}.elder-grid-tile-row{display:grid;align-items:start;justify-items:start;padding:8px 16px;column-gap:16px}.elder-grid-tile-row:first-child{padding-top:16px}.elder-grid-tile-row.cols-1{grid-template-columns:repeat(1,1fr)}.elder-grid-tile-row.cols-2{grid-template-columns:repeat(2,1fr)}.elder-grid-tile-row.cols-3{grid-template-columns:repeat(3,1fr)}.elder-grid-tile-row.cols-4{grid-template-columns:repeat(4,1fr)}.elder-grid-tile-row.cols-5{grid-template-columns:repeat(5,1fr)}.elder-grid-tile-row.cols-6{grid-template-columns:repeat(6,1fr)}.elder-grid-tile-row.cols-7{grid-template-columns:repeat(7,1fr)}.elder-grid-tile-hidden{flex:0 1 100%;margin:8px;width:100%;height:100%}.elder-grid-container{background-color:var(--elder-grid-background-color)}.elder-grid-flat{border:var(--elder-border-light)}.elder-grid-toolbar{min-height:44px}.elder-grid-footer{min-height:var(--elder-data-element-footer-height)}\n"], dependencies: [{ kind: "directive", type: DataContextSelectionDirective, selector: "[elderDataContextSelection]", inputs: ["elderDataContextSelectionModel", "elderDataContextSelection"], exportAs: ["elderDataContextSelection"] }, { kind: "component", type: ElderSelectionMasterCheckboxComponent, selector: "elder-selection-master-checkbox" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: DataContextStateIndicatorComponent, selector: "elder-data-context-state-indicator", inputs: ["dataContext"] }, { kind: "component", type: CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "directive", type: CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: ElderInfiniteScrollDirective, selector: "[elderInfiniteScroll]", inputs: ["listenToHost", "eventThrottle", "offsetFactor", "ignoreScrollEvent", "containerId", "scrollContainer"], outputs: ["closeToEnd", "scrolling"] }, { kind: "directive", type: CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "component", type: MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "component", type: ElderCompositeSortComponent, selector: "elder-composite-sort", inputs: ["availableSorts", "sorts", "translationPrefix"], outputs: ["sortsChange"] }, { kind: "directive", type: ElderCompositeSortDcDirective, selector: "[elderCompositeSortDc]", inputs: ["elderCompositeSortDc"] }, { kind: "component", type: ElderTileComponent, selector: "elder-tile", inputs: ["value", "selectionEnabled", "selectionModel", "interactionMode", "outlined"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
19254
19262
|
}
|
|
19255
19263
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: ElderGridComponent, decorators: [{
|
|
19256
19264
|
type: Component,
|
|
@@ -19276,7 +19284,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.0", ngImpor
|
|
|
19276
19284
|
ElderCompositeSortComponent,
|
|
19277
19285
|
ElderCompositeSortDcDirective,
|
|
19278
19286
|
ElderTileComponent,
|
|
19279
|
-
|
|
19287
|
+
NgClass,
|
|
19288
|
+
], template: "<!-- eslint-disable @angular-eslint/template/interactive-supports-focus -->\n<!-- eslint-disable @angular-eslint/template/click-events-have-key-events -->\n<div class=\"full elder-grid-component\">\n @if (dc(); as dc) {\n <!-- Grid Browser -->\n <div\n class=\"layout-col full elder-grid-container\"\n [elderDataContextSelection]=\"dc\"\n #dataSelection=\"elderDataContextSelection\"\n [elderDataContextSelectionModel]=\"selectionModel\"\n >\n <!-- Toolbar Row -->\n @if (toolbarVisible) {\n <div class=\"layout-row place-start-center flex-none elder-grid-toolbar\">\n @if (selectionVisible) {\n <div class=\"layout-col flex-none px-sm\">\n <elder-selection-master-checkbox class=\"flex-none\"></elder-selection-master-checkbox>\n </div>\n }\n\n <!-- Toolbar -->\n @if (toolbarTemplate) {\n <ng-template\n *ngTemplateOutlet=\"toolbarTemplate; context: { $implicit: this }\"\n ></ng-template>\n }\n\n @if (availableCompositeSorts && availableCompositeSorts.length > 0) {\n <elder-composite-sort\n class=\"flex-none\"\n [availableSorts]=\"availableCompositeSorts\"\n [translationPrefix]=\"sortTranslationPrefix\"\n [elderCompositeSortDc]=\"dc\"\n >\n </elder-composite-sort>\n }\n </div>\n\n <mat-divider></mat-divider>\n }\n\n <elder-data-context-state-indicator class=\"flex-none\" [dataContext]=\"dc\">\n </elder-data-context-state-indicator>\n\n <!-- [cdkDropListSortingDisabled]=\"true\" -->\n <!-- cdkDropList -->\n <cdk-virtual-scroll-viewport\n class=\"layout-col flex elder-grid-browser\"\n id=\"{{ scrollContainerId }}\"\n [itemSize]=\"itemHeight\"\n [minBufferPx]=\"itemHeight * 2\"\n [maxBufferPx]=\"itemHeight * 3\"\n #virtualScrollViewPort\n elderInfiniteScroll\n [eventThrottle]=\"200\"\n [offsetFactor]=\"2\"\n [ignoreScrollEvent]=\"dcStatus()?.loading\"\n [containerId]=\"scrollContainerId\"\n [listenToHost]=\"false\"\n (closeToEnd)=\"requestMoreDataZoned($event)\"\n >\n <!-- (scrolling)=\"onScrolling($event)\" -->\n\n <div\n *cdkVirtualFor=\"\n let gridRow of dataRows$;\n trackBy: TrackGridRowByIdFn;\n templateCacheSize: 50\n \"\n class=\"elder-grid-tile-row\"\n [style.height]=\"itemHeight + 'px'\"\n [ngClass]=\"rowClass()\"\n >\n @for (tile of gridRow.cells; track getId(tile)) {\n <!-- Tile Cell -->\n @if (isTileVisible(tile)) {\n <elder-tile\n class=\"elder-grid-tile\"\n [value]=\"tile\"\n [selectionEnabled]=\"selectionVisible\"\n [selectionModel]=\"selectionModel\"\n [outlined]=\"tileOutlined()\"\n (click)=\"onItemClick(tile)\"\n (dblclick)=\"onItemDoubleClick(tile)\"\n >\n <ng-container\n *ngTemplateOutlet=\"\n tileTemplate || simpleTileTemplate;\n context: { $implicit: tile }\n \"\n ></ng-container>\n </elder-tile>\n } @else {\n <div class=\"elder-grid-tile-hidden\"></div>\n }\n }\n </div>\n </cdk-virtual-scroll-viewport>\n\n <mat-progress-bar\n class=\"flex-none\"\n [mode]=\"dcStatus()?.loading ? 'indeterminate' : 'determinate'\"\n [color]=\"dcStatus()?.hasError ? 'warn' : 'primary'\"\n >\n </mat-progress-bar>\n\n <!-- Footer -->\n @if (footerVisible) {\n <div class=\"layout-row place-end-center gap-md flex-none elder-grid-footer\">\n <!-- Continuable -->\n @if (isContinuable) {\n <span class=\"mat-caption noselect\" style=\"color: var(--md-sys-color-outline)\">\n {{ viewData()?.length }} / {{ total() }}\n </span>\n\n <button\n mat-icon-button\n type=\"button\"\n color=\"primary\"\n [disabled]=\"!canLoadMore()\"\n (click)=\"dataSnapshot.loadMore()\"\n >\n <mat-icon>keyboard_arrow_down</mat-icon>\n </button>\n }\n\n <!-- Paged -->\n @if (isActivePaged) {\n @if (currentPage(); as page) {\n <mat-paginator\n class=\"flex-none\"\n [length]=\"total()\"\n [pageIndex]=\"page?.index\"\n [pageSize]=\"page?.size\"\n [pageSizeOptions]=\"pageSizeOptions\"\n >\n </mat-paginator>\n }\n }\n\n <!-- Local Source -->\n @if (!isActivePaged && !isContinuable) {\n <span class=\"mat-caption noselect pr-md\" style=\"color: var(--md-sys-color-outline)\">\n {{ viewData()?.length }}\n </span>\n }\n </div>\n }\n </div>\n }\n</div>\n\n<ng-template #simpleTileTemplate let-tile>\n @if (tile) {\n <div class=\"layout-col place-center-center flex\" style=\"background-color: lightblue\">\n <p class=\"noselect\">Tile: {{ tile }}</p>\n </div>\n }\n</ng-template>\n", styles: [".elder-grid-tile{width:100%;height:100%;cursor:pointer}.elder-grid-tile-row{display:grid;align-items:start;justify-items:start;padding:8px 16px;column-gap:16px}.elder-grid-tile-row:first-child{padding-top:16px}.elder-grid-tile-row.cols-1{grid-template-columns:repeat(1,1fr)}.elder-grid-tile-row.cols-2{grid-template-columns:repeat(2,1fr)}.elder-grid-tile-row.cols-3{grid-template-columns:repeat(3,1fr)}.elder-grid-tile-row.cols-4{grid-template-columns:repeat(4,1fr)}.elder-grid-tile-row.cols-5{grid-template-columns:repeat(5,1fr)}.elder-grid-tile-row.cols-6{grid-template-columns:repeat(6,1fr)}.elder-grid-tile-row.cols-7{grid-template-columns:repeat(7,1fr)}.elder-grid-tile-hidden{flex:0 1 100%;margin:8px;width:100%;height:100%}.elder-grid-container{background-color:var(--elder-grid-background-color)}.elder-grid-flat{border:var(--elder-border-light)}.elder-grid-toolbar{min-height:44px}.elder-grid-footer{min-height:var(--elder-data-element-footer-height)}\n"] }]
|
|
19280
19289
|
}], ctorParameters: () => [{ type: SelectionModel, decorators: [{
|
|
19281
19290
|
type: Optional
|
|
19282
19291
|
}] }, { type: ElderDataViewOptionsProvider, decorators: [{
|
|
@@ -19292,8 +19301,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.0", ngImpor
|
|
|
19292
19301
|
type: Input
|
|
19293
19302
|
}], itemHeight: [{
|
|
19294
19303
|
type: Input
|
|
19295
|
-
}], responsiveColumnCount: [{
|
|
19296
|
-
type: Input
|
|
19297
19304
|
}], virtualScrollViewPort: [{
|
|
19298
19305
|
type: ViewChild,
|
|
19299
19306
|
args: ['virtualScrollViewPort', { static: true }]
|
|
@@ -19515,7 +19522,7 @@ class MasterDetailActivationEvent {
|
|
|
19515
19522
|
this.creating = creating;
|
|
19516
19523
|
this.source = source;
|
|
19517
19524
|
this.deactivate = false;
|
|
19518
|
-
if (item
|
|
19525
|
+
if (item === null || item === undefined) {
|
|
19519
19526
|
this.deactivate = true;
|
|
19520
19527
|
}
|
|
19521
19528
|
}
|
|
@@ -19534,7 +19541,7 @@ class ElderMasterDetailService {
|
|
|
19534
19541
|
* *
|
|
19535
19542
|
**************************************************************************/
|
|
19536
19543
|
this.destroy$ = new Subject();
|
|
19537
|
-
this.mode$ = new BehaviorSubject(
|
|
19544
|
+
this.mode$ = new BehaviorSubject('DIALOG');
|
|
19538
19545
|
this.logger = LoggerFactory.getLogger(this.constructor.name);
|
|
19539
19546
|
this._itemActivationRequest$ = new Subject();
|
|
19540
19547
|
this._activeItem$ = new BehaviorSubject(null);
|
|
@@ -20532,55 +20539,27 @@ class ElderMasterDetailComponent {
|
|
|
20532
20539
|
* *
|
|
20533
20540
|
**************************************************************************/
|
|
20534
20541
|
this.log = LoggerFactory.getLogger(this.constructor.name);
|
|
20535
|
-
this.
|
|
20536
|
-
this.
|
|
20537
|
-
|
|
20538
|
-
|
|
20539
|
-
|
|
20540
|
-
|
|
20541
|
-
},
|
|
20542
|
-
});
|
|
20543
|
-
this.masterDetailService.currentItem$.pipe(takeUntil(this.destroy$)).subscribe({
|
|
20544
|
-
next: (item) => {
|
|
20545
|
-
this.currentActive$.next(item);
|
|
20546
|
-
},
|
|
20542
|
+
this.modeSig = toSignal(this.masterDetailService.mode$);
|
|
20543
|
+
this.currentActive = toSignal(this.masterDetailService.currentItem$);
|
|
20544
|
+
effect(() => {
|
|
20545
|
+
if (this.modeSig() === 'EMBEDDED') {
|
|
20546
|
+
this.closeDialog();
|
|
20547
|
+
}
|
|
20547
20548
|
});
|
|
20548
|
-
this.masterDetailService.currentItemChange.pipe(
|
|
20549
|
-
next: (active) =>
|
|
20550
|
-
if (this.mode$.getValue() == 'DIALOG') {
|
|
20551
|
-
if (active.item) {
|
|
20552
|
-
this.closeDialog();
|
|
20553
|
-
this.openDetailDialog(active?.item);
|
|
20554
|
-
}
|
|
20555
|
-
else {
|
|
20556
|
-
this.closeDialog();
|
|
20557
|
-
}
|
|
20558
|
-
}
|
|
20559
|
-
},
|
|
20549
|
+
this.masterDetailService.currentItemChange.pipe(takeUntilDestroyed()).subscribe({
|
|
20550
|
+
next: (active) => this.onCurrentItemChange(active),
|
|
20560
20551
|
});
|
|
20561
20552
|
}
|
|
20562
|
-
/***************************************************************************
|
|
20563
|
-
* *
|
|
20564
|
-
* Life Cycle *
|
|
20565
|
-
* *
|
|
20566
|
-
**************************************************************************/
|
|
20567
|
-
ngOnDestroy() {
|
|
20568
|
-
this.destroy$.next();
|
|
20569
|
-
this.destroy$.complete();
|
|
20570
|
-
}
|
|
20571
20553
|
/***************************************************************************
|
|
20572
20554
|
* *
|
|
20573
20555
|
* Properties *
|
|
20574
20556
|
* *
|
|
20575
20557
|
**************************************************************************/
|
|
20576
20558
|
set mode(mode) {
|
|
20577
|
-
this.mode$.next(mode);
|
|
20578
|
-
if (this.mode == 'EMBEDDED' && this.dialogRef) {
|
|
20579
|
-
this.dialogRef.close();
|
|
20580
|
-
}
|
|
20559
|
+
this.masterDetailService.mode$.next(mode);
|
|
20581
20560
|
}
|
|
20582
20561
|
get mode() {
|
|
20583
|
-
return this.mode$.
|
|
20562
|
+
return this.masterDetailService.mode$.value;
|
|
20584
20563
|
}
|
|
20585
20564
|
/***************************************************************************
|
|
20586
20565
|
* *
|
|
@@ -20602,19 +20581,30 @@ class ElderMasterDetailComponent {
|
|
|
20602
20581
|
console.log('The dialog was closed');
|
|
20603
20582
|
});
|
|
20604
20583
|
}
|
|
20584
|
+
onCurrentItemChange(active) {
|
|
20585
|
+
if (untracked(this.modeSig) === 'DIALOG') {
|
|
20586
|
+
if (active.item) {
|
|
20587
|
+
this.closeDialog();
|
|
20588
|
+
this.openDetailDialog(active?.item);
|
|
20589
|
+
}
|
|
20590
|
+
else {
|
|
20591
|
+
this.closeDialog();
|
|
20592
|
+
}
|
|
20593
|
+
}
|
|
20594
|
+
}
|
|
20605
20595
|
closeDialog() {
|
|
20606
|
-
if (this.dialogRef
|
|
20596
|
+
if (this.dialogRef) {
|
|
20607
20597
|
this.dialogRef.close();
|
|
20608
20598
|
}
|
|
20609
20599
|
}
|
|
20610
20600
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: ElderMasterDetailComponent, deps: [{ token: ElderMasterDetailService }, { token: i1$7.MatDialog }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
20611
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.0", type: ElderMasterDetailComponent, isStandalone: true, selector: "elder-master-detail", inputs: { mode: "mode" }, host: { classAttribute: "layout-col flex p-pane" }, providers: [ElderMasterDetailProvider.ExistingOrNewMasterDetailService], queries: [{ propertyName: "master", first: true, predicate: ElderMasterDirective, descendants: true, read: TemplateRef }, { propertyName: "detail", first: true, predicate: ElderDetailDirective, descendants: true, read: TemplateRef }], ngImport: i0, template: "<elder-basic-pane-layout class=\"flex p-0\"
|
|
20601
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.0", type: ElderMasterDetailComponent, isStandalone: true, selector: "elder-master-detail", inputs: { mode: "mode" }, host: { classAttribute: "layout-col flex p-pane" }, providers: [ElderMasterDetailProvider.ExistingOrNewMasterDetailService], queries: [{ propertyName: "master", first: true, predicate: ElderMasterDirective, descendants: true, read: TemplateRef }, { propertyName: "detail", first: true, predicate: ElderDetailDirective, descendants: true, read: TemplateRef }], ngImport: i0, template: "<elder-basic-pane-layout class=\"flex p-0\">\n <ng-container *ngTemplateOutlet=\"master\"></ng-container>\n\n @if (modeSig() === 'EMBEDDED') {\n @if (currentActive(); as currentActive) {\n <ng-container\n *ngTemplateOutlet=\"detail; context: { $implicit: currentActive }\"\n ></ng-container>\n }\n }\n</elder-basic-pane-layout>\n", styles: [""], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ElderBasicPaneLayoutComponent, selector: "elder-basic-pane-layout" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
20612
20602
|
}
|
|
20613
20603
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: ElderMasterDetailComponent, decorators: [{
|
|
20614
20604
|
type: Component,
|
|
20615
|
-
args: [{ selector: 'elder-master-detail', changeDetection: ChangeDetectionStrategy.OnPush, providers: [ElderMasterDetailProvider.ExistingOrNewMasterDetailService], imports: [
|
|
20605
|
+
args: [{ selector: 'elder-master-detail', changeDetection: ChangeDetectionStrategy.OnPush, providers: [ElderMasterDetailProvider.ExistingOrNewMasterDetailService], imports: [NgTemplateOutlet, ElderBasicPaneLayoutComponent], host: {
|
|
20616
20606
|
class: 'layout-col flex p-pane',
|
|
20617
|
-
}, template: "<elder-basic-pane-layout class=\"flex p-0\"
|
|
20607
|
+
}, template: "<elder-basic-pane-layout class=\"flex p-0\">\n <ng-container *ngTemplateOutlet=\"master\"></ng-container>\n\n @if (modeSig() === 'EMBEDDED') {\n @if (currentActive(); as currentActive) {\n <ng-container\n *ngTemplateOutlet=\"detail; context: { $implicit: currentActive }\"\n ></ng-container>\n }\n }\n</elder-basic-pane-layout>\n" }]
|
|
20618
20608
|
}], ctorParameters: () => [{ type: ElderMasterDetailService }, { type: i1$7.MatDialog }, { type: i0.ViewContainerRef }], propDecorators: { master: [{
|
|
20619
20609
|
type: ContentChild,
|
|
20620
20610
|
args: [ElderMasterDirective, { read: TemplateRef, static: false }]
|
|
@@ -20631,16 +20621,17 @@ class ElderMasterActivationDirective {
|
|
|
20631
20621
|
* Constructor *
|
|
20632
20622
|
* *
|
|
20633
20623
|
**************************************************************************/
|
|
20634
|
-
constructor(toastService,
|
|
20624
|
+
constructor(destroyRef, toastService, activationModel, activationController, masterDetailService) {
|
|
20625
|
+
this.destroyRef = destroyRef;
|
|
20635
20626
|
this.toastService = toastService;
|
|
20636
|
-
this.
|
|
20627
|
+
this.activationModel = activationModel;
|
|
20628
|
+
this.activationController = activationController;
|
|
20637
20629
|
this.masterDetailService = masterDetailService;
|
|
20638
20630
|
/***************************************************************************
|
|
20639
20631
|
* *
|
|
20640
20632
|
* Fields *
|
|
20641
20633
|
* *
|
|
20642
20634
|
**************************************************************************/
|
|
20643
|
-
this.destroy$ = new Subject();
|
|
20644
20635
|
this.log = LoggerFactory.getLogger(this.constructor.name);
|
|
20645
20636
|
}
|
|
20646
20637
|
/***************************************************************************
|
|
@@ -20648,26 +20639,24 @@ class ElderMasterActivationDirective {
|
|
|
20648
20639
|
* Life Cycle *
|
|
20649
20640
|
* *
|
|
20650
20641
|
**************************************************************************/
|
|
20651
|
-
ngOnDestroy() {
|
|
20652
|
-
this.destroy$.next();
|
|
20653
|
-
this.destroy$.complete();
|
|
20654
|
-
}
|
|
20655
20642
|
ngOnInit() {
|
|
20656
|
-
this.
|
|
20643
|
+
this.activationModel.itemActivationEvents.pipe(takeUntilDestroyed(this.destroyRef)).subscribe({
|
|
20657
20644
|
next: (event) => {
|
|
20658
20645
|
this.log.debug('Table-Activation changed, notifying master-detail', event);
|
|
20659
20646
|
this.masterDetailService.onItemActivated(event.item, { source: event.source });
|
|
20660
20647
|
},
|
|
20661
20648
|
error: (err) => this.toastService.error('Failed to set active item', err),
|
|
20662
20649
|
});
|
|
20663
|
-
this.masterDetailService.itemActivationRequested
|
|
20650
|
+
this.masterDetailService.itemActivationRequested
|
|
20651
|
+
.pipe(takeUntilDestroyed(this.destroyRef))
|
|
20652
|
+
.subscribe({
|
|
20664
20653
|
next: (item) => {
|
|
20665
|
-
this.
|
|
20654
|
+
this.activationModel.activate(item, new ItemActivationOptions(ActivationEventSource.SYSTEM, true) // TODO keyboard, arrow?
|
|
20666
20655
|
); // Maybe support activationRequest.source and map
|
|
20667
20656
|
},
|
|
20668
20657
|
});
|
|
20669
20658
|
this.masterDetailService.mode$
|
|
20670
|
-
.pipe(
|
|
20659
|
+
.pipe(takeUntilDestroyed(this.destroyRef))
|
|
20671
20660
|
.subscribe({ next: (mode) => this.onModeChange(mode) });
|
|
20672
20661
|
}
|
|
20673
20662
|
/***************************************************************************
|
|
@@ -20676,14 +20665,22 @@ class ElderMasterActivationDirective {
|
|
|
20676
20665
|
* *
|
|
20677
20666
|
**************************************************************************/
|
|
20678
20667
|
onModeChange(mode) {
|
|
20679
|
-
|
|
20680
|
-
|
|
20681
|
-
|
|
20682
|
-
|
|
20683
|
-
|
|
20668
|
+
this.activationController.activationOptions(this.activationOptions(mode));
|
|
20669
|
+
}
|
|
20670
|
+
activationOptions(mode) {
|
|
20671
|
+
switch (mode) {
|
|
20672
|
+
case 'EMBEDDED':
|
|
20673
|
+
return {
|
|
20674
|
+
autoActivation: 'once',
|
|
20675
|
+
autoActivateItem: 'first',
|
|
20676
|
+
};
|
|
20677
|
+
case 'DIALOG':
|
|
20678
|
+
return { autoActivation: 'never' };
|
|
20679
|
+
default:
|
|
20680
|
+
throw new UnreachableCaseError(mode);
|
|
20684
20681
|
}
|
|
20685
20682
|
}
|
|
20686
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: ElderMasterActivationDirective, deps: [{ token: ElderToastService }, { token:
|
|
20683
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: ElderMasterActivationDirective, deps: [{ token: i0.DestroyRef }, { token: ElderToastService }, { token: ActivationModel }, { token: DataViewActivationController }, { token: ElderMasterDetailService }], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
20687
20684
|
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.0", type: ElderMasterActivationDirective, isStandalone: true, selector: "[elderMasterActivation]", ngImport: i0 }); }
|
|
20688
20685
|
}
|
|
20689
20686
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: ElderMasterActivationDirective, decorators: [{
|
|
@@ -20692,7 +20689,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.0", ngImpor
|
|
|
20692
20689
|
selector: '[elderMasterActivation]',
|
|
20693
20690
|
standalone: true,
|
|
20694
20691
|
}]
|
|
20695
|
-
}], ctorParameters: () => [{ type: ElderToastService }, { type:
|
|
20692
|
+
}], ctorParameters: () => [{ type: i0.DestroyRef }, { type: ElderToastService }, { type: ActivationModel }, { type: DataViewActivationController }, { type: ElderMasterDetailService }] });
|
|
20696
20693
|
|
|
20697
20694
|
class ElderFromFieldCustomizableBase extends ElderFromFieldBase {
|
|
20698
20695
|
constructor() {
|