@anglr/grid
Version:
Angular module displaying grid
124 lines • 7 kB
JavaScript
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