@elderbyte/ngx-starter 19.13.0 → 19.13.1
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.
|
@@ -15664,7 +15664,7 @@ class ElderDataViewItemDragDirective {
|
|
|
15664
15664
|
* *
|
|
15665
15665
|
**************************************************************************/
|
|
15666
15666
|
/** The item that is being dragged. */
|
|
15667
|
-
this.item = input.required({ alias: '
|
|
15667
|
+
this.item = input.required({ alias: 'elderDataViewItemDrag' });
|
|
15668
15668
|
/** Controls if the item can be dragged or not.
|
|
15669
15669
|
* We explicitly initialize with null and don't use booleanTransformFn since we need to know if the
|
|
15670
15670
|
* user defined this or if we should fall back to a superior predicate fn.
|
|
@@ -15706,12 +15706,12 @@ class ElderDataViewItemDragDirective {
|
|
|
15706
15706
|
}
|
|
15707
15707
|
}
|
|
15708
15708
|
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: "[
|
|
15709
|
+
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
15710
|
}
|
|
15711
15711
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: ElderDataViewItemDragDirective, decorators: [{
|
|
15712
15712
|
type: Directive,
|
|
15713
15713
|
args: [{
|
|
15714
|
-
selector: '[
|
|
15714
|
+
selector: '[elderDataViewItemDrag]',
|
|
15715
15715
|
hostDirectives: [CdkDrag], // adds cdkDrag to host
|
|
15716
15716
|
}]
|
|
15717
15717
|
}], ctorParameters: () => [{ type: DataViewDndControllerService, decorators: [{
|
|
@@ -17193,7 +17193,7 @@ class ElderTableComponent extends ElderDataViewBaseComponent {
|
|
|
17193
17193
|
provide: ELDER_DATA_VIEW,
|
|
17194
17194
|
useExisting: forwardRef(() => ElderTableComponent),
|
|
17195
17195
|
},
|
|
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 [
|
|
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 [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
17197
|
}
|
|
17198
17198
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: ElderTableComponent, decorators: [{
|
|
17199
17199
|
type: Component,
|
|
@@ -17229,7 +17229,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
|
|
|
17229
17229
|
ElderTableDropListConnectorDirective,
|
|
17230
17230
|
ElderTableSelectionCellComponent,
|
|
17231
17231
|
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 [
|
|
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 [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
17233
|
}], ctorParameters: () => [{ type: ElderTableModel }, { type: SelectionModel, decorators: [{
|
|
17234
17234
|
type: Optional
|
|
17235
17235
|
}] }, { type: ElderDataViewOptionsProvider, decorators: [{
|
|
@@ -25734,7 +25734,7 @@ class ElderMultiSelectChipsComponent extends ElderMultiSelectBase {
|
|
|
25734
25734
|
provide: ELDER_SELECT_BASE,
|
|
25735
25735
|
useExisting: forwardRef(() => ElderMultiSelectChipsComponent),
|
|
25736
25736
|
},
|
|
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]=\"!!
|
|
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]=\"!!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
25738
|
}
|
|
25739
25739
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: ElderMultiSelectChipsComponent, decorators: [{
|
|
25740
25740
|
type: Component,
|
|
@@ -25761,7 +25761,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
|
|
|
25761
25761
|
ElderSelectComponent,
|
|
25762
25762
|
ElderClearSelectDirective,
|
|
25763
25763
|
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]=\"!!
|
|
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]=\"!!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
25765
|
}], ctorParameters: () => [], propDecorators: { defaultChipSpec: [{
|
|
25766
25766
|
type: Input
|
|
25767
25767
|
}], chipSpecFn: [{
|