@elderbyte/ngx-starter 14.5.0 → 14.5.3
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/esm2020/lib/components/data-view/grid/elder-grid/elder-grid.component.mjs +2 -2
- package/esm2020/lib/components/select/elder-select.module.mjs +1 -1
- package/esm2020/lib/components/select/multi/elder-multi-select-chips/elder-multi-select-chips.component.mjs +24 -16
- package/fesm2015/elderbyte-ngx-starter.mjs +24 -16
- package/fesm2015/elderbyte-ngx-starter.mjs.map +1 -1
- package/fesm2020/elderbyte-ngx-starter.mjs +24 -16
- package/fesm2020/elderbyte-ngx-starter.mjs.map +1 -1
- package/lib/components/select/elder-select.module.d.ts +1 -1
- package/lib/components/select/multi/elder-multi-select-chips/elder-multi-select-chips.component.d.ts +21 -5
- package/package.json +1 -1
- package/src/lib/components/data-view/grid/elder-grid/elder-grid.component.scss +10 -2
- package/src/lib/components/select/multi/elder-multi-select-chips/elder-multi-select-chips.component.scss +8 -0
|
@@ -15535,7 +15535,7 @@ ElderGridComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", ver
|
|
|
15535
15535
|
provide: ELDER_DATA_VIEW,
|
|
15536
15536
|
useExisting: forwardRef(() => ElderGridComponent)
|
|
15537
15537
|
}
|
|
15538
|
-
], 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: "virtualScrollViewPort", first: true, predicate: ["virtualScrollViewPort"], descendants: true, static: true }, { propertyName: "matPaginator", first: true, predicate: MatPaginator, descendants: true }], usesInheritance: true, ngImport: i0, template: "<div fxLayout=\"column\" class=\"scroll-fix\" fxFill>\n\n <!-- Grid Browser -->\n <div fxLayout=\"column\" fxFlex\n class=\"scroll-fix elder-grid-container\"\n *ngIf=\"dataContext$ | async as data\"\n [class.elder-mat-table-container]=\"!embedded\"\n [class.mat-elevation-z5]=\"float\"\n [class.elder-mat-table-flat]=\"!embedded && !float\"\n\n [elderDataContextSelection]=\"data\" #dataSelection=\"elderDataContextSelection\"\n [elderDataContextSelectionModel]=\"selectionModel\"\n >\n\n <!-- Toolbar Row -->\n <div *ngIf=\"toolbarVisible\"\n fxLayout=\"row\" fxLayoutAlign=\"start center\" fxFlex=\"none\" class=\"elder-grid-toolbar\">\n\n <div fxLayout=\"column\" fxFlex=\"none\" style=\"padding-left: 8px; padding-right: 8px\" *ngIf=\"selectionVisible\">\n <elder-selection-master-checkbox fxFlex=\"none\" style=\"padding-left: 12px\"></elder-selection-master-checkbox>\n </div>\n\n <!-- Toolbar -->\n <ng-container *ngIf=\"toolbarTemplate\">\n <ng-template *ngTemplateOutlet=\"toolbarTemplate; context: {$implicit: this}\"></ng-template>\n </ng-container>\n\n <elder-single-sort *ngIf=\"availableSorts && availableSorts.length > 0 && data.sort.sorts | async as sorts\"\n fxFlex=\"none\"\n [availableSorts]=\"availableSorts\"\n [translationPrefix]=\"sortTranslationPrefix\"\n [sort]=\"sorts[0]\"\n (sortChange)=\"updateSort($event)\">\n </elder-single-sort>\n\n </div>\n\n <mat-divider *ngIf=\"toolbarVisible\"></mat-divider>\n\n <elder-data-context-state-indicator fxFlex=\"none\" [dataContext]=\"data\">\n </elder-data-context-state-indicator>\n\n <!-- [cdkDropListSortingDisabled]=\"true\" -->\n <!-- cdkDropList -->\n <cdk-virtual-scroll-viewport\n class=\"elder-grid-browser\" fxLayout=\"column\" fxFlex\n id=\"documents-container\"\n [itemSize]=\"itemHeight\"\n [minBufferPx]=\"itemHeight * 2\"\n [maxBufferPx]=\"itemHeight * 3\"\n #virtualScrollViewPort\n infiniteScroll\n [eventThrottle]=\"200\"\n [offsetFactor]=\"2\"\n [ignoreScrollEvent]=\"data.loading | async\"\n [containerId]=\"'documents-container'\" [listenToHost]=\"false\"\n (closeToEnd)=\"requestMoreDataZoned($event)\">\n\n <!-- (scrolling)=\"onScrolling($event)\" -->\n\n <div\n *cdkVirtualFor=\"let row of dataRows$; trackBy: trackByIndex; templateCacheSize: 50\"\n class=\"elder-grid-tile-row\"\n [style.height]=\"itemHeight + 'px'\">\n\n <ng-container *ngFor=\"let tile of row; trackBy: trackByFn\">\n\n <!-- Tile Cell -->\n <div *ngIf=\"showTile(tile)\" class=\"elder-grid-tile\">\n <!-- cdkDrag [cdkDragDisabled]=\"true\" [cdkDragData]=\"tile\" -->\n <!-- <div class=\"tile-placeholder\" *cdkDragPlaceholder></div> -->\n <div class=\"elder-grid-tile-content\"\n (click)=\"onItemClick(tile)\"\n (dblclick)=\"onItemDoubleClick(tile)\">\n <ng-container\n *ngTemplateOutlet=\"tileTemplate || simpleTileTemplate; context: {$implicit: tile}\">\n </ng-container>\n\n <!-- Overlay (Selection) -->\n <ng-container *ngIf=\"selectionVisible\">\n <div *ngIf=\"selectionModel.selection | async as selection\"\n class=\"elder-grid-tile-overlay\"\n [class.elder-grid-tile-overlay-hidden]=\"!inSelectionMode(selection)\"\n [class.elder-grid-tile-overlay-visible]=\"inSelectionMode(selection)\"\n [class.elder-click-through]=\"true\"\n >\n <button mat-icon-button type=\"button\"\n (click)=\"selectionModel.toggle(tile)\" elderStopEventPropagation\n class=\"elder-grid-tile-check\">\n <mat-icon\n [class.elder-selected]=\"(selectionModel.observeSelection(tile) | async)\"\n >\n {{(selectionModel.observeSelection(tile) | async) ? 'check_circle' : 'radio_button_unchecked'}}\n </mat-icon>\n </button>\n </div>\n </ng-container>\n\n </div>\n </div>\n\n <div *ngIf=\"!showTile(tile)\" class=\"elder-grid-tile-hidden\"></div>\n </ng-container>\n\n </div>\n\n </cdk-virtual-scroll-viewport>\n\n\n <mat-progress-bar fxFlex=\"none\"\n [mode]=\"(data?.loading | async) ? 'indeterminate' : 'determinate'\"\n [color]=\"(data && (data.status | async)?.hasError) ? 'warn' : 'primary'\">\n </mat-progress-bar>\n\n <!-- Footer -->\n <div class=\"elder-grid-footer\" *ngIf=\"footerVisible\"\n fxLayout=\"row\" fxFlex=\"none\" fxLayoutAlign=\"end center\" fxLayoutGap=\"10px\"\n style=\"padding-right: 10px\">\n\n <!-- Continuable -->\n <ng-container *ngIf=\"isContinuable\">\n <span class=\"mat-caption noselect\" style=\"color: gray\">\n {{(dataSnapshot?.data | async)?.length}} / {{total$ | async}}\n </span>\n\n <button mat-icon-button type=\"button\"\n color=\"primary\"\n [disabled]=\"!(canLoadMore$ | async)\"\n (click)=\"dataSnapshot.loadMore()\">\n <mat-icon>keyboard_arrow_down</mat-icon>\n </button>\n </ng-container>\n\n <!-- Paged -->\n <mat-paginator #matPaginator *ngIf=\"isActivePaged && (dataActivePaged.page | async) as page\"\n fxFlex=\"none\"\n [length]=\"dataContext?.total | async\"\n [pageIndex]=\"page?.index\"\n [pageSize]=\"page?.size\"\n [pageSizeOptions]=\"pageSizeOptions\">\n </mat-paginator>\n\n <!-- Local Source -->\n <ng-container *ngIf=\"!isActivePaged && !isContinuable\">\n <span class=\"mat-caption noselect\" style=\"color: gray\">\n {{(dataSnapshot?.data | async)?.length}}\n </span>\n </ng-container>\n\n </div>\n\n\n </div>\n</div>\n\n<ng-template #simpleTileTemplate let-tile>\n <div *ngIf=\"tile\" fxLayout=\"column\" fxFlex fxLayoutAlign=\"center center\" style=\"background-color: lightblue\">\n <p class=\"noselect\">Tile: {{tile}}</p>\n </div>\n</ng-template>\n", styles: [":host{min-width:0;min-height:0}.scroll-fix{min-width:0;min-height:0}.elder-grid-tile-row{display:flex;flex-direction:row;padding:2px;margin:0 -2px}.elder-grid-tile-hidden{flex:0 1 100%;margin:2px;width:100%;height:100%}.elder-grid-tile-content{position:relative;width:100%;height:100%;overflow:hidden}.cdk-drag-preview{box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-placeholder{flex:0 1 100%;background:#ccc;border:dotted 3px #999;min-height:60px;transition:transform .25s cubic-bezier(0,0,.2,1)}.elder-grid-tile-overlay{position:absolute;left:0;top:0;right:0;bottom:0;transition:background-color .1s ease-in,opacity .1s ease-in}.elder-grid-tile-overlay-visible{opacity:1}.elder-grid-tile-overlay-hidden{opacity:0}.elder-click-through{pointer-events:none}\n"], dependencies: [{ kind: "directive", type: i1$4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i3$3.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "component", type: i4$2.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i5.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button], button[mat-fab], button[mat-mini-fab], button[mat-stroked-button], button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i9.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i9.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i9.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "directive", type: i2$3.DefaultLayoutDirective, selector: " [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md], [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md], [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm], [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i2$3.DefaultLayoutGapDirective, selector: " [fxLayoutGap], [fxLayoutGap.xs], [fxLayoutGap.sm], [fxLayoutGap.md], [fxLayoutGap.lg], [fxLayoutGap.xl], [fxLayoutGap.lt-sm], [fxLayoutGap.lt-md], [fxLayoutGap.lt-lg], [fxLayoutGap.lt-xl], [fxLayoutGap.gt-xs], [fxLayoutGap.gt-sm], [fxLayoutGap.gt-md], [fxLayoutGap.gt-lg]", inputs: ["fxLayoutGap", "fxLayoutGap.xs", "fxLayoutGap.sm", "fxLayoutGap.md", "fxLayoutGap.lg", "fxLayoutGap.xl", "fxLayoutGap.lt-sm", "fxLayoutGap.lt-md", "fxLayoutGap.lt-lg", "fxLayoutGap.lt-xl", "fxLayoutGap.gt-xs", "fxLayoutGap.gt-sm", "fxLayoutGap.gt-md", "fxLayoutGap.gt-lg"] }, { kind: "directive", type: i2$3.DefaultLayoutAlignDirective, selector: " [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md], [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md], [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm], [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "directive", type: i2$3.FlexFillDirective, selector: "[fxFill], [fxFlexFill]" }, { kind: "directive", type: i2$3.DefaultFlexDirective, selector: " [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md], [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md], [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm], [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "component", type: ElderSingleSortComponent, selector: "elder-single-sort", inputs: ["availableSorts", "translationPrefix", "sort"], outputs: ["sortChange"] }, { kind: "component", type: ElderSelectionMasterCheckboxComponent, selector: "elder-selection-master-checkbox" }, { kind: "directive", type: DataContextSelectionDirective, selector: "[elderDataContextSelection]", inputs: ["elderDataContextSelectionModel", "elderDataContextSelection"], exportAs: ["elderDataContextSelection"] }, { kind: "component", type: DataContextStateIndicatorComponent, selector: "elder-data-context-state-indicator", inputs: ["dataContext"] }, { kind: "directive", type: ElderInfiniteScrollLegacyDirective, selector: "[infiniteScroll]" }, { kind: "directive", type: ElderStopEventPropagationDirective, selector: "[elderStopEventPropagation]" }, { kind: "component", type: i12.MatPaginator, selector: "mat-paginator", inputs: ["disabled"], exportAs: ["matPaginator"] }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
15538
|
+
], 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: "virtualScrollViewPort", first: true, predicate: ["virtualScrollViewPort"], descendants: true, static: true }, { propertyName: "matPaginator", first: true, predicate: MatPaginator, descendants: true }], usesInheritance: true, ngImport: i0, template: "<div fxLayout=\"column\" class=\"scroll-fix\" fxFill>\n\n <!-- Grid Browser -->\n <div fxLayout=\"column\" fxFlex\n class=\"scroll-fix elder-grid-container\"\n *ngIf=\"dataContext$ | async as data\"\n [class.elder-mat-table-container]=\"!embedded\"\n [class.mat-elevation-z5]=\"float\"\n [class.elder-mat-table-flat]=\"!embedded && !float\"\n\n [elderDataContextSelection]=\"data\" #dataSelection=\"elderDataContextSelection\"\n [elderDataContextSelectionModel]=\"selectionModel\"\n >\n\n <!-- Toolbar Row -->\n <div *ngIf=\"toolbarVisible\"\n fxLayout=\"row\" fxLayoutAlign=\"start center\" fxFlex=\"none\" class=\"elder-grid-toolbar\">\n\n <div fxLayout=\"column\" fxFlex=\"none\" style=\"padding-left: 8px; padding-right: 8px\" *ngIf=\"selectionVisible\">\n <elder-selection-master-checkbox fxFlex=\"none\" style=\"padding-left: 12px\"></elder-selection-master-checkbox>\n </div>\n\n <!-- Toolbar -->\n <ng-container *ngIf=\"toolbarTemplate\">\n <ng-template *ngTemplateOutlet=\"toolbarTemplate; context: {$implicit: this}\"></ng-template>\n </ng-container>\n\n <elder-single-sort *ngIf=\"availableSorts && availableSorts.length > 0 && data.sort.sorts | async as sorts\"\n fxFlex=\"none\"\n [availableSorts]=\"availableSorts\"\n [translationPrefix]=\"sortTranslationPrefix\"\n [sort]=\"sorts[0]\"\n (sortChange)=\"updateSort($event)\">\n </elder-single-sort>\n\n </div>\n\n <mat-divider *ngIf=\"toolbarVisible\"></mat-divider>\n\n <elder-data-context-state-indicator fxFlex=\"none\" [dataContext]=\"data\">\n </elder-data-context-state-indicator>\n\n <!-- [cdkDropListSortingDisabled]=\"true\" -->\n <!-- cdkDropList -->\n <cdk-virtual-scroll-viewport\n class=\"elder-grid-browser\" fxLayout=\"column\" fxFlex\n id=\"documents-container\"\n [itemSize]=\"itemHeight\"\n [minBufferPx]=\"itemHeight * 2\"\n [maxBufferPx]=\"itemHeight * 3\"\n #virtualScrollViewPort\n infiniteScroll\n [eventThrottle]=\"200\"\n [offsetFactor]=\"2\"\n [ignoreScrollEvent]=\"data.loading | async\"\n [containerId]=\"'documents-container'\" [listenToHost]=\"false\"\n (closeToEnd)=\"requestMoreDataZoned($event)\">\n\n <!-- (scrolling)=\"onScrolling($event)\" -->\n\n <div\n *cdkVirtualFor=\"let row of dataRows$; trackBy: trackByIndex; templateCacheSize: 50\"\n class=\"elder-grid-tile-row\"\n [style.height]=\"itemHeight + 'px'\">\n\n <ng-container *ngFor=\"let tile of row; trackBy: trackByFn\">\n\n <!-- Tile Cell -->\n <div *ngIf=\"showTile(tile)\" class=\"elder-grid-tile\">\n <!-- cdkDrag [cdkDragDisabled]=\"true\" [cdkDragData]=\"tile\" -->\n <!-- <div class=\"tile-placeholder\" *cdkDragPlaceholder></div> -->\n <div class=\"elder-grid-tile-content\"\n (click)=\"onItemClick(tile)\"\n (dblclick)=\"onItemDoubleClick(tile)\">\n <ng-container\n *ngTemplateOutlet=\"tileTemplate || simpleTileTemplate; context: {$implicit: tile}\">\n </ng-container>\n\n <!-- Overlay (Selection) -->\n <ng-container *ngIf=\"selectionVisible\">\n <div *ngIf=\"selectionModel.selection | async as selection\"\n class=\"elder-grid-tile-overlay\"\n [class.elder-grid-tile-overlay-hidden]=\"!inSelectionMode(selection)\"\n [class.elder-grid-tile-overlay-visible]=\"inSelectionMode(selection)\"\n [class.elder-click-through]=\"true\"\n >\n <button mat-icon-button type=\"button\"\n (click)=\"selectionModel.toggle(tile)\" elderStopEventPropagation\n class=\"elder-grid-tile-check\">\n <mat-icon\n [class.elder-selected]=\"(selectionModel.observeSelection(tile) | async)\"\n >\n {{(selectionModel.observeSelection(tile) | async) ? 'check_circle' : 'radio_button_unchecked'}}\n </mat-icon>\n </button>\n </div>\n </ng-container>\n\n </div>\n </div>\n\n <div *ngIf=\"!showTile(tile)\" class=\"elder-grid-tile-hidden\"></div>\n </ng-container>\n\n </div>\n\n </cdk-virtual-scroll-viewport>\n\n\n <mat-progress-bar fxFlex=\"none\"\n [mode]=\"(data?.loading | async) ? 'indeterminate' : 'determinate'\"\n [color]=\"(data && (data.status | async)?.hasError) ? 'warn' : 'primary'\">\n </mat-progress-bar>\n\n <!-- Footer -->\n <div class=\"elder-grid-footer\" *ngIf=\"footerVisible\"\n fxLayout=\"row\" fxFlex=\"none\" fxLayoutAlign=\"end center\" fxLayoutGap=\"10px\"\n style=\"padding-right: 10px\">\n\n <!-- Continuable -->\n <ng-container *ngIf=\"isContinuable\">\n <span class=\"mat-caption noselect\" style=\"color: gray\">\n {{(dataSnapshot?.data | async)?.length}} / {{total$ | async}}\n </span>\n\n <button mat-icon-button type=\"button\"\n color=\"primary\"\n [disabled]=\"!(canLoadMore$ | async)\"\n (click)=\"dataSnapshot.loadMore()\">\n <mat-icon>keyboard_arrow_down</mat-icon>\n </button>\n </ng-container>\n\n <!-- Paged -->\n <mat-paginator #matPaginator *ngIf=\"isActivePaged && (dataActivePaged.page | async) as page\"\n fxFlex=\"none\"\n [length]=\"dataContext?.total | async\"\n [pageIndex]=\"page?.index\"\n [pageSize]=\"page?.size\"\n [pageSizeOptions]=\"pageSizeOptions\">\n </mat-paginator>\n\n <!-- Local Source -->\n <ng-container *ngIf=\"!isActivePaged && !isContinuable\">\n <span class=\"mat-caption noselect\" style=\"color: gray\">\n {{(dataSnapshot?.data | async)?.length}}\n </span>\n </ng-container>\n\n </div>\n\n\n </div>\n</div>\n\n<ng-template #simpleTileTemplate let-tile>\n <div *ngIf=\"tile\" fxLayout=\"column\" fxFlex fxLayoutAlign=\"center center\" style=\"background-color: lightblue\">\n <p class=\"noselect\">Tile: {{tile}}</p>\n </div>\n</ng-template>\n", styles: [":host{min-width:0;min-height:0}.scroll-fix{min-width:0;min-height:0}.elder-grid-tile-row{display:flex;flex-direction:row;padding:8px}.elder-grid-tile-row:first-child{padding-top:16px}.elder-grid-tile-hidden{flex:0 1 100%;margin:8px;width:100%;height:100%}.elder-grid-tile-content{position:relative;width:100%;height:100%;overflow:hidden}.cdk-drag-preview{box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-placeholder{flex:0 1 100%;background:#ccc;border:dotted 3px #999;min-height:60px;transition:transform .25s cubic-bezier(0,0,.2,1)}.elder-grid-tile-overlay{position:absolute;left:0;top:0;right:0;bottom:0;transition:background-color .1s ease-in,opacity .1s ease-in}.elder-grid-tile-overlay-visible{opacity:1}.elder-grid-tile-overlay-hidden{opacity:0}.elder-click-through{pointer-events:none}\n"], dependencies: [{ kind: "directive", type: i1$4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i3$3.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "component", type: i4$2.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i5.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button], button[mat-fab], button[mat-mini-fab], button[mat-stroked-button], button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i9.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i9.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i9.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "directive", type: i2$3.DefaultLayoutDirective, selector: " [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md], [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md], [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm], [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i2$3.DefaultLayoutGapDirective, selector: " [fxLayoutGap], [fxLayoutGap.xs], [fxLayoutGap.sm], [fxLayoutGap.md], [fxLayoutGap.lg], [fxLayoutGap.xl], [fxLayoutGap.lt-sm], [fxLayoutGap.lt-md], [fxLayoutGap.lt-lg], [fxLayoutGap.lt-xl], [fxLayoutGap.gt-xs], [fxLayoutGap.gt-sm], [fxLayoutGap.gt-md], [fxLayoutGap.gt-lg]", inputs: ["fxLayoutGap", "fxLayoutGap.xs", "fxLayoutGap.sm", "fxLayoutGap.md", "fxLayoutGap.lg", "fxLayoutGap.xl", "fxLayoutGap.lt-sm", "fxLayoutGap.lt-md", "fxLayoutGap.lt-lg", "fxLayoutGap.lt-xl", "fxLayoutGap.gt-xs", "fxLayoutGap.gt-sm", "fxLayoutGap.gt-md", "fxLayoutGap.gt-lg"] }, { kind: "directive", type: i2$3.DefaultLayoutAlignDirective, selector: " [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md], [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md], [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm], [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "directive", type: i2$3.FlexFillDirective, selector: "[fxFill], [fxFlexFill]" }, { kind: "directive", type: i2$3.DefaultFlexDirective, selector: " [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md], [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md], [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm], [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "component", type: ElderSingleSortComponent, selector: "elder-single-sort", inputs: ["availableSorts", "translationPrefix", "sort"], outputs: ["sortChange"] }, { kind: "component", type: ElderSelectionMasterCheckboxComponent, selector: "elder-selection-master-checkbox" }, { kind: "directive", type: DataContextSelectionDirective, selector: "[elderDataContextSelection]", inputs: ["elderDataContextSelectionModel", "elderDataContextSelection"], exportAs: ["elderDataContextSelection"] }, { kind: "component", type: DataContextStateIndicatorComponent, selector: "elder-data-context-state-indicator", inputs: ["dataContext"] }, { kind: "directive", type: ElderInfiniteScrollLegacyDirective, selector: "[infiniteScroll]" }, { kind: "directive", type: ElderStopEventPropagationDirective, selector: "[elderStopEventPropagation]" }, { kind: "component", type: i12.MatPaginator, selector: "mat-paginator", inputs: ["disabled"], exportAs: ["matPaginator"] }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
15539
15539
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: ElderGridComponent, decorators: [{
|
|
15540
15540
|
type: Component,
|
|
15541
15541
|
args: [{ selector: 'elder-grid', changeDetection: ChangeDetectionStrategy.OnPush, providers: [
|
|
@@ -15543,7 +15543,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.0", ngImpor
|
|
|
15543
15543
|
provide: ELDER_DATA_VIEW,
|
|
15544
15544
|
useExisting: forwardRef(() => ElderGridComponent)
|
|
15545
15545
|
}
|
|
15546
|
-
], template: "<div fxLayout=\"column\" class=\"scroll-fix\" fxFill>\n\n <!-- Grid Browser -->\n <div fxLayout=\"column\" fxFlex\n class=\"scroll-fix elder-grid-container\"\n *ngIf=\"dataContext$ | async as data\"\n [class.elder-mat-table-container]=\"!embedded\"\n [class.mat-elevation-z5]=\"float\"\n [class.elder-mat-table-flat]=\"!embedded && !float\"\n\n [elderDataContextSelection]=\"data\" #dataSelection=\"elderDataContextSelection\"\n [elderDataContextSelectionModel]=\"selectionModel\"\n >\n\n <!-- Toolbar Row -->\n <div *ngIf=\"toolbarVisible\"\n fxLayout=\"row\" fxLayoutAlign=\"start center\" fxFlex=\"none\" class=\"elder-grid-toolbar\">\n\n <div fxLayout=\"column\" fxFlex=\"none\" style=\"padding-left: 8px; padding-right: 8px\" *ngIf=\"selectionVisible\">\n <elder-selection-master-checkbox fxFlex=\"none\" style=\"padding-left: 12px\"></elder-selection-master-checkbox>\n </div>\n\n <!-- Toolbar -->\n <ng-container *ngIf=\"toolbarTemplate\">\n <ng-template *ngTemplateOutlet=\"toolbarTemplate; context: {$implicit: this}\"></ng-template>\n </ng-container>\n\n <elder-single-sort *ngIf=\"availableSorts && availableSorts.length > 0 && data.sort.sorts | async as sorts\"\n fxFlex=\"none\"\n [availableSorts]=\"availableSorts\"\n [translationPrefix]=\"sortTranslationPrefix\"\n [sort]=\"sorts[0]\"\n (sortChange)=\"updateSort($event)\">\n </elder-single-sort>\n\n </div>\n\n <mat-divider *ngIf=\"toolbarVisible\"></mat-divider>\n\n <elder-data-context-state-indicator fxFlex=\"none\" [dataContext]=\"data\">\n </elder-data-context-state-indicator>\n\n <!-- [cdkDropListSortingDisabled]=\"true\" -->\n <!-- cdkDropList -->\n <cdk-virtual-scroll-viewport\n class=\"elder-grid-browser\" fxLayout=\"column\" fxFlex\n id=\"documents-container\"\n [itemSize]=\"itemHeight\"\n [minBufferPx]=\"itemHeight * 2\"\n [maxBufferPx]=\"itemHeight * 3\"\n #virtualScrollViewPort\n infiniteScroll\n [eventThrottle]=\"200\"\n [offsetFactor]=\"2\"\n [ignoreScrollEvent]=\"data.loading | async\"\n [containerId]=\"'documents-container'\" [listenToHost]=\"false\"\n (closeToEnd)=\"requestMoreDataZoned($event)\">\n\n <!-- (scrolling)=\"onScrolling($event)\" -->\n\n <div\n *cdkVirtualFor=\"let row of dataRows$; trackBy: trackByIndex; templateCacheSize: 50\"\n class=\"elder-grid-tile-row\"\n [style.height]=\"itemHeight + 'px'\">\n\n <ng-container *ngFor=\"let tile of row; trackBy: trackByFn\">\n\n <!-- Tile Cell -->\n <div *ngIf=\"showTile(tile)\" class=\"elder-grid-tile\">\n <!-- cdkDrag [cdkDragDisabled]=\"true\" [cdkDragData]=\"tile\" -->\n <!-- <div class=\"tile-placeholder\" *cdkDragPlaceholder></div> -->\n <div class=\"elder-grid-tile-content\"\n (click)=\"onItemClick(tile)\"\n (dblclick)=\"onItemDoubleClick(tile)\">\n <ng-container\n *ngTemplateOutlet=\"tileTemplate || simpleTileTemplate; context: {$implicit: tile}\">\n </ng-container>\n\n <!-- Overlay (Selection) -->\n <ng-container *ngIf=\"selectionVisible\">\n <div *ngIf=\"selectionModel.selection | async as selection\"\n class=\"elder-grid-tile-overlay\"\n [class.elder-grid-tile-overlay-hidden]=\"!inSelectionMode(selection)\"\n [class.elder-grid-tile-overlay-visible]=\"inSelectionMode(selection)\"\n [class.elder-click-through]=\"true\"\n >\n <button mat-icon-button type=\"button\"\n (click)=\"selectionModel.toggle(tile)\" elderStopEventPropagation\n class=\"elder-grid-tile-check\">\n <mat-icon\n [class.elder-selected]=\"(selectionModel.observeSelection(tile) | async)\"\n >\n {{(selectionModel.observeSelection(tile) | async) ? 'check_circle' : 'radio_button_unchecked'}}\n </mat-icon>\n </button>\n </div>\n </ng-container>\n\n </div>\n </div>\n\n <div *ngIf=\"!showTile(tile)\" class=\"elder-grid-tile-hidden\"></div>\n </ng-container>\n\n </div>\n\n </cdk-virtual-scroll-viewport>\n\n\n <mat-progress-bar fxFlex=\"none\"\n [mode]=\"(data?.loading | async) ? 'indeterminate' : 'determinate'\"\n [color]=\"(data && (data.status | async)?.hasError) ? 'warn' : 'primary'\">\n </mat-progress-bar>\n\n <!-- Footer -->\n <div class=\"elder-grid-footer\" *ngIf=\"footerVisible\"\n fxLayout=\"row\" fxFlex=\"none\" fxLayoutAlign=\"end center\" fxLayoutGap=\"10px\"\n style=\"padding-right: 10px\">\n\n <!-- Continuable -->\n <ng-container *ngIf=\"isContinuable\">\n <span class=\"mat-caption noselect\" style=\"color: gray\">\n {{(dataSnapshot?.data | async)?.length}} / {{total$ | async}}\n </span>\n\n <button mat-icon-button type=\"button\"\n color=\"primary\"\n [disabled]=\"!(canLoadMore$ | async)\"\n (click)=\"dataSnapshot.loadMore()\">\n <mat-icon>keyboard_arrow_down</mat-icon>\n </button>\n </ng-container>\n\n <!-- Paged -->\n <mat-paginator #matPaginator *ngIf=\"isActivePaged && (dataActivePaged.page | async) as page\"\n fxFlex=\"none\"\n [length]=\"dataContext?.total | async\"\n [pageIndex]=\"page?.index\"\n [pageSize]=\"page?.size\"\n [pageSizeOptions]=\"pageSizeOptions\">\n </mat-paginator>\n\n <!-- Local Source -->\n <ng-container *ngIf=\"!isActivePaged && !isContinuable\">\n <span class=\"mat-caption noselect\" style=\"color: gray\">\n {{(dataSnapshot?.data | async)?.length}}\n </span>\n </ng-container>\n\n </div>\n\n\n </div>\n</div>\n\n<ng-template #simpleTileTemplate let-tile>\n <div *ngIf=\"tile\" fxLayout=\"column\" fxFlex fxLayoutAlign=\"center center\" style=\"background-color: lightblue\">\n <p class=\"noselect\">Tile: {{tile}}</p>\n </div>\n</ng-template>\n", styles: [":host{min-width:0;min-height:0}.scroll-fix{min-width:0;min-height:0}.elder-grid-tile-row{display:flex;flex-direction:row;padding:
|
|
15546
|
+
], template: "<div fxLayout=\"column\" class=\"scroll-fix\" fxFill>\n\n <!-- Grid Browser -->\n <div fxLayout=\"column\" fxFlex\n class=\"scroll-fix elder-grid-container\"\n *ngIf=\"dataContext$ | async as data\"\n [class.elder-mat-table-container]=\"!embedded\"\n [class.mat-elevation-z5]=\"float\"\n [class.elder-mat-table-flat]=\"!embedded && !float\"\n\n [elderDataContextSelection]=\"data\" #dataSelection=\"elderDataContextSelection\"\n [elderDataContextSelectionModel]=\"selectionModel\"\n >\n\n <!-- Toolbar Row -->\n <div *ngIf=\"toolbarVisible\"\n fxLayout=\"row\" fxLayoutAlign=\"start center\" fxFlex=\"none\" class=\"elder-grid-toolbar\">\n\n <div fxLayout=\"column\" fxFlex=\"none\" style=\"padding-left: 8px; padding-right: 8px\" *ngIf=\"selectionVisible\">\n <elder-selection-master-checkbox fxFlex=\"none\" style=\"padding-left: 12px\"></elder-selection-master-checkbox>\n </div>\n\n <!-- Toolbar -->\n <ng-container *ngIf=\"toolbarTemplate\">\n <ng-template *ngTemplateOutlet=\"toolbarTemplate; context: {$implicit: this}\"></ng-template>\n </ng-container>\n\n <elder-single-sort *ngIf=\"availableSorts && availableSorts.length > 0 && data.sort.sorts | async as sorts\"\n fxFlex=\"none\"\n [availableSorts]=\"availableSorts\"\n [translationPrefix]=\"sortTranslationPrefix\"\n [sort]=\"sorts[0]\"\n (sortChange)=\"updateSort($event)\">\n </elder-single-sort>\n\n </div>\n\n <mat-divider *ngIf=\"toolbarVisible\"></mat-divider>\n\n <elder-data-context-state-indicator fxFlex=\"none\" [dataContext]=\"data\">\n </elder-data-context-state-indicator>\n\n <!-- [cdkDropListSortingDisabled]=\"true\" -->\n <!-- cdkDropList -->\n <cdk-virtual-scroll-viewport\n class=\"elder-grid-browser\" fxLayout=\"column\" fxFlex\n id=\"documents-container\"\n [itemSize]=\"itemHeight\"\n [minBufferPx]=\"itemHeight * 2\"\n [maxBufferPx]=\"itemHeight * 3\"\n #virtualScrollViewPort\n infiniteScroll\n [eventThrottle]=\"200\"\n [offsetFactor]=\"2\"\n [ignoreScrollEvent]=\"data.loading | async\"\n [containerId]=\"'documents-container'\" [listenToHost]=\"false\"\n (closeToEnd)=\"requestMoreDataZoned($event)\">\n\n <!-- (scrolling)=\"onScrolling($event)\" -->\n\n <div\n *cdkVirtualFor=\"let row of dataRows$; trackBy: trackByIndex; templateCacheSize: 50\"\n class=\"elder-grid-tile-row\"\n [style.height]=\"itemHeight + 'px'\">\n\n <ng-container *ngFor=\"let tile of row; trackBy: trackByFn\">\n\n <!-- Tile Cell -->\n <div *ngIf=\"showTile(tile)\" class=\"elder-grid-tile\">\n <!-- cdkDrag [cdkDragDisabled]=\"true\" [cdkDragData]=\"tile\" -->\n <!-- <div class=\"tile-placeholder\" *cdkDragPlaceholder></div> -->\n <div class=\"elder-grid-tile-content\"\n (click)=\"onItemClick(tile)\"\n (dblclick)=\"onItemDoubleClick(tile)\">\n <ng-container\n *ngTemplateOutlet=\"tileTemplate || simpleTileTemplate; context: {$implicit: tile}\">\n </ng-container>\n\n <!-- Overlay (Selection) -->\n <ng-container *ngIf=\"selectionVisible\">\n <div *ngIf=\"selectionModel.selection | async as selection\"\n class=\"elder-grid-tile-overlay\"\n [class.elder-grid-tile-overlay-hidden]=\"!inSelectionMode(selection)\"\n [class.elder-grid-tile-overlay-visible]=\"inSelectionMode(selection)\"\n [class.elder-click-through]=\"true\"\n >\n <button mat-icon-button type=\"button\"\n (click)=\"selectionModel.toggle(tile)\" elderStopEventPropagation\n class=\"elder-grid-tile-check\">\n <mat-icon\n [class.elder-selected]=\"(selectionModel.observeSelection(tile) | async)\"\n >\n {{(selectionModel.observeSelection(tile) | async) ? 'check_circle' : 'radio_button_unchecked'}}\n </mat-icon>\n </button>\n </div>\n </ng-container>\n\n </div>\n </div>\n\n <div *ngIf=\"!showTile(tile)\" class=\"elder-grid-tile-hidden\"></div>\n </ng-container>\n\n </div>\n\n </cdk-virtual-scroll-viewport>\n\n\n <mat-progress-bar fxFlex=\"none\"\n [mode]=\"(data?.loading | async) ? 'indeterminate' : 'determinate'\"\n [color]=\"(data && (data.status | async)?.hasError) ? 'warn' : 'primary'\">\n </mat-progress-bar>\n\n <!-- Footer -->\n <div class=\"elder-grid-footer\" *ngIf=\"footerVisible\"\n fxLayout=\"row\" fxFlex=\"none\" fxLayoutAlign=\"end center\" fxLayoutGap=\"10px\"\n style=\"padding-right: 10px\">\n\n <!-- Continuable -->\n <ng-container *ngIf=\"isContinuable\">\n <span class=\"mat-caption noselect\" style=\"color: gray\">\n {{(dataSnapshot?.data | async)?.length}} / {{total$ | async}}\n </span>\n\n <button mat-icon-button type=\"button\"\n color=\"primary\"\n [disabled]=\"!(canLoadMore$ | async)\"\n (click)=\"dataSnapshot.loadMore()\">\n <mat-icon>keyboard_arrow_down</mat-icon>\n </button>\n </ng-container>\n\n <!-- Paged -->\n <mat-paginator #matPaginator *ngIf=\"isActivePaged && (dataActivePaged.page | async) as page\"\n fxFlex=\"none\"\n [length]=\"dataContext?.total | async\"\n [pageIndex]=\"page?.index\"\n [pageSize]=\"page?.size\"\n [pageSizeOptions]=\"pageSizeOptions\">\n </mat-paginator>\n\n <!-- Local Source -->\n <ng-container *ngIf=\"!isActivePaged && !isContinuable\">\n <span class=\"mat-caption noselect\" style=\"color: gray\">\n {{(dataSnapshot?.data | async)?.length}}\n </span>\n </ng-container>\n\n </div>\n\n\n </div>\n</div>\n\n<ng-template #simpleTileTemplate let-tile>\n <div *ngIf=\"tile\" fxLayout=\"column\" fxFlex fxLayoutAlign=\"center center\" style=\"background-color: lightblue\">\n <p class=\"noselect\">Tile: {{tile}}</p>\n </div>\n</ng-template>\n", styles: [":host{min-width:0;min-height:0}.scroll-fix{min-width:0;min-height:0}.elder-grid-tile-row{display:flex;flex-direction:row;padding:8px}.elder-grid-tile-row:first-child{padding-top:16px}.elder-grid-tile-hidden{flex:0 1 100%;margin:8px;width:100%;height:100%}.elder-grid-tile-content{position:relative;width:100%;height:100%;overflow:hidden}.cdk-drag-preview{box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-placeholder{flex:0 1 100%;background:#ccc;border:dotted 3px #999;min-height:60px;transition:transform .25s cubic-bezier(0,0,.2,1)}.elder-grid-tile-overlay{position:absolute;left:0;top:0;right:0;bottom:0;transition:background-color .1s ease-in,opacity .1s ease-in}.elder-grid-tile-overlay-visible{opacity:1}.elder-grid-tile-overlay-hidden{opacity:0}.elder-click-through{pointer-events:none}\n"] }]
|
|
15547
15547
|
}], ctorParameters: function () {
|
|
15548
15548
|
return [{ type: SelectionModel, decorators: [{
|
|
15549
15549
|
type: Optional
|
|
@@ -23115,11 +23115,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.0", ngImpor
|
|
|
23115
23115
|
} });
|
|
23116
23116
|
|
|
23117
23117
|
class ChipModel {
|
|
23118
|
-
constructor(value, displayText, color, removeable) {
|
|
23118
|
+
constructor(value, displayText, color, removeable, avatarSpec) {
|
|
23119
23119
|
this.value = value;
|
|
23120
23120
|
this.displayText = displayText;
|
|
23121
23121
|
this.color = color;
|
|
23122
23122
|
this.removeable = removeable;
|
|
23123
|
+
this.avatarSpec = avatarSpec;
|
|
23123
23124
|
}
|
|
23124
23125
|
}
|
|
23125
23126
|
class ElderMultiSelectChipsComponent extends ElderMultiSelectBase {
|
|
@@ -23130,16 +23131,19 @@ class ElderMultiSelectChipsComponent extends ElderMultiSelectBase {
|
|
|
23130
23131
|
**************************************************************************/
|
|
23131
23132
|
constructor(hostRef, zone, focusMonitor, translateService, dialogService, ngControl) {
|
|
23132
23133
|
super(zone, hostRef, 'multi-select-chips', focusMonitor, translateService, dialogService, ngControl);
|
|
23133
|
-
|
|
23134
|
-
|
|
23135
|
-
|
|
23136
|
-
|
|
23137
|
-
|
|
23138
|
-
|
|
23139
|
-
|
|
23134
|
+
this.defaultAvatarSpec = {
|
|
23135
|
+
hide: false,
|
|
23136
|
+
large: false
|
|
23137
|
+
};
|
|
23138
|
+
/**
|
|
23139
|
+
* Allows to customize each chip avatar individually.
|
|
23140
|
+
*/
|
|
23141
|
+
this.avatarSpecFn = e => this.defaultAvatarSpec;
|
|
23140
23142
|
this.selectable = true;
|
|
23141
23143
|
this.allowRemove = true;
|
|
23144
|
+
this.chipColorResolver$ = new BehaviorSubject((value) => undefined);
|
|
23142
23145
|
this._chipColorEnabled = false;
|
|
23146
|
+
this.log = LoggerFactory.getLogger(this.constructor.name);
|
|
23143
23147
|
this.placeholder = '...';
|
|
23144
23148
|
this.selectChips$ = combineLatest([
|
|
23145
23149
|
this.entities$,
|
|
@@ -23251,11 +23255,11 @@ class ElderMultiSelectChipsComponent extends ElderMultiSelectBase {
|
|
|
23251
23255
|
return this.buildChipModels(entities, dPR, cCR);
|
|
23252
23256
|
}
|
|
23253
23257
|
buildChipFallbackModels(entityIds) {
|
|
23254
|
-
return entityIds.map(id => new ChipModel({ id: id }, String(id), 'warn', this.allowRemove));
|
|
23258
|
+
return entityIds.map(id => new ChipModel({ id: id }, String(id), 'warn', this.allowRemove, this.defaultAvatarSpec));
|
|
23255
23259
|
}
|
|
23256
23260
|
buildChipModels(entities, dPR, cCR) {
|
|
23257
23261
|
if (entities) {
|
|
23258
|
-
return entities.map(e => new ChipModel(e, dPR(e), cCR(e), this.allowRemove));
|
|
23262
|
+
return entities.map(e => { var _a; return new ChipModel(e, dPR(e), cCR(e), this.allowRemove, (_a = this.avatarSpecFn(e)) !== null && _a !== void 0 ? _a : this.defaultAvatarSpec); });
|
|
23259
23263
|
}
|
|
23260
23264
|
else {
|
|
23261
23265
|
return [];
|
|
@@ -23263,13 +23267,13 @@ class ElderMultiSelectChipsComponent extends ElderMultiSelectBase {
|
|
|
23263
23267
|
}
|
|
23264
23268
|
}
|
|
23265
23269
|
ElderMultiSelectChipsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: ElderMultiSelectChipsComponent, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }, { token: i1$1.FocusMonitor }, { token: i2.TranslateService }, { token: ElderDialogService }, { token: i3.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component });
|
|
23266
|
-
ElderMultiSelectChipsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.0", type: ElderMultiSelectChipsComponent, selector: "elder-multi-select-chips", inputs: { allowRemove: "allowRemove", chipTemplate: "chipTemplate", chipAvatarTemplate: "chipAvatarTemplate", customInputTemplate: "customInputTemplate", chipColorEnabled: "chipColorEnabled", chipColorResolver: "chipColorResolver" }, host: { properties: { "class": "this.hostClass", "class.mat-select-disabled": "this.disabledClass", "class.mat-select-invalid": "this.errorStateClass", "class.mat-select-required": "this.requiredClass", "class.mat-select-empty": "this.emptyClass" } }, providers: [
|
|
23270
|
+
ElderMultiSelectChipsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.0", type: ElderMultiSelectChipsComponent, selector: "elder-multi-select-chips", inputs: { defaultAvatarSpec: "defaultAvatarSpec", avatarSpecFn: "avatarSpecFn", allowRemove: "allowRemove", chipTemplate: "chipTemplate", chipAvatarTemplate: "chipAvatarTemplate", customInputTemplate: "customInputTemplate", chipColorEnabled: "chipColorEnabled", chipColorResolver: "chipColorResolver" }, host: { properties: { "class": "this.hostClass", "class.mat-select-disabled": "this.disabledClass", "class.mat-select-invalid": "this.errorStateClass", "class.mat-select-required": "this.requiredClass", "class.mat-select-empty": "this.emptyClass" } }, providers: [
|
|
23267
23271
|
{ provide: MatFormFieldControl, useExisting: ElderMultiSelectChipsComponent },
|
|
23268
23272
|
{
|
|
23269
23273
|
provide: ELDER_SELECT_BASE,
|
|
23270
23274
|
useExisting: forwardRef(() => ElderMultiSelectChipsComponent)
|
|
23271
23275
|
}
|
|
23272
|
-
], queries: [{ propertyName: "chipTemplateQuery", first: true, predicate: ElderSelectChipDirective, descendants: true, read: TemplateRef, static: true }, { propertyName: "chipAvatarTemplateQuery", first: true, predicate: ElderSelectChipAvatarDirective, descendants: true, read: TemplateRef, static: true }, { propertyName: "customInputTemplateQuery", first: true, predicate: ElderSelectCustomInputDirective, descendants: true, read: TemplateRef, static: true }], usesInheritance: true, ngImport: i0, template: "<div *ngIf=\"(selectChips$ | async) as chipValues\" fxFlex\n class=\"elder-form-control\"\n [matTooltip]=\"(state$ | async)?.error\"\n>\n\n <mat-chip-list [selectable]=\"chipColorEnabled\" multiple #chips>\n\n <ng-container *ngIf=\"(mergedState$ | async) as state\">\n <div *ngIf=\"icon\" fxFlex=\"none\"\n class=\"elder-input-prefix-icon-container\"\n >\n <mat-icon *ngIf=\"icon\" disabled\n class=\"elder-prefix-icon elder-select-icon elder-icon-small noselect\"\n [class.loading]=\"state.loading\"\n >\n {{icon}}\n </mat-icon>\n </div>\n </ng-container>\n\n\n <mat-chip *ngFor=\"let chipModel of chipValues\"\n class=\"noselect clickable-chip\"\n [value]=\"resolveChipValue(chipModel.value)\"\n [color]=\"chipModel.color\" [selectable]=\"chipColorEnabled\" [selected]=\"chipColorEnabled\"\n [removable]=\"chipModel.removeable\"\n (keydown)=\"onChipKeyDown($event, chipModel.value)\"\n (click)=\"onCurrentClicked(chipModel.value)\"\n >\n <mat-chip-avatar
|
|
23276
|
+
], queries: [{ propertyName: "chipTemplateQuery", first: true, predicate: ElderSelectChipDirective, descendants: true, read: TemplateRef, static: true }, { propertyName: "chipAvatarTemplateQuery", first: true, predicate: ElderSelectChipAvatarDirective, descendants: true, read: TemplateRef, static: true }, { propertyName: "customInputTemplateQuery", first: true, predicate: ElderSelectCustomInputDirective, descendants: true, read: TemplateRef, static: true }], usesInheritance: true, ngImport: i0, template: "<div *ngIf=\"(selectChips$ | async) as chipValues\" fxFlex\n class=\"elder-form-control\"\n [matTooltip]=\"(state$ | async)?.error\"\n>\n\n <mat-chip-list [selectable]=\"chipColorEnabled\" multiple #chips>\n\n <ng-container *ngIf=\"(mergedState$ | async) as state\">\n <div *ngIf=\"icon\" fxFlex=\"none\"\n class=\"elder-input-prefix-icon-container\"\n >\n <mat-icon *ngIf=\"icon\" disabled\n class=\"elder-prefix-icon elder-select-icon elder-icon-small noselect\"\n [class.loading]=\"state.loading\"\n >\n {{icon}}\n </mat-icon>\n </div>\n </ng-container>\n\n\n <mat-chip *ngFor=\"let chipModel of chipValues\"\n class=\"noselect clickable-chip\"\n [value]=\"resolveChipValue(chipModel.value)\"\n [color]=\"chipModel.color\" [selectable]=\"chipColorEnabled\" [selected]=\"chipColorEnabled\"\n [removable]=\"chipModel.removeable\"\n (keydown)=\"onChipKeyDown($event, chipModel.value)\"\n (click)=\"onCurrentClicked(chipModel.value)\"\n >\n <mat-chip-avatar\n *ngIf=\"chipAvatarTemplate && !chipModel.avatarSpec.hide\"\n [class.chip-avatar-large]=\"chipModel.avatarSpec.large\"\n >\n <ng-container\n *ngTemplateOutlet=\"chipAvatarTemplate; context: {$implicit: chipModel}\">\n </ng-container>\n </mat-chip-avatar>\n <ng-container\n *ngTemplateOutlet=\"chipTemplate || simpleChipTemplate; context: {$implicit: chipModel}\">\n </ng-container>\n <mat-icon matChipRemove\n *ngIf=\"chipModel.removeable\"\n (click)=\"onClickRemoveChip($event, chipModel.value)\">\n cancel\n </mat-icon>\n </mat-chip>\n\n <div fxLayout=\"row\" fxLayoutAlign=\"start center\" fxFlex\n style=\"padding-top: 7px; padding-bottom: 7px;\">\n\n <!-- [matChipInputFor]=\"chips\" -->\n <ng-container\n *ngTemplateOutlet=\"customInputTemplate || selectInput;\">\n </ng-container>\n\n <button mat-icon-button type=\"button\" class=\"elder-icon-button-small elder-browse-icon\"\n *ngIf=\"selectionPopup\"\n [disabled]=\"isLocked\"\n (click)=\"openSelectionPopup($event)\" aria-label=\"Search\"\n elderStopEventPropagation\n tabIndex=\"-1\"\n >\n <mat-icon class=\"elder-select-icon\">search</mat-icon>\n </button>\n </div>\n </mat-chip-list>\n</div>\n\n<ng-template #selectInput>\n <elder-select autocomplete elderClearSelect fxFlex\n class=\"elder-chip-input\"\n [data]=\"dataContext$ | async\"\n [disabled]=\"!!disabled\"\n [required]=\"!!required\"\n [readonly]=\"!!readonly\"\n [placeholder]=\"placeholder\"\n (entityUpdated)=\"appendEntity($event)\"\n [displayPropertyResolver]=\"displayPropertyResolver$ | async\"\n [valueTemplate]=\"valueTemplate\"\n [queryFilter]=\"queryFilter\" [filters]=\"filters\" [sorts]=\"sorts\"\n [isOptionDisabledFn]=\"isOptionDisabledInternalFn\"\n [isOptionHiddenFn]=\"isOptionHiddenInternalFn\"\n ></elder-select>\n</ng-template>\n\n<ng-template #simpleChipTemplate let-chipModel>\n <span class=\"elder-chip-text\">{{chipModel.displayText | elderTruncate:20}}</span>\n</ng-template>\n\n", styles: [".clickable-chip{cursor:pointer}.elder-chip-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mat-standard-chip .mat-chip-avatar.chip-avatar-large{width:30px;height:30px;margin-left:1px}\n"], dependencies: [{ kind: "directive", type: i1$4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i5.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button], button[mat-fab], button[mat-mini-fab], button[mat-stroked-button], button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i2$3.DefaultLayoutDirective, selector: " [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md], [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md], [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm], [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i2$3.DefaultLayoutAlignDirective, selector: " [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md], [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md], [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm], [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "directive", type: i2$3.DefaultFlexDirective, selector: " [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md], [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md], [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm], [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "directive", type: ElderStopEventPropagationDirective, selector: "[elderStopEventPropagation]" }, { kind: "component", type: i6$1.MatChipList, selector: "mat-chip-list", inputs: ["role", "aria-describedby", "errorStateMatcher", "multiple", "compareWith", "value", "required", "placeholder", "disabled", "aria-orientation", "selectable", "tabIndex"], outputs: ["change", "valueChange"], exportAs: ["matChipList"] }, { kind: "directive", type: i6$1.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["color", "disableRipple", "tabIndex", "role", "selected", "value", "selectable", "disabled", "removable"], outputs: ["selectionChange", "destroyed", "removed"], exportAs: ["matChip"] }, { kind: "directive", type: i6$1.MatChipRemove, selector: "[matChipRemove]" }, { kind: "directive", type: i6$1.MatChipAvatar, selector: "mat-chip-avatar, [matChipAvatar]" }, { kind: "directive", type: i4$5.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: ElderSelectComponent, selector: "elder-select", inputs: ["nullDisplay", "autocomplete", "allowNull", "entity", "entityId"], outputs: ["entityIdChange", "entityIdUpdated", "entityChange", "entityUpdated"] }, { kind: "directive", type: ElderClearSelectDirective, selector: "[elderClearSelect]" }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }, { kind: "pipe", type: ElderTruncatePipe, name: "elderTruncate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
23273
23277
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: ElderMultiSelectChipsComponent, decorators: [{
|
|
23274
23278
|
type: Component,
|
|
23275
23279
|
args: [{ selector: 'elder-multi-select-chips', changeDetection: ChangeDetectionStrategy.OnPush, providers: [
|
|
@@ -23278,14 +23282,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.0", ngImpor
|
|
|
23278
23282
|
provide: ELDER_SELECT_BASE,
|
|
23279
23283
|
useExisting: forwardRef(() => ElderMultiSelectChipsComponent)
|
|
23280
23284
|
}
|
|
23281
|
-
], template: "<div *ngIf=\"(selectChips$ | async) as chipValues\" fxFlex\n class=\"elder-form-control\"\n [matTooltip]=\"(state$ | async)?.error\"\n>\n\n <mat-chip-list [selectable]=\"chipColorEnabled\" multiple #chips>\n\n <ng-container *ngIf=\"(mergedState$ | async) as state\">\n <div *ngIf=\"icon\" fxFlex=\"none\"\n class=\"elder-input-prefix-icon-container\"\n >\n <mat-icon *ngIf=\"icon\" disabled\n class=\"elder-prefix-icon elder-select-icon elder-icon-small noselect\"\n [class.loading]=\"state.loading\"\n >\n {{icon}}\n </mat-icon>\n </div>\n </ng-container>\n\n\n <mat-chip *ngFor=\"let chipModel of chipValues\"\n class=\"noselect clickable-chip\"\n [value]=\"resolveChipValue(chipModel.value)\"\n [color]=\"chipModel.color\" [selectable]=\"chipColorEnabled\" [selected]=\"chipColorEnabled\"\n [removable]=\"chipModel.removeable\"\n (keydown)=\"onChipKeyDown($event, chipModel.value)\"\n (click)=\"onCurrentClicked(chipModel.value)\"\n >\n <mat-chip-avatar
|
|
23285
|
+
], template: "<div *ngIf=\"(selectChips$ | async) as chipValues\" fxFlex\n class=\"elder-form-control\"\n [matTooltip]=\"(state$ | async)?.error\"\n>\n\n <mat-chip-list [selectable]=\"chipColorEnabled\" multiple #chips>\n\n <ng-container *ngIf=\"(mergedState$ | async) as state\">\n <div *ngIf=\"icon\" fxFlex=\"none\"\n class=\"elder-input-prefix-icon-container\"\n >\n <mat-icon *ngIf=\"icon\" disabled\n class=\"elder-prefix-icon elder-select-icon elder-icon-small noselect\"\n [class.loading]=\"state.loading\"\n >\n {{icon}}\n </mat-icon>\n </div>\n </ng-container>\n\n\n <mat-chip *ngFor=\"let chipModel of chipValues\"\n class=\"noselect clickable-chip\"\n [value]=\"resolveChipValue(chipModel.value)\"\n [color]=\"chipModel.color\" [selectable]=\"chipColorEnabled\" [selected]=\"chipColorEnabled\"\n [removable]=\"chipModel.removeable\"\n (keydown)=\"onChipKeyDown($event, chipModel.value)\"\n (click)=\"onCurrentClicked(chipModel.value)\"\n >\n <mat-chip-avatar\n *ngIf=\"chipAvatarTemplate && !chipModel.avatarSpec.hide\"\n [class.chip-avatar-large]=\"chipModel.avatarSpec.large\"\n >\n <ng-container\n *ngTemplateOutlet=\"chipAvatarTemplate; context: {$implicit: chipModel}\">\n </ng-container>\n </mat-chip-avatar>\n <ng-container\n *ngTemplateOutlet=\"chipTemplate || simpleChipTemplate; context: {$implicit: chipModel}\">\n </ng-container>\n <mat-icon matChipRemove\n *ngIf=\"chipModel.removeable\"\n (click)=\"onClickRemoveChip($event, chipModel.value)\">\n cancel\n </mat-icon>\n </mat-chip>\n\n <div fxLayout=\"row\" fxLayoutAlign=\"start center\" fxFlex\n style=\"padding-top: 7px; padding-bottom: 7px;\">\n\n <!-- [matChipInputFor]=\"chips\" -->\n <ng-container\n *ngTemplateOutlet=\"customInputTemplate || selectInput;\">\n </ng-container>\n\n <button mat-icon-button type=\"button\" class=\"elder-icon-button-small elder-browse-icon\"\n *ngIf=\"selectionPopup\"\n [disabled]=\"isLocked\"\n (click)=\"openSelectionPopup($event)\" aria-label=\"Search\"\n elderStopEventPropagation\n tabIndex=\"-1\"\n >\n <mat-icon class=\"elder-select-icon\">search</mat-icon>\n </button>\n </div>\n </mat-chip-list>\n</div>\n\n<ng-template #selectInput>\n <elder-select autocomplete elderClearSelect fxFlex\n class=\"elder-chip-input\"\n [data]=\"dataContext$ | async\"\n [disabled]=\"!!disabled\"\n [required]=\"!!required\"\n [readonly]=\"!!readonly\"\n [placeholder]=\"placeholder\"\n (entityUpdated)=\"appendEntity($event)\"\n [displayPropertyResolver]=\"displayPropertyResolver$ | async\"\n [valueTemplate]=\"valueTemplate\"\n [queryFilter]=\"queryFilter\" [filters]=\"filters\" [sorts]=\"sorts\"\n [isOptionDisabledFn]=\"isOptionDisabledInternalFn\"\n [isOptionHiddenFn]=\"isOptionHiddenInternalFn\"\n ></elder-select>\n</ng-template>\n\n<ng-template #simpleChipTemplate let-chipModel>\n <span class=\"elder-chip-text\">{{chipModel.displayText | elderTruncate:20}}</span>\n</ng-template>\n\n", styles: [".clickable-chip{cursor:pointer}.elder-chip-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mat-standard-chip .mat-chip-avatar.chip-avatar-large{width:30px;height:30px;margin-left:1px}\n"] }]
|
|
23282
23286
|
}], ctorParameters: function () {
|
|
23283
23287
|
return [{ type: i0.ElementRef }, { type: i0.NgZone }, { type: i1$1.FocusMonitor }, { type: i2.TranslateService }, { type: ElderDialogService }, { type: i3.NgControl, decorators: [{
|
|
23284
23288
|
type: Optional
|
|
23285
23289
|
}, {
|
|
23286
23290
|
type: Self
|
|
23287
23291
|
}] }];
|
|
23288
|
-
}, propDecorators: {
|
|
23292
|
+
}, propDecorators: { defaultAvatarSpec: [{
|
|
23293
|
+
type: Input
|
|
23294
|
+
}], avatarSpecFn: [{
|
|
23295
|
+
type: Input
|
|
23296
|
+
}], allowRemove: [{
|
|
23289
23297
|
type: Input
|
|
23290
23298
|
}], chipTemplateQuery: [{
|
|
23291
23299
|
type: ContentChild,
|