@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
|
@@ -15489,7 +15489,7 @@ ElderGridComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", ver
|
|
|
15489
15489
|
provide: ELDER_DATA_VIEW,
|
|
15490
15490
|
useExisting: forwardRef(() => ElderGridComponent)
|
|
15491
15491
|
}
|
|
15492
|
-
], 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 });
|
|
15492
|
+
], 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 });
|
|
15493
15493
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: ElderGridComponent, decorators: [{
|
|
15494
15494
|
type: Component,
|
|
15495
15495
|
args: [{ selector: 'elder-grid', changeDetection: ChangeDetectionStrategy.OnPush, providers: [
|
|
@@ -15497,7 +15497,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.0", ngImpor
|
|
|
15497
15497
|
provide: ELDER_DATA_VIEW,
|
|
15498
15498
|
useExisting: forwardRef(() => ElderGridComponent)
|
|
15499
15499
|
}
|
|
15500
|
-
], 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:
|
|
15500
|
+
], 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"] }]
|
|
15501
15501
|
}], ctorParameters: function () { return [{ type: SelectionModel, decorators: [{
|
|
15502
15502
|
type: Optional
|
|
15503
15503
|
}] }, { type: ElderDataViewOptionsProvider, decorators: [{
|
|
@@ -23030,11 +23030,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.0", ngImpor
|
|
|
23030
23030
|
}] }]; } });
|
|
23031
23031
|
|
|
23032
23032
|
class ChipModel {
|
|
23033
|
-
constructor(value, displayText, color, removeable) {
|
|
23033
|
+
constructor(value, displayText, color, removeable, avatarSpec) {
|
|
23034
23034
|
this.value = value;
|
|
23035
23035
|
this.displayText = displayText;
|
|
23036
23036
|
this.color = color;
|
|
23037
23037
|
this.removeable = removeable;
|
|
23038
|
+
this.avatarSpec = avatarSpec;
|
|
23038
23039
|
}
|
|
23039
23040
|
}
|
|
23040
23041
|
class ElderMultiSelectChipsComponent extends ElderMultiSelectBase {
|
|
@@ -23045,16 +23046,19 @@ class ElderMultiSelectChipsComponent extends ElderMultiSelectBase {
|
|
|
23045
23046
|
**************************************************************************/
|
|
23046
23047
|
constructor(hostRef, zone, focusMonitor, translateService, dialogService, ngControl) {
|
|
23047
23048
|
super(zone, hostRef, 'multi-select-chips', focusMonitor, translateService, dialogService, ngControl);
|
|
23048
|
-
|
|
23049
|
-
|
|
23050
|
-
|
|
23051
|
-
|
|
23052
|
-
|
|
23053
|
-
|
|
23054
|
-
|
|
23049
|
+
this.defaultAvatarSpec = {
|
|
23050
|
+
hide: false,
|
|
23051
|
+
large: false
|
|
23052
|
+
};
|
|
23053
|
+
/**
|
|
23054
|
+
* Allows to customize each chip avatar individually.
|
|
23055
|
+
*/
|
|
23056
|
+
this.avatarSpecFn = e => this.defaultAvatarSpec;
|
|
23055
23057
|
this.selectable = true;
|
|
23056
23058
|
this.allowRemove = true;
|
|
23059
|
+
this.chipColorResolver$ = new BehaviorSubject((value) => undefined);
|
|
23057
23060
|
this._chipColorEnabled = false;
|
|
23061
|
+
this.log = LoggerFactory.getLogger(this.constructor.name);
|
|
23058
23062
|
this.placeholder = '...';
|
|
23059
23063
|
this.selectChips$ = combineLatest([
|
|
23060
23064
|
this.entities$,
|
|
@@ -23166,11 +23170,11 @@ class ElderMultiSelectChipsComponent extends ElderMultiSelectBase {
|
|
|
23166
23170
|
return this.buildChipModels(entities, dPR, cCR);
|
|
23167
23171
|
}
|
|
23168
23172
|
buildChipFallbackModels(entityIds) {
|
|
23169
|
-
return entityIds.map(id => new ChipModel({ id: id }, String(id), 'warn', this.allowRemove));
|
|
23173
|
+
return entityIds.map(id => new ChipModel({ id: id }, String(id), 'warn', this.allowRemove, this.defaultAvatarSpec));
|
|
23170
23174
|
}
|
|
23171
23175
|
buildChipModels(entities, dPR, cCR) {
|
|
23172
23176
|
if (entities) {
|
|
23173
|
-
return entities.map(e => new ChipModel(e, dPR(e), cCR(e), this.allowRemove));
|
|
23177
|
+
return entities.map(e => new ChipModel(e, dPR(e), cCR(e), this.allowRemove, this.avatarSpecFn(e) ?? this.defaultAvatarSpec));
|
|
23174
23178
|
}
|
|
23175
23179
|
else {
|
|
23176
23180
|
return [];
|
|
@@ -23178,13 +23182,13 @@ class ElderMultiSelectChipsComponent extends ElderMultiSelectBase {
|
|
|
23178
23182
|
}
|
|
23179
23183
|
}
|
|
23180
23184
|
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 });
|
|
23181
|
-
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: [
|
|
23185
|
+
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: [
|
|
23182
23186
|
{ provide: MatFormFieldControl, useExisting: ElderMultiSelectChipsComponent },
|
|
23183
23187
|
{
|
|
23184
23188
|
provide: ELDER_SELECT_BASE,
|
|
23185
23189
|
useExisting: forwardRef(() => ElderMultiSelectChipsComponent)
|
|
23186
23190
|
}
|
|
23187
|
-
], 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
|
|
23191
|
+
], 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 });
|
|
23188
23192
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: ElderMultiSelectChipsComponent, decorators: [{
|
|
23189
23193
|
type: Component,
|
|
23190
23194
|
args: [{ selector: 'elder-multi-select-chips', changeDetection: ChangeDetectionStrategy.OnPush, providers: [
|
|
@@ -23193,12 +23197,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.0", ngImpor
|
|
|
23193
23197
|
provide: ELDER_SELECT_BASE,
|
|
23194
23198
|
useExisting: forwardRef(() => ElderMultiSelectChipsComponent)
|
|
23195
23199
|
}
|
|
23196
|
-
], 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
|
|
23200
|
+
], 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"] }]
|
|
23197
23201
|
}], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.NgZone }, { type: i1$1.FocusMonitor }, { type: i2.TranslateService }, { type: ElderDialogService }, { type: i3.NgControl, decorators: [{
|
|
23198
23202
|
type: Optional
|
|
23199
23203
|
}, {
|
|
23200
23204
|
type: Self
|
|
23201
|
-
}] }]; }, propDecorators: {
|
|
23205
|
+
}] }]; }, propDecorators: { defaultAvatarSpec: [{
|
|
23206
|
+
type: Input
|
|
23207
|
+
}], avatarSpecFn: [{
|
|
23208
|
+
type: Input
|
|
23209
|
+
}], allowRemove: [{
|
|
23202
23210
|
type: Input
|
|
23203
23211
|
}], chipTemplateQuery: [{
|
|
23204
23212
|
type: ContentChild,
|