@elderbyte/ngx-starter 19.13.0 → 19.13.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 +31 -9
- package/fesm2022/elderbyte-ngx-starter.mjs.map +1 -1
- package/lib/common/data/datasource/curated/curated-data-source.d.ts +5 -3
- package/lib/components/data-view/common/drag-and-drop/elder-data-view-item-drag.directive.d.ts +1 -1
- package/package.json +1 -1
|
@@ -6583,10 +6583,10 @@ class CuratedDataSource {
|
|
|
6583
6583
|
return this._dataChanged;
|
|
6584
6584
|
}
|
|
6585
6585
|
findById(id) {
|
|
6586
|
-
return this.originalSource.findById(id);
|
|
6586
|
+
return this.readyUseCurated$.pipe(switchMap$1((useCurated) => this.curatedData.findById(id)), catchError((err) => this.originalSource.findById(id)));
|
|
6587
6587
|
}
|
|
6588
6588
|
findByIds(ids) {
|
|
6589
|
-
return this.
|
|
6589
|
+
return this.readyUseCurated$.pipe(switchMap$1((useCurated) => this.findByIdsFirstCuratedThenOriginal(ids)));
|
|
6590
6590
|
}
|
|
6591
6591
|
getId(entity) {
|
|
6592
6592
|
return this.originalSource.getId(entity);
|
|
@@ -6604,6 +6604,28 @@ class CuratedDataSource {
|
|
|
6604
6604
|
const curatedEvents$ = this.curatedData.dataChanged.pipe(combineLatestWith(this.useCuratedData$), filter(([_, enabled]) => enabled), map(([event, _]) => event));
|
|
6605
6605
|
return genericEvents$.pipe(mergeWith(curatedEvents$));
|
|
6606
6606
|
}
|
|
6607
|
+
findByIdsFirstCuratedThenOriginal(ids) {
|
|
6608
|
+
const desiredIds = new Set(ids);
|
|
6609
|
+
const curated = this.findAvailableCuratedByIds(desiredIds);
|
|
6610
|
+
const missingIds = new Set(ids);
|
|
6611
|
+
curated.forEach((entity, id) => missingIds.delete(id));
|
|
6612
|
+
const curatedEntities = Array.from(curated.values());
|
|
6613
|
+
if (missingIds.size > 0) {
|
|
6614
|
+
return this.originalSource
|
|
6615
|
+
.findByIds(Array.from(missingIds))
|
|
6616
|
+
.pipe(map((missing) => [...missing, ...curatedEntities]));
|
|
6617
|
+
}
|
|
6618
|
+
else {
|
|
6619
|
+
return of(curatedEntities);
|
|
6620
|
+
}
|
|
6621
|
+
}
|
|
6622
|
+
findAvailableCuratedByIds(desiredIds) {
|
|
6623
|
+
const map = new Map();
|
|
6624
|
+
this.curatedData.data
|
|
6625
|
+
.filter((e) => desiredIds.has(this.getId(e)))
|
|
6626
|
+
.forEach((e) => map.set(this.getId(e), e));
|
|
6627
|
+
return map;
|
|
6628
|
+
}
|
|
6607
6629
|
}
|
|
6608
6630
|
|
|
6609
6631
|
/**
|
|
@@ -15664,7 +15686,7 @@ class ElderDataViewItemDragDirective {
|
|
|
15664
15686
|
* *
|
|
15665
15687
|
**************************************************************************/
|
|
15666
15688
|
/** The item that is being dragged. */
|
|
15667
|
-
this.item = input.required({ alias: '
|
|
15689
|
+
this.item = input.required({ alias: 'elderDataViewItemDrag' });
|
|
15668
15690
|
/** Controls if the item can be dragged or not.
|
|
15669
15691
|
* We explicitly initialize with null and don't use booleanTransformFn since we need to know if the
|
|
15670
15692
|
* user defined this or if we should fall back to a superior predicate fn.
|
|
@@ -15706,12 +15728,12 @@ class ElderDataViewItemDragDirective {
|
|
|
15706
15728
|
}
|
|
15707
15729
|
}
|
|
15708
15730
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: ElderDataViewItemDragDirective, deps: [{ token: DataViewDndControllerService, optional: true }, { token: i2$2.CdkDrag }], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
15709
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.10", type: ElderDataViewItemDragDirective, isStandalone: true, selector: "[
|
|
15731
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.10", type: ElderDataViewItemDragDirective, isStandalone: true, selector: "[elderDataViewItemDrag]", inputs: { item: { classPropertyName: "item", publicName: "elderDataViewItemDrag", isSignal: true, isRequired: true, transformFunction: null }, canDragItem: { classPropertyName: "canDragItem", publicName: "canDragItem", isSignal: true, isRequired: false, transformFunction: null } }, hostDirectives: [{ directive: i2$2.CdkDrag }], ngImport: i0 }); }
|
|
15710
15732
|
}
|
|
15711
15733
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: ElderDataViewItemDragDirective, decorators: [{
|
|
15712
15734
|
type: Directive,
|
|
15713
15735
|
args: [{
|
|
15714
|
-
selector: '[
|
|
15736
|
+
selector: '[elderDataViewItemDrag]',
|
|
15715
15737
|
hostDirectives: [CdkDrag], // adds cdkDrag to host
|
|
15716
15738
|
}]
|
|
15717
15739
|
}], ctorParameters: () => [{ type: DataViewDndControllerService, decorators: [{
|
|
@@ -17193,7 +17215,7 @@ class ElderTableComponent extends ElderDataViewBaseComponent {
|
|
|
17193
17215
|
provide: ELDER_DATA_VIEW,
|
|
17194
17216
|
useExisting: forwardRef(() => ElderTableComponent),
|
|
17195
17217
|
},
|
|
17196
|
-
], queries: [{ propertyName: "navigationBar", first: true, predicate: ElderTableNavigationBarDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "columnDefs", predicate: MatColumnDef }, { propertyName: "elderColumns", predicate: ElderTableColumnDirective }, { propertyName: "rowDefs", predicate: MatRowDef }, { propertyName: "toolbarRowTemplateQuery", predicate: ElderTableToolbarDirective, read: TemplateRef }], viewQueries: [{ propertyName: "matTable", first: true, predicate: MatTable, descendants: true, static: true }, { propertyName: "rowsQuery", predicate: ElderTableRowDirective, descendants: true }], exportAs: ["elderTable"], usesInheritance: true, ngImport: i0, template: "<div class=\"full\" style=\"overflow: hidden\">\n <div class=\"layout-col elder-table full\" [class.elder-table-dense-horizontal]=\"denseHorizontal()\">\n <!-- Toolbar Rows -->\n @for (toolbarRowTemplate of toolbarRowTemplates(); track toolbarRowTemplate) {\n <ng-template\n *ngTemplateOutlet=\"toolbarRowTemplate; context: { $implicit: this }\"\n ></ng-template>\n }\n\n <!-- Scrollable Table -->\n <div\n class=\"elder-table-inner layout-col {{\n isDataValid(viewData()) ? 'flex' : ''\n }} scrollable elder-table-scroll\"\n elderInfiniteScroll\n [eventThrottle]=\"150\"\n [offsetFactor]=\"2\"\n [ignoreScrollEvent]=\"!isContinuable || !canLoadMore()\"\n (closeToEnd)=\"requestMoreDataZoned($event)\"\n >\n <table\n mat-table\n [id]=\"id()\"\n class=\"elder-mat-inner-table\"\n [trackBy]=\"trackByFn\"\n [dataSource]=\"$any(dc())\"\n [elderDataContextSelection]=\"dc()\"\n #dataSelection=\"elderDataContextSelection\"\n [elderDataContextSelectionModel]=\"selectionModel\"\n elderTableDropListConnector\n >\n <!-- selection Column -->\n <ng-container matColumnDef=\"select\">\n <th mat-header-cell *matHeaderCellDef>\n <elder-selection-master-checkbox></elder-selection-master-checkbox>\n </th>\n <td mat-cell *matCellDef=\"let entity\">\n <elder-table-selection-cell\n [entity]=\"entity\"\n class=\"elder-table-checkbox\"\n [class.elder-table-checkbox-visible]=\"dataSelection.selectionState().anySelected\"\n ></elder-table-selection-cell>\n </td>\n <td mat-footer-cell *matFooterCellDef></td>\n </ng-container>\n\n @if (!hideHeaderRow()) {\n <tr mat-header-row *matHeaderRowDef=\"displayedColumnsInner(); sticky: true\"></tr>\n }\n <tr\n mat-row\n class=\"elder-table-row\"\n *matRowDef=\"let entity; columns: displayedColumnsInner()\"\n [
|
|
17218
|
+
], queries: [{ propertyName: "navigationBar", first: true, predicate: ElderTableNavigationBarDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "columnDefs", predicate: MatColumnDef }, { propertyName: "elderColumns", predicate: ElderTableColumnDirective }, { propertyName: "rowDefs", predicate: MatRowDef }, { propertyName: "toolbarRowTemplateQuery", predicate: ElderTableToolbarDirective, read: TemplateRef }], viewQueries: [{ propertyName: "matTable", first: true, predicate: MatTable, descendants: true, static: true }, { propertyName: "rowsQuery", predicate: ElderTableRowDirective, descendants: true }], exportAs: ["elderTable"], usesInheritance: true, ngImport: i0, template: "<div class=\"full\" style=\"overflow: hidden\">\n <div class=\"layout-col elder-table full\" [class.elder-table-dense-horizontal]=\"denseHorizontal()\">\n <!-- Toolbar Rows -->\n @for (toolbarRowTemplate of toolbarRowTemplates(); track toolbarRowTemplate) {\n <ng-template\n *ngTemplateOutlet=\"toolbarRowTemplate; context: { $implicit: this }\"\n ></ng-template>\n }\n\n <!-- Scrollable Table -->\n <div\n class=\"elder-table-inner layout-col {{\n isDataValid(viewData()) ? 'flex' : ''\n }} scrollable elder-table-scroll\"\n elderInfiniteScroll\n [eventThrottle]=\"150\"\n [offsetFactor]=\"2\"\n [ignoreScrollEvent]=\"!isContinuable || !canLoadMore()\"\n (closeToEnd)=\"requestMoreDataZoned($event)\"\n >\n <table\n mat-table\n [id]=\"id()\"\n class=\"elder-mat-inner-table\"\n [trackBy]=\"trackByFn\"\n [dataSource]=\"$any(dc())\"\n [elderDataContextSelection]=\"dc()\"\n #dataSelection=\"elderDataContextSelection\"\n [elderDataContextSelectionModel]=\"selectionModel\"\n elderTableDropListConnector\n >\n <!-- selection Column -->\n <ng-container matColumnDef=\"select\">\n <th mat-header-cell *matHeaderCellDef>\n <elder-selection-master-checkbox></elder-selection-master-checkbox>\n </th>\n <td mat-cell *matCellDef=\"let entity\">\n <elder-table-selection-cell\n [entity]=\"entity\"\n class=\"elder-table-checkbox\"\n [class.elder-table-checkbox-visible]=\"dataSelection.selectionState().anySelected\"\n ></elder-table-selection-cell>\n </td>\n <td mat-footer-cell *matFooterCellDef></td>\n </ng-container>\n\n @if (!hideHeaderRow()) {\n <tr mat-header-row *matHeaderRowDef=\"displayedColumnsInner(); sticky: true\"></tr>\n }\n <tr\n mat-row\n class=\"elder-table-row\"\n *matRowDef=\"let entity; columns: displayedColumnsInner()\"\n [elderDataViewItemDrag]=\"entity\"\n [elderTableRow]=\"entity\"\n [highlightSelection]=\"interactionMode === 'selection'\"\n [class.dense]=\"dense()\"\n [class.elder-row-hidden]=\"hiddenField && entity[hiddenField]\"\n [class.elder-row-removing]=\"removingField && entity[removingField]\"\n (click)=\"onItemClick(entity)\"\n (dblclick)=\"onItemDoubleClick(entity)\"\n ></tr>\n @if (showFooterRow()) {\n <tr mat-footer-row *matFooterRowDef=\"displayedColumnsInner(); sticky: true\"></tr>\n }\n </table>\n </div>\n\n @if (!isDataValid(viewData())) {\n <elder-data-context-state-indicator class=\"flex\" [dataContext]=\"dataContext\">\n </elder-data-context-state-indicator>\n }\n\n <mat-progress-bar\n class=\"flex-none mt-auto\"\n [mode]=\"dcStatus()?.loading ? 'indeterminate' : 'determinate'\"\n [color]=\"dcStatus()?.hasError ? 'warn' : 'primary'\"\n >\n </mat-progress-bar>\n\n <ng-template\n *ngTemplateOutlet=\"navigationBar() ?? defaultNavigationBar; context: { $implicit: this }\"\n ></ng-template>\n </div>\n</div>\n\n<ng-template #defaultNavigationBar>\n <div class=\"layout-row flex-none place-end-center gap-md elder-table-navigation-bar\">\n <elder-table-navigation></elder-table-navigation>\n </div>\n</ng-template>\n", styles: [":host{min-width:0;min-height:0}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: ElderInfiniteScrollDirective, selector: "[elderInfiniteScroll]", inputs: ["listenToHost", "eventThrottle", "offsetFactor", "ignoreScrollEvent", "containerId", "scrollContainer"], outputs: ["closeToEnd", "scrolling"] }, { kind: "component", type: MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: DataContextSelectionDirective, selector: "[elderDataContextSelection]", inputs: ["elderDataContextSelectionModel", "elderDataContextSelection"], exportAs: ["elderDataContextSelection"] }, { kind: "directive", type: MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "component", type: ElderSelectionMasterCheckboxComponent, selector: "elder-selection-master-checkbox" }, { kind: "directive", type: MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: MatFooterCellDef, selector: "[matFooterCellDef]" }, { kind: "directive", type: MatFooterCell, selector: "mat-footer-cell, td[mat-footer-cell]" }, { kind: "directive", type: MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "component", type: MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "directive", type: MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "component", type: MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: ElderTableRowDirective, selector: "tr[elderTableRow]", inputs: ["elderTableRow", "highlightSelection"], exportAs: ["elderTableRow"] }, { kind: "directive", type: MatFooterRowDef, selector: "[matFooterRowDef]", inputs: ["matFooterRowDef", "matFooterRowDefSticky"] }, { kind: "component", type: MatFooterRow, selector: "mat-footer-row, tr[mat-footer-row]", exportAs: ["matFooterRow"] }, { kind: "component", type: DataContextStateIndicatorComponent, selector: "elder-data-context-state-indicator", inputs: ["dataContext"] }, { kind: "component", type: MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "directive", type: ElderDataViewItemDragDirective, selector: "[elderDataViewItemDrag]", inputs: ["elderDataViewItemDrag", "canDragItem"] }, { kind: "directive", type: ElderTableDropListConnectorDirective, selector: "[elderTableDropListConnector]" }, { kind: "component", type: ElderTableSelectionCellComponent, selector: "elder-table-selection-cell", inputs: ["entity"] }, { kind: "component", type: TableNavigationComponent, selector: "elder-table-navigation" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
17197
17219
|
}
|
|
17198
17220
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: ElderTableComponent, decorators: [{
|
|
17199
17221
|
type: Component,
|
|
@@ -17229,7 +17251,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
|
|
|
17229
17251
|
ElderTableDropListConnectorDirective,
|
|
17230
17252
|
ElderTableSelectionCellComponent,
|
|
17231
17253
|
TableNavigationComponent,
|
|
17232
|
-
], template: "<div class=\"full\" style=\"overflow: hidden\">\n <div class=\"layout-col elder-table full\" [class.elder-table-dense-horizontal]=\"denseHorizontal()\">\n <!-- Toolbar Rows -->\n @for (toolbarRowTemplate of toolbarRowTemplates(); track toolbarRowTemplate) {\n <ng-template\n *ngTemplateOutlet=\"toolbarRowTemplate; context: { $implicit: this }\"\n ></ng-template>\n }\n\n <!-- Scrollable Table -->\n <div\n class=\"elder-table-inner layout-col {{\n isDataValid(viewData()) ? 'flex' : ''\n }} scrollable elder-table-scroll\"\n elderInfiniteScroll\n [eventThrottle]=\"150\"\n [offsetFactor]=\"2\"\n [ignoreScrollEvent]=\"!isContinuable || !canLoadMore()\"\n (closeToEnd)=\"requestMoreDataZoned($event)\"\n >\n <table\n mat-table\n [id]=\"id()\"\n class=\"elder-mat-inner-table\"\n [trackBy]=\"trackByFn\"\n [dataSource]=\"$any(dc())\"\n [elderDataContextSelection]=\"dc()\"\n #dataSelection=\"elderDataContextSelection\"\n [elderDataContextSelectionModel]=\"selectionModel\"\n elderTableDropListConnector\n >\n <!-- selection Column -->\n <ng-container matColumnDef=\"select\">\n <th mat-header-cell *matHeaderCellDef>\n <elder-selection-master-checkbox></elder-selection-master-checkbox>\n </th>\n <td mat-cell *matCellDef=\"let entity\">\n <elder-table-selection-cell\n [entity]=\"entity\"\n class=\"elder-table-checkbox\"\n [class.elder-table-checkbox-visible]=\"dataSelection.selectionState().anySelected\"\n ></elder-table-selection-cell>\n </td>\n <td mat-footer-cell *matFooterCellDef></td>\n </ng-container>\n\n @if (!hideHeaderRow()) {\n <tr mat-header-row *matHeaderRowDef=\"displayedColumnsInner(); sticky: true\"></tr>\n }\n <tr\n mat-row\n class=\"elder-table-row\"\n *matRowDef=\"let entity; columns: displayedColumnsInner()\"\n [
|
|
17254
|
+
], template: "<div class=\"full\" style=\"overflow: hidden\">\n <div class=\"layout-col elder-table full\" [class.elder-table-dense-horizontal]=\"denseHorizontal()\">\n <!-- Toolbar Rows -->\n @for (toolbarRowTemplate of toolbarRowTemplates(); track toolbarRowTemplate) {\n <ng-template\n *ngTemplateOutlet=\"toolbarRowTemplate; context: { $implicit: this }\"\n ></ng-template>\n }\n\n <!-- Scrollable Table -->\n <div\n class=\"elder-table-inner layout-col {{\n isDataValid(viewData()) ? 'flex' : ''\n }} scrollable elder-table-scroll\"\n elderInfiniteScroll\n [eventThrottle]=\"150\"\n [offsetFactor]=\"2\"\n [ignoreScrollEvent]=\"!isContinuable || !canLoadMore()\"\n (closeToEnd)=\"requestMoreDataZoned($event)\"\n >\n <table\n mat-table\n [id]=\"id()\"\n class=\"elder-mat-inner-table\"\n [trackBy]=\"trackByFn\"\n [dataSource]=\"$any(dc())\"\n [elderDataContextSelection]=\"dc()\"\n #dataSelection=\"elderDataContextSelection\"\n [elderDataContextSelectionModel]=\"selectionModel\"\n elderTableDropListConnector\n >\n <!-- selection Column -->\n <ng-container matColumnDef=\"select\">\n <th mat-header-cell *matHeaderCellDef>\n <elder-selection-master-checkbox></elder-selection-master-checkbox>\n </th>\n <td mat-cell *matCellDef=\"let entity\">\n <elder-table-selection-cell\n [entity]=\"entity\"\n class=\"elder-table-checkbox\"\n [class.elder-table-checkbox-visible]=\"dataSelection.selectionState().anySelected\"\n ></elder-table-selection-cell>\n </td>\n <td mat-footer-cell *matFooterCellDef></td>\n </ng-container>\n\n @if (!hideHeaderRow()) {\n <tr mat-header-row *matHeaderRowDef=\"displayedColumnsInner(); sticky: true\"></tr>\n }\n <tr\n mat-row\n class=\"elder-table-row\"\n *matRowDef=\"let entity; columns: displayedColumnsInner()\"\n [elderDataViewItemDrag]=\"entity\"\n [elderTableRow]=\"entity\"\n [highlightSelection]=\"interactionMode === 'selection'\"\n [class.dense]=\"dense()\"\n [class.elder-row-hidden]=\"hiddenField && entity[hiddenField]\"\n [class.elder-row-removing]=\"removingField && entity[removingField]\"\n (click)=\"onItemClick(entity)\"\n (dblclick)=\"onItemDoubleClick(entity)\"\n ></tr>\n @if (showFooterRow()) {\n <tr mat-footer-row *matFooterRowDef=\"displayedColumnsInner(); sticky: true\"></tr>\n }\n </table>\n </div>\n\n @if (!isDataValid(viewData())) {\n <elder-data-context-state-indicator class=\"flex\" [dataContext]=\"dataContext\">\n </elder-data-context-state-indicator>\n }\n\n <mat-progress-bar\n class=\"flex-none mt-auto\"\n [mode]=\"dcStatus()?.loading ? 'indeterminate' : 'determinate'\"\n [color]=\"dcStatus()?.hasError ? 'warn' : 'primary'\"\n >\n </mat-progress-bar>\n\n <ng-template\n *ngTemplateOutlet=\"navigationBar() ?? defaultNavigationBar; context: { $implicit: this }\"\n ></ng-template>\n </div>\n</div>\n\n<ng-template #defaultNavigationBar>\n <div class=\"layout-row flex-none place-end-center gap-md elder-table-navigation-bar\">\n <elder-table-navigation></elder-table-navigation>\n </div>\n</ng-template>\n", styles: [":host{min-width:0;min-height:0}\n"] }]
|
|
17233
17255
|
}], ctorParameters: () => [{ type: ElderTableModel }, { type: SelectionModel, decorators: [{
|
|
17234
17256
|
type: Optional
|
|
17235
17257
|
}] }, { type: ElderDataViewOptionsProvider, decorators: [{
|
|
@@ -25734,7 +25756,7 @@ class ElderMultiSelectChipsComponent extends ElderMultiSelectBase {
|
|
|
25734
25756
|
provide: ELDER_SELECT_BASE,
|
|
25735
25757
|
useExisting: forwardRef(() => ElderMultiSelectChipsComponent),
|
|
25736
25758
|
},
|
|
25737
|
-
], queries: [{ propertyName: "_customChipInput", first: true, predicate: MatFormFieldControl, descendants: true }, { propertyName: "chipTemplateQuery", first: true, predicate: ElderSelectChipDirective, descendants: true, read: TemplateRef }, { propertyName: "chipAvatarTemplateQuery", first: true, predicate: ElderSelectChipAvatarDirective, descendants: true, read: TemplateRef }, { propertyName: "customInputTemplateQuery", first: true, predicate: ElderSelectCustomInputDirective, descendants: true, read: TemplateRef }], viewQueries: [{ propertyName: "_chipInput", first: true, predicate: ElderSelectComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"elder-flex-control\" [matTooltip]=\"state()?.error\">\n <mat-chip-set\n #chips\n [class.mat-mdc-chip-set-stacked]=\"stacked\"\n cdkDropList\n [cdkDropListOrientation]=\"stacked ? 'vertical' : 'horizontal'\"\n (cdkDropListDropped)=\"drop($event)\"\n [cdkDropListDisabled]=\"!allowSorting\"\n >\n @if (icon) {\n <div class=\"elder-input-prefix-icon-container flex-none\">\n <mat-icon\n disabled\n class=\"elder-prefix-icon elder-mdc-control-icon elder-icon-small noselect\"\n [class.loading]=\"state()?.loading\"\n >\n {{ icon }}\n </mat-icon>\n </div>\n }\n\n @for (chipModel of selectChips(); track chipModel.id) {\n <mat-chip-row\n elderChipLabel\n highlighted\n class=\"noselect clickable-chip\"\n [value]=\"resolveChipValue(chipModel.value)\"\n [color]=\"chipModel.colorSpec?.themeColor\"\n [levelColor]=\"chipModel.colorSpec?.levelColor\"\n [stateColor]=\"chipModel.colorSpec?.stateColor\"\n [namedColor]=\"chipModel.colorSpec?.namedColor\"\n [removable]=\"chipModel.removable\"\n (keydown)=\"onChipKeyDown($event, chipModel.value)\"\n (click)=\"onCurrentClicked(chipModel.value)\"\n cdkDrag\n [cdkDragData]=\"chipModel.value\"\n [cdkDragDisabled]=\"!allowSorting\"\n >\n @if (templates()?.avatar && !chipModel.avatarSpec?.hide) {\n <mat-chip-avatar [class.chip-avatar-xl]=\"chipModel.avatarSpec?.large\">\n <ng-container *ngTemplateOutlet=\"templates().avatar; context: { $implicit: chipModel }\">\n </ng-container>\n </mat-chip-avatar>\n }\n\n <ng-container\n *ngTemplateOutlet=\"\n templates()?.chip || simpleChipTemplate;\n context: { $implicit: chipModel }\n \"\n >\n </ng-container>\n\n @if (chipModel.trailingSpec?.icon; as trailingIcon) {\n <mat-icon\n matChipTrailingIcon\n class=\"elder-trailing-icon\"\n [fontSet]=\"chipModel.trailingSpec?.iconFontSet\"\n >{{ trailingIcon }}</mat-icon\n >\n }\n\n @if (chipModel.removable) {\n <mat-icon matChipRemove (click)=\"onClickRemoveChip($event, chipModel.value)\">\n cancel\n </mat-icon>\n }\n </mat-chip-row>\n }\n\n <div class=\"layout-row place-start-center elder-chip-input\">\n <!-- [matChipInputFor]=\"chips\" -->\n <ng-container *ngTemplateOutlet=\"templates()?.input || selectInput\"> </ng-container>\n\n @if (selectionPopup) {\n <button\n mat-icon-button\n type=\"button\"\n class=\"elder-control-icon-button elder-browse-icon\"\n [disabled]=\"isLocked\"\n (click)=\"openSelectionPopup($event)\"\n aria-label=\"Search\"\n elderStopEventPropagation\n tabIndex=\"-1\"\n >\n <mat-icon class=\"elder-mdc-control-icon\">search</mat-icon>\n </button>\n }\n </div>\n </mat-chip-set>\n</div>\n\n<ng-template #selectInput>\n <!-- mat-mdc-chip-input -->\n <elder-select\n autocomplete\n elderClearSelect\n class=\"elder-chip-input-select flex\"\n [data]=\"dataContextS()\"\n [disabled]=\"!!
|
|
25759
|
+
], queries: [{ propertyName: "_customChipInput", first: true, predicate: MatFormFieldControl, descendants: true }, { propertyName: "chipTemplateQuery", first: true, predicate: ElderSelectChipDirective, descendants: true, read: TemplateRef }, { propertyName: "chipAvatarTemplateQuery", first: true, predicate: ElderSelectChipAvatarDirective, descendants: true, read: TemplateRef }, { propertyName: "customInputTemplateQuery", first: true, predicate: ElderSelectCustomInputDirective, descendants: true, read: TemplateRef }], viewQueries: [{ propertyName: "_chipInput", first: true, predicate: ElderSelectComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"elder-flex-control\" [matTooltip]=\"state()?.error\">\n <mat-chip-set\n #chips\n [class.mat-mdc-chip-set-stacked]=\"stacked\"\n cdkDropList\n [cdkDropListOrientation]=\"stacked ? 'vertical' : 'horizontal'\"\n (cdkDropListDropped)=\"drop($event)\"\n [cdkDropListDisabled]=\"!allowSorting\"\n >\n @if (icon) {\n <div class=\"elder-input-prefix-icon-container flex-none\">\n <mat-icon\n disabled\n class=\"elder-prefix-icon elder-mdc-control-icon elder-icon-small noselect\"\n [class.loading]=\"state()?.loading\"\n >\n {{ icon }}\n </mat-icon>\n </div>\n }\n\n @for (chipModel of selectChips(); track chipModel.id) {\n <mat-chip-row\n elderChipLabel\n highlighted\n class=\"noselect clickable-chip\"\n [value]=\"resolveChipValue(chipModel.value)\"\n [color]=\"chipModel.colorSpec?.themeColor\"\n [levelColor]=\"chipModel.colorSpec?.levelColor\"\n [stateColor]=\"chipModel.colorSpec?.stateColor\"\n [namedColor]=\"chipModel.colorSpec?.namedColor\"\n [removable]=\"chipModel.removable\"\n (keydown)=\"onChipKeyDown($event, chipModel.value)\"\n (click)=\"onCurrentClicked(chipModel.value)\"\n cdkDrag\n [cdkDragData]=\"chipModel.value\"\n [cdkDragDisabled]=\"!allowSorting\"\n >\n @if (templates()?.avatar && !chipModel.avatarSpec?.hide) {\n <mat-chip-avatar [class.chip-avatar-xl]=\"chipModel.avatarSpec?.large\">\n <ng-container *ngTemplateOutlet=\"templates().avatar; context: { $implicit: chipModel }\">\n </ng-container>\n </mat-chip-avatar>\n }\n\n <ng-container\n *ngTemplateOutlet=\"\n templates()?.chip || simpleChipTemplate;\n context: { $implicit: chipModel }\n \"\n >\n </ng-container>\n\n @if (chipModel.trailingSpec?.icon; as trailingIcon) {\n <mat-icon\n matChipTrailingIcon\n class=\"elder-trailing-icon\"\n [fontSet]=\"chipModel.trailingSpec?.iconFontSet\"\n >{{ trailingIcon }}</mat-icon\n >\n }\n\n @if (chipModel.removable) {\n <mat-icon matChipRemove (click)=\"onClickRemoveChip($event, chipModel.value)\">\n cancel\n </mat-icon>\n }\n </mat-chip-row>\n }\n\n <div class=\"layout-row place-start-center elder-chip-input\">\n <!-- [matChipInputFor]=\"chips\" -->\n <ng-container *ngTemplateOutlet=\"templates()?.input || selectInput\"> </ng-container>\n\n @if (selectionPopup) {\n <button\n mat-icon-button\n type=\"button\"\n class=\"elder-control-icon-button elder-browse-icon\"\n [disabled]=\"isLocked\"\n (click)=\"openSelectionPopup($event)\"\n aria-label=\"Search\"\n elderStopEventPropagation\n tabIndex=\"-1\"\n >\n <mat-icon class=\"elder-mdc-control-icon\">search</mat-icon>\n </button>\n }\n </div>\n </mat-chip-set>\n</div>\n\n<ng-template #selectInput>\n <!-- mat-mdc-chip-input -->\n <elder-select\n autocomplete\n elderClearSelect\n class=\"elder-chip-input-select flex\"\n [data]=\"dataContextS()\"\n [disabled]=\"!!disabledS()\"\n [required]=\"!!requiredS()\"\n [readonly]=\"!!readonlyS()\"\n [placeholder]=\"!readonlyS() ? placeholderS() : undefined\"\n (entityUpdated)=\"appendEntity($event)\"\n [displayPropertyResolver]=\"displayPropertyResolverS()\"\n [valueTemplate]=\"valueTemplate\"\n [queryFilter]=\"queryFilter\"\n [filters]=\"filters\"\n [sorts]=\"sorts\"\n [isOptionDisabledFn]=\"isOptionDisabledInternalFn\"\n [isOptionHiddenFn]=\"isOptionHiddenInternalFn\"\n ></elder-select>\n</ng-template>\n\n<ng-template #simpleChipTemplate let-chipModel>\n <span\n class=\"elder-chip-text\"\n [matTooltip]=\"chipModel.displayText\"\n [matTooltipDisabled]=\"chipModel.displayText?.length < 20\"\n >{{ chipModel.displayText | elderTruncate: 20 }}\n </span>\n</ng-template>\n", styles: [""], dependencies: [{ kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: MatChipSet, selector: "mat-chip-set", inputs: ["disabled", "role", "tabIndex"] }, { kind: "directive", type: CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatChipRow, selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", inputs: ["editable"], outputs: ["edited"] }, { kind: "directive", type: ElderChipLabelDirective, selector: "[elderChipLabel]", inputs: ["stateColor", "levelColor", "namedColor", "color", "chipSize"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: MatChipAvatar, selector: "mat-chip-avatar, [matChipAvatar]" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: MatChipTrailingIcon, selector: "mat-chip-trailing-icon, [matChipTrailingIcon]" }, { kind: "directive", type: MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "directive", type: ElderStopEventPropagationDirective, selector: "[elderStopEventPropagation]" }, { kind: "component", type: ElderSelectComponent, selector: "elder-select", inputs: ["nullDisplay", "autocomplete", "allowNull", "entity", "entityId"], outputs: ["entityIdChange", "entityIdUpdated", "entityChange", "entityUpdated", "entity"] }, { kind: "directive", type: ElderClearSelectDirective, selector: "[elderClearSelect]" }, { kind: "pipe", type: ElderTruncatePipe, name: "elderTruncate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
25738
25760
|
}
|
|
25739
25761
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: ElderMultiSelectChipsComponent, decorators: [{
|
|
25740
25762
|
type: Component,
|
|
@@ -25761,7 +25783,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
|
|
|
25761
25783
|
ElderSelectComponent,
|
|
25762
25784
|
ElderClearSelectDirective,
|
|
25763
25785
|
ElderTruncatePipe,
|
|
25764
|
-
], template: "<div class=\"elder-flex-control\" [matTooltip]=\"state()?.error\">\n <mat-chip-set\n #chips\n [class.mat-mdc-chip-set-stacked]=\"stacked\"\n cdkDropList\n [cdkDropListOrientation]=\"stacked ? 'vertical' : 'horizontal'\"\n (cdkDropListDropped)=\"drop($event)\"\n [cdkDropListDisabled]=\"!allowSorting\"\n >\n @if (icon) {\n <div class=\"elder-input-prefix-icon-container flex-none\">\n <mat-icon\n disabled\n class=\"elder-prefix-icon elder-mdc-control-icon elder-icon-small noselect\"\n [class.loading]=\"state()?.loading\"\n >\n {{ icon }}\n </mat-icon>\n </div>\n }\n\n @for (chipModel of selectChips(); track chipModel.id) {\n <mat-chip-row\n elderChipLabel\n highlighted\n class=\"noselect clickable-chip\"\n [value]=\"resolveChipValue(chipModel.value)\"\n [color]=\"chipModel.colorSpec?.themeColor\"\n [levelColor]=\"chipModel.colorSpec?.levelColor\"\n [stateColor]=\"chipModel.colorSpec?.stateColor\"\n [namedColor]=\"chipModel.colorSpec?.namedColor\"\n [removable]=\"chipModel.removable\"\n (keydown)=\"onChipKeyDown($event, chipModel.value)\"\n (click)=\"onCurrentClicked(chipModel.value)\"\n cdkDrag\n [cdkDragData]=\"chipModel.value\"\n [cdkDragDisabled]=\"!allowSorting\"\n >\n @if (templates()?.avatar && !chipModel.avatarSpec?.hide) {\n <mat-chip-avatar [class.chip-avatar-xl]=\"chipModel.avatarSpec?.large\">\n <ng-container *ngTemplateOutlet=\"templates().avatar; context: { $implicit: chipModel }\">\n </ng-container>\n </mat-chip-avatar>\n }\n\n <ng-container\n *ngTemplateOutlet=\"\n templates()?.chip || simpleChipTemplate;\n context: { $implicit: chipModel }\n \"\n >\n </ng-container>\n\n @if (chipModel.trailingSpec?.icon; as trailingIcon) {\n <mat-icon\n matChipTrailingIcon\n class=\"elder-trailing-icon\"\n [fontSet]=\"chipModel.trailingSpec?.iconFontSet\"\n >{{ trailingIcon }}</mat-icon\n >\n }\n\n @if (chipModel.removable) {\n <mat-icon matChipRemove (click)=\"onClickRemoveChip($event, chipModel.value)\">\n cancel\n </mat-icon>\n }\n </mat-chip-row>\n }\n\n <div class=\"layout-row place-start-center elder-chip-input\">\n <!-- [matChipInputFor]=\"chips\" -->\n <ng-container *ngTemplateOutlet=\"templates()?.input || selectInput\"> </ng-container>\n\n @if (selectionPopup) {\n <button\n mat-icon-button\n type=\"button\"\n class=\"elder-control-icon-button elder-browse-icon\"\n [disabled]=\"isLocked\"\n (click)=\"openSelectionPopup($event)\"\n aria-label=\"Search\"\n elderStopEventPropagation\n tabIndex=\"-1\"\n >\n <mat-icon class=\"elder-mdc-control-icon\">search</mat-icon>\n </button>\n }\n </div>\n </mat-chip-set>\n</div>\n\n<ng-template #selectInput>\n <!-- mat-mdc-chip-input -->\n <elder-select\n autocomplete\n elderClearSelect\n class=\"elder-chip-input-select flex\"\n [data]=\"dataContextS()\"\n [disabled]=\"!!
|
|
25786
|
+
], template: "<div class=\"elder-flex-control\" [matTooltip]=\"state()?.error\">\n <mat-chip-set\n #chips\n [class.mat-mdc-chip-set-stacked]=\"stacked\"\n cdkDropList\n [cdkDropListOrientation]=\"stacked ? 'vertical' : 'horizontal'\"\n (cdkDropListDropped)=\"drop($event)\"\n [cdkDropListDisabled]=\"!allowSorting\"\n >\n @if (icon) {\n <div class=\"elder-input-prefix-icon-container flex-none\">\n <mat-icon\n disabled\n class=\"elder-prefix-icon elder-mdc-control-icon elder-icon-small noselect\"\n [class.loading]=\"state()?.loading\"\n >\n {{ icon }}\n </mat-icon>\n </div>\n }\n\n @for (chipModel of selectChips(); track chipModel.id) {\n <mat-chip-row\n elderChipLabel\n highlighted\n class=\"noselect clickable-chip\"\n [value]=\"resolveChipValue(chipModel.value)\"\n [color]=\"chipModel.colorSpec?.themeColor\"\n [levelColor]=\"chipModel.colorSpec?.levelColor\"\n [stateColor]=\"chipModel.colorSpec?.stateColor\"\n [namedColor]=\"chipModel.colorSpec?.namedColor\"\n [removable]=\"chipModel.removable\"\n (keydown)=\"onChipKeyDown($event, chipModel.value)\"\n (click)=\"onCurrentClicked(chipModel.value)\"\n cdkDrag\n [cdkDragData]=\"chipModel.value\"\n [cdkDragDisabled]=\"!allowSorting\"\n >\n @if (templates()?.avatar && !chipModel.avatarSpec?.hide) {\n <mat-chip-avatar [class.chip-avatar-xl]=\"chipModel.avatarSpec?.large\">\n <ng-container *ngTemplateOutlet=\"templates().avatar; context: { $implicit: chipModel }\">\n </ng-container>\n </mat-chip-avatar>\n }\n\n <ng-container\n *ngTemplateOutlet=\"\n templates()?.chip || simpleChipTemplate;\n context: { $implicit: chipModel }\n \"\n >\n </ng-container>\n\n @if (chipModel.trailingSpec?.icon; as trailingIcon) {\n <mat-icon\n matChipTrailingIcon\n class=\"elder-trailing-icon\"\n [fontSet]=\"chipModel.trailingSpec?.iconFontSet\"\n >{{ trailingIcon }}</mat-icon\n >\n }\n\n @if (chipModel.removable) {\n <mat-icon matChipRemove (click)=\"onClickRemoveChip($event, chipModel.value)\">\n cancel\n </mat-icon>\n }\n </mat-chip-row>\n }\n\n <div class=\"layout-row place-start-center elder-chip-input\">\n <!-- [matChipInputFor]=\"chips\" -->\n <ng-container *ngTemplateOutlet=\"templates()?.input || selectInput\"> </ng-container>\n\n @if (selectionPopup) {\n <button\n mat-icon-button\n type=\"button\"\n class=\"elder-control-icon-button elder-browse-icon\"\n [disabled]=\"isLocked\"\n (click)=\"openSelectionPopup($event)\"\n aria-label=\"Search\"\n elderStopEventPropagation\n tabIndex=\"-1\"\n >\n <mat-icon class=\"elder-mdc-control-icon\">search</mat-icon>\n </button>\n }\n </div>\n </mat-chip-set>\n</div>\n\n<ng-template #selectInput>\n <!-- mat-mdc-chip-input -->\n <elder-select\n autocomplete\n elderClearSelect\n class=\"elder-chip-input-select flex\"\n [data]=\"dataContextS()\"\n [disabled]=\"!!disabledS()\"\n [required]=\"!!requiredS()\"\n [readonly]=\"!!readonlyS()\"\n [placeholder]=\"!readonlyS() ? placeholderS() : undefined\"\n (entityUpdated)=\"appendEntity($event)\"\n [displayPropertyResolver]=\"displayPropertyResolverS()\"\n [valueTemplate]=\"valueTemplate\"\n [queryFilter]=\"queryFilter\"\n [filters]=\"filters\"\n [sorts]=\"sorts\"\n [isOptionDisabledFn]=\"isOptionDisabledInternalFn\"\n [isOptionHiddenFn]=\"isOptionHiddenInternalFn\"\n ></elder-select>\n</ng-template>\n\n<ng-template #simpleChipTemplate let-chipModel>\n <span\n class=\"elder-chip-text\"\n [matTooltip]=\"chipModel.displayText\"\n [matTooltipDisabled]=\"chipModel.displayText?.length < 20\"\n >{{ chipModel.displayText | elderTruncate: 20 }}\n </span>\n</ng-template>\n" }]
|
|
25765
25787
|
}], ctorParameters: () => [], propDecorators: { defaultChipSpec: [{
|
|
25766
25788
|
type: Input
|
|
25767
25789
|
}], chipSpecFn: [{
|