UNPKG

@anglr/grid

Version:
124 lines 7 kB
import { Component, ChangeDetectionStrategy, Inject, Optional, ElementRef, ChangeDetectorRef, forwardRef, HostBinding } from '@angular/core'; import { toObservable } from '@angular/core/rxjs-interop'; import { DomSanitizer } from '@angular/platform-browser'; import { CommonDynamicModule } from '@anglr/common'; import { isArray } from '@jscrpt/common'; import { skip } from 'rxjs'; import { BodyHeaderContentRendererAbstractComponent } from '../bodyHeaderContentRendererAbstract.component'; import { CONTENT_RENDERER_OPTIONS, GRID_PLUGIN_INSTANCES } from '../../../../misc/tokens'; import { CssDivsBodyContentRendererComponent } from './body/cssDivsBodyContentRenderer.component'; import { CssDivsHeaderContentRendererComponent } from './header/cssDivsHeaderContentRenderer.component'; import { ResolveForwardRefPipe } from '../../../../pipes'; import * as i0 from "@angular/core"; import * as i1 from "@angular/platform-browser"; import * as i2 from "@anglr/common"; /** * Default options for 'CssDivsContentRendererComponent' */ const defaultOptions = { cssClasses: { containerDiv: 'css-grid-table' }, plugins: { bodyRenderer: { type: forwardRef(() => CssDivsBodyContentRendererComponent), instance: null, instanceCallback: null, options: null, }, headerRenderer: { type: forwardRef(() => CssDivsHeaderContentRendererComponent), instance: null, instanceCallback: null, options: null, } } }; /** * Component used for 'CssDivsContentRendererComponent' * @deprecated use new MatrixGrid with MatrixContentRenderer instead */ export class CssDivsContentRendererComponent extends BodyHeaderContentRendererAbstractComponent { //######################### public properties - host bindings ######################### /** * Sanitized value for grid template columns */ get gridTemplateColumns() { return this._sanitizer.bypassSecurityTrustStyle(this.ɵgridTemplateColumns); } /** * Css class applied to grid itself */ get cssClass() { return this.ɵoptions.cssClasses.containerDiv; } //######################### constructor ######################### constructor(pluginElement, _sanitizer, gridPlugins, options, changeDetector) { super(pluginElement, gridPlugins, defaultOptions, options); this._sanitizer = _sanitizer; this.changeDetector = changeDetector; //######################### protected properties ######################### /** * Concatenated string with width of all visible columns */ this.ɵgridTemplateColumns = ''; } //######################### public methods ######################### /** * @inheritdoc */ initialize(force) { super.initialize(force); this.setGridColumnsWidth(); if (this.metadataSelector) { toObservable(this.metadataSelector.metadata) .pipe(skip(1)) .subscribe(() => this.setGridColumnsWidth()); } } //######################### protected methods ######################### /** * Set grid template column value for visible columns */ setGridColumnsWidth() { const metadata = this.metadataSelector?.metadata; if (isArray(metadata.columns)) { const gridTemplateColumns = []; metadata.columns.forEach(column => { if (column.visible) { gridTemplateColumns.push(column.width ? column.width : 'auto'); } }); this.ɵgridTemplateColumns = gridTemplateColumns.join(' '); setTimeout(() => { this.changeDetector?.markForCheck(); }); } } static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.0", ngImport: i0, type: CssDivsContentRendererComponent, deps: [{ token: i0.ElementRef }, { token: i1.DomSanitizer }, { token: GRID_PLUGIN_INSTANCES, optional: true }, { token: CONTENT_RENDERER_OPTIONS, optional: true }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); } static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.0", type: CssDivsContentRendererComponent, isStandalone: true, selector: "div.css-grid-content-renderer", host: { properties: { "style.grid-template-columns": "this.gridTemplateColumns", "class": "this.cssClass" } }, usesInheritance: true, ngImport: i0, template: "<ng-template [ngComponentOutletEx]=\"options.plugins.headerRenderer.type | resolveForwardRef\" (ngComponentOutletExCreated)=\"setHeaderRendererComponent($event)\"></ng-template>\r\n<ng-template [ngComponentOutletEx]=\"options.plugins.bodyRenderer.type | resolveForwardRef\" (ngComponentOutletExCreated)=\"setBodyRendererComponent($event)\"></ng-template>", dependencies: [{ kind: "ngmodule", type: CommonDynamicModule }, { kind: "directive", type: i2.NgComponentOutletEx, selector: "[ngComponentOutletEx]", inputs: ["ngComponentOutletEx", "ngComponentOutletExInjector", "ngComponentOutletExContent"], outputs: ["ngComponentOutletExCreated"], exportAs: ["ngComponentOutletEx"] }, { kind: "pipe", type: ResolveForwardRefPipe, name: "resolveForwardRef" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); } } i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.0", ngImport: i0, type: CssDivsContentRendererComponent, decorators: [{ type: Component, args: [{ selector: 'div.css-grid-content-renderer', imports: [ CommonDynamicModule, ResolveForwardRefPipe, ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-template [ngComponentOutletEx]=\"options.plugins.headerRenderer.type | resolveForwardRef\" (ngComponentOutletExCreated)=\"setHeaderRendererComponent($event)\"></ng-template>\r\n<ng-template [ngComponentOutletEx]=\"options.plugins.bodyRenderer.type | resolveForwardRef\" (ngComponentOutletExCreated)=\"setBodyRendererComponent($event)\"></ng-template>" }] }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1.DomSanitizer }, { type: undefined, decorators: [{ type: Inject, args: [GRID_PLUGIN_INSTANCES] }, { type: Optional }] }, { type: undefined, decorators: [{ type: Inject, args: [CONTENT_RENDERER_OPTIONS] }, { type: Optional }] }, { type: i0.ChangeDetectorRef }], propDecorators: { gridTemplateColumns: [{ type: HostBinding, args: ['style.grid-template-columns'] }], cssClass: [{ type: HostBinding, args: ['class'] }] } }); //# sourceMappingURL=cssDivsContentRenderer.component.js.map