@clr/angular
Version:
Angular components for Clarity
106 lines • 12.5 kB
JavaScript
/*
* Copyright (c) 2016-2023 VMware, Inc. All Rights Reserved.
* This software is released under MIT license.
* The full license information can be found in LICENSE in the root directory of this project.
*/
import { Directive, EventEmitter, Inject, Input, Optional, Output, } from '@angular/core';
import { DatagridColumnChanges } from './enums/column-changes.enum';
import { COLUMN_STATE } from './providers/column-state.provider';
import * as i0 from "@angular/core";
import * as i1 from "./providers/columns.service";
import * as i2 from "rxjs";
/**
*
* @description
* A structural directive meant to be used inside a clr-dg-column component.
*
* <clr-dg-column>
* <ng-container *clrDgHideableColumn="{ hidden: true }">
* User ID
* </ng-container>
* </clr-dg-column>
*
* It sets up state and properties so that columns can be manges for hide/show by a service and an internal
* datagrid toggle component.
*
*/
export class ClrDatagridHideableColumn {
constructor(titleTemplateRef, viewContainerRef, columnsService, columnState) {
this.titleTemplateRef = titleTemplateRef;
this.viewContainerRef = viewContainerRef;
this.columnsService = columnsService;
this.columnState = columnState;
this.hiddenChange = new EventEmitter();
this.subscriptions = [];
this.viewContainerRef.createEmbeddedView(this.titleTemplateRef);
if (!this.columnState) {
throw new Error('The *clrDgHideableColumn directive can only be used inside of a clr-dg-column component.');
}
}
/**
*
* @description
* Setter fn for the @Input with the same name as this structural directive.
* It allows the user to pre-configure the column's hide/show state. { hidden: true }
* It's more verbose but has more Clarity.
*
* @example
* *clrDgHideableColumn
* *clrDgHideableColumn={hidden: false}
* *clrDgHideableColumn={hidden: true}
*
*/
set clrDgHideableColumn(value) {
if (typeof value === 'string') {
this.clrDgHidden = false;
return;
}
this.clrDgHidden = value && value.hidden ? value.hidden : false;
}
set clrDgHidden(hidden) {
this._hidden = hidden ? hidden : false;
this.columnsService.emitStateChange(this.columnState, {
hidden: this._hidden,
changes: [DatagridColumnChanges.HIDDEN],
});
}
ngOnInit() {
this.columnsService.emitStateChange(this.columnState, {
hideable: true,
titleTemplateRef: this.titleTemplateRef,
hidden: this._hidden,
changes: [DatagridColumnChanges.HIDDEN],
});
this.subscriptions.push(this.columnState.subscribe((state) => {
if (state.changes && state.changes.indexOf(DatagridColumnChanges.HIDDEN) > -1) {
this.hiddenChange.emit(state.hidden); // Can emit through @Output when desugared syntax is used
}
}));
}
ngOnDestroy() {
this.subscriptions.forEach(sub => sub.unsubscribe());
}
}
ClrDatagridHideableColumn.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: ClrDatagridHideableColumn, deps: [{ token: i0.TemplateRef }, { token: i0.ViewContainerRef }, { token: i1.ColumnsService }, { token: COLUMN_STATE, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
ClrDatagridHideableColumn.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.2", type: ClrDatagridHideableColumn, selector: "[clrDgHideableColumn]", inputs: { clrDgHideableColumn: "clrDgHideableColumn", clrDgHidden: "clrDgHidden" }, outputs: { hiddenChange: "clrDgHiddenChange" }, ngImport: i0 });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: ClrDatagridHideableColumn, decorators: [{
type: Directive,
args: [{
selector: '[clrDgHideableColumn]',
}]
}], ctorParameters: function () { return [{ type: i0.TemplateRef }, { type: i0.ViewContainerRef }, { type: i1.ColumnsService }, { type: i2.BehaviorSubject, decorators: [{
type: Optional
}, {
type: Inject,
args: [COLUMN_STATE]
}] }]; }, propDecorators: { hiddenChange: [{
type: Output,
args: ['clrDgHiddenChange']
}], clrDgHideableColumn: [{
type: Input,
args: ['clrDgHideableColumn']
}], clrDgHidden: [{
type: Input,
args: ['clrDgHidden']
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZGF0YWdyaWQtaGlkZWFibGUtY29sdW1uLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvYW5ndWxhci9zcmMvZGF0YS9kYXRhZ3JpZC9kYXRhZ3JpZC1oaWRlYWJsZS1jb2x1bW4udHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUE7Ozs7R0FJRztBQUVILE9BQU8sRUFDTCxTQUFTLEVBQ1QsWUFBWSxFQUNaLE1BQU0sRUFDTixLQUFLLEVBRUwsUUFBUSxFQUNSLE1BQU0sR0FHUCxNQUFNLGVBQWUsQ0FBQztBQUd2QixPQUFPLEVBQUUscUJBQXFCLEVBQUUsTUFBTSw2QkFBNkIsQ0FBQztBQUVwRSxPQUFPLEVBQUUsWUFBWSxFQUFFLE1BQU0sbUNBQW1DLENBQUM7Ozs7QUFPakU7Ozs7Ozs7Ozs7Ozs7O0dBY0c7QUFDSCxNQUFNLE9BQU8seUJBQXlCO0lBYXBDLFlBQ1UsZ0JBQWtDLEVBQ2xDLGdCQUFrQyxFQUNsQyxjQUE4QixFQUc5QixXQUF5QztRQUx6QyxxQkFBZ0IsR0FBaEIsZ0JBQWdCLENBQWtCO1FBQ2xDLHFCQUFnQixHQUFoQixnQkFBZ0IsQ0FBa0I7UUFDbEMsbUJBQWMsR0FBZCxjQUFjLENBQWdCO1FBRzlCLGdCQUFXLEdBQVgsV0FBVyxDQUE4QjtRQWxCdEIsaUJBQVksR0FBRyxJQUFJLFlBQVksRUFBVyxDQUFDO1FBVWhFLGtCQUFhLEdBQW1CLEVBQUUsQ0FBQztRQVV6QyxJQUFJLENBQUMsZ0JBQWdCLENBQUMsa0JBQWtCLENBQUMsSUFBSSxDQUFDLGdCQUFnQixDQUFDLENBQUM7UUFFaEUsSUFBSSxDQUFDLElBQUksQ0FBQyxXQUFXLEVBQUU7WUFDckIsTUFBTSxJQUFJLEtBQUssQ0FBQywwRkFBMEYsQ0FBQyxDQUFDO1NBQzdHO0lBQ0gsQ0FBQztJQUVEOzs7Ozs7Ozs7Ozs7T0FZRztJQUNILElBQ0ksbUJBQW1CLENBQUMsS0FBbUM7UUFDekQsSUFBSSxPQUFPLEtBQUssS0FBSyxRQUFRLEVBQUU7WUFDN0IsSUFBSSxDQUFDLFdBQVcsR0FBRyxLQUFLLENBQUM7WUFDekIsT0FBTztTQUNSO1FBQ0QsSUFBSSxDQUFDLFdBQVcsR0FBRyxLQUFLLElBQUksS0FBSyxDQUFDLE1BQU0sQ0FBQyxDQUFDLENBQUMsS0FBSyxDQUFDLE1BQU0sQ0FBQyxDQUFDLENBQUMsS0FBSyxDQUFDO0lBQ2xFLENBQUM7SUFFRCxJQUNJLFdBQVcsQ0FBQyxNQUFlO1FBQzdCLElBQUksQ0FBQyxPQUFPLEdBQUcsTUFBTSxDQUFDLENBQUMsQ0FBQyxNQUFNLENBQUMsQ0FBQyxDQUFDLEtBQUssQ0FBQztRQUN2QyxJQUFJLENBQUMsY0FBYyxDQUFDLGVBQWUsQ0FBQyxJQUFJLENBQUMsV0FBVyxFQUFFO1lBQ3BELE1BQU0sRUFBRSxJQUFJLENBQUMsT0FBTztZQUNwQixPQUFPLEVBQUUsQ0FBQyxxQkFBcUIsQ0FBQyxNQUFNLENBQUM7U0FDeEMsQ0FBQyxDQUFDO0lBQ0wsQ0FBQztJQUVELFFBQVE7UUFDTixJQUFJLENBQUMsY0FBYyxDQUFDLGVBQWUsQ0FBQyxJQUFJLENBQUMsV0FBVyxFQUFFO1lBQ3BELFFBQVEsRUFBRSxJQUFJO1lBQ2QsZ0JBQWdCLEVBQUUsSUFBSSxDQUFDLGdCQUFnQjtZQUN2QyxNQUFNLEVBQUUsSUFBSSxDQUFDLE9BQU87WUFDcEIsT0FBTyxFQUFFLENBQUMscUJBQXFCLENBQUMsTUFBTSxDQUFDO1NBQ3hDLENBQUMsQ0FBQztRQUVILElBQUksQ0FBQyxhQUFhLENBQUMsSUFBSSxDQUNyQixJQUFJLENBQUMsV0FBVyxDQUFDLFNBQVMsQ0FBQyxDQUFDLEtBQWtCLEVBQUUsRUFBRTtZQUNoRCxJQUFJLEtBQUssQ0FBQyxPQUFPLElBQUksS0FBSyxDQUFDLE9BQU8sQ0FBQyxPQUFPLENBQUMscUJBQXFCLENBQUMsTUFBTSxDQUFDLEdBQUcsQ0FBQyxDQUFDLEVBQUU7Z0JBQzdFLElBQUksQ0FBQyxZQUFZLENBQUMsSUFBSSxDQUFDLEtBQUssQ0FBQyxNQUFNLENBQUMsQ0FBQyxDQUFDLHlEQUF5RDthQUNoRztRQUNILENBQUMsQ0FBQyxDQUNILENBQUM7SUFDSixDQUFDO0lBRUQsV0FBVztRQUNULElBQUksQ0FBQyxhQUFhLENBQUMsT0FBTyxDQUFDLEdBQUcsQ0FBQyxFQUFFLENBQUMsR0FBRyxDQUFDLFdBQVcsRUFBRSxDQUFDLENBQUM7SUFDdkQsQ0FBQzs7c0hBOUVVLHlCQUF5QiwyR0FrQjFCLFlBQVk7MEdBbEJYLHlCQUF5QjsyRkFBekIseUJBQXlCO2tCQW5CckMsU0FBUzttQkFBQztvQkFDVCxRQUFRLEVBQUUsdUJBQXVCO2lCQUNsQzs7MEJBa0NJLFFBQVE7OzBCQUNSLE1BQU07MkJBQUMsWUFBWTs0Q0FqQk8sWUFBWTtzQkFBeEMsTUFBTTt1QkFBQyxtQkFBbUI7Z0JBeUN2QixtQkFBbUI7c0JBRHRCLEtBQUs7dUJBQUMscUJBQXFCO2dCQVV4QixXQUFXO3NCQURkLEtBQUs7dUJBQUMsYUFBYSIsInNvdXJjZXNDb250ZW50IjpbIi8qXG4gKiBDb3B5cmlnaHQgKGMpIDIwMTYtMjAyMyBWTXdhcmUsIEluYy4gQWxsIFJpZ2h0cyBSZXNlcnZlZC5cbiAqIFRoaXMgc29mdHdhcmUgaXMgcmVsZWFzZWQgdW5kZXIgTUlUIGxpY2Vuc2UuXG4gKiBUaGUgZnVsbCBsaWNlbnNlIGluZm9ybWF0aW9uIGNhbiBiZSBmb3VuZCBpbiBMSUNFTlNFIGluIHRoZSByb290IGRpcmVjdG9yeSBvZiB0aGlzIHByb2plY3QuXG4gKi9cblxuaW1wb3J0IHtcbiAgRGlyZWN0aXZlLFxuICBFdmVudEVtaXR0ZXIsXG4gIEluamVjdCxcbiAgSW5wdXQsXG4gIE9uRGVzdHJveSxcbiAgT3B0aW9uYWwsXG4gIE91dHB1dCxcbiAgVGVtcGxhdGVSZWYsXG4gIFZpZXdDb250YWluZXJSZWYsXG59IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgQmVoYXZpb3JTdWJqZWN0LCBTdWJzY3JpcHRpb24gfSBmcm9tICdyeGpzJztcblxuaW1wb3J0IHsgRGF0YWdyaWRDb2x1bW5DaGFuZ2VzIH0gZnJvbSAnLi9lbnVtcy9jb2x1bW4tY2hhbmdlcy5lbnVtJztcbmltcG9ydCB7IENvbHVtblN0YXRlIH0gZnJvbSAnLi9pbnRlcmZhY2VzL2NvbHVtbi1zdGF0ZS5pbnRlcmZhY2UnO1xuaW1wb3J0IHsgQ09MVU1OX1NUQVRFIH0gZnJvbSAnLi9wcm92aWRlcnMvY29sdW1uLXN0YXRlLnByb3ZpZGVyJztcbmltcG9ydCB7IENvbHVtbnNTZXJ2aWNlIH0gZnJvbSAnLi9wcm92aWRlcnMvY29sdW1ucy5zZXJ2aWNlJztcblxuQERpcmVjdGl2ZSh7XG4gIHNlbGVjdG9yOiAnW2NsckRnSGlkZWFibGVDb2x1bW5dJyxcbn0pXG5cbi8qKlxuICpcbiAqIEBkZXNjcmlwdGlvblxuICogQSBzdHJ1Y3R1cmFsIGRpcmVjdGl2ZSBtZWFudCB0byBiZSB1c2VkIGluc2lkZSBhIGNsci1kZy1jb2x1bW4gY29tcG9uZW50LlxuICpcbiAqIDxjbHItZGctY29sdW1uPlxuICogICAgICAgPG5nLWNvbnRhaW5lciAqY2xyRGdIaWRlYWJsZUNvbHVtbj1cInsgaGlkZGVuOiB0cnVlIH1cIj5cbiAqICAgICAgICAgICBVc2VyIElEXG4gKiAgICAgICA8L25nLWNvbnRhaW5lcj5cbiAqICAgPC9jbHItZGctY29sdW1uPlxuICpcbiAqIEl0IHNldHMgdXAgc3RhdGUgYW5kIHByb3BlcnRpZXMgc28gdGhhdCBjb2x1bW5zIGNhbiBiZSBtYW5nZXMgZm9yIGhpZGUvc2hvdyBieSBhIHNlcnZpY2UgYW5kIGFuIGludGVybmFsXG4gKiBkYXRhZ3JpZCB0b2dnbGUgY29tcG9uZW50LlxuICpcbiAqL1xuZXhwb3J0IGNsYXNzIENsckRhdGFncmlkSGlkZWFibGVDb2x1bW4gaW1wbGVtZW50cyBPbkRlc3Ryb3kge1xuICBAT3V0cHV0KCdjbHJEZ0hpZGRlbkNoYW5nZScpIGhpZGRlbkNoYW5nZSA9IG5ldyBFdmVudEVtaXR0ZXI8Ym9vbGVhbj4oKTtcblxuICAvKipcbiAgICpcbiAgICogQGRlc2NyaXB0aW9uXG4gICAqIFVzZWQgdG8gaW5pdGlhbGl6ZSB0aGUgY29sdW1uIHdpdGggZWl0aGVyIGhpZGRlbiBvciB2aXNpYmxlIHN0YXRlLlxuICAgKlxuICAgKi9cbiAgcHJpdmF0ZSBfaGlkZGVuOiBib29sZWFuO1xuXG4gIHByaXZhdGUgc3Vic2NyaXB0aW9uczogU3Vic2NyaXB0aW9uW10gPSBbXTtcblxuICBjb25zdHJ1Y3RvcihcbiAgICBwcml2YXRlIHRpdGxlVGVtcGxhdGVSZWY6IFRlbXBsYXRlUmVmPGFueT4sXG4gICAgcHJpdmF0ZSB2aWV3Q29udGFpbmVyUmVmOiBWaWV3Q29udGFpbmVyUmVmLFxuICAgIHByaXZhdGUgY29sdW1uc1NlcnZpY2U6IENvbHVtbnNTZXJ2aWNlLFxuICAgIEBPcHRpb25hbCgpXG4gICAgQEluamVjdChDT0xVTU5fU1RBVEUpXG4gICAgcHJpdmF0ZSBjb2x1bW5TdGF0ZTogQmVoYXZpb3JTdWJqZWN0PENvbHVtblN0YXRlPlxuICApIHtcbiAgICB0aGlzLnZpZXdDb250YWluZXJSZWYuY3JlYXRlRW1iZWRkZWRWaWV3KHRoaXMudGl0bGVUZW1wbGF0ZVJlZik7XG5cbiAgICBpZiAoIXRoaXMuY29sdW1uU3RhdGUpIHtcbiAgICAgIHRocm93IG5ldyBFcnJvcignVGhlICpjbHJEZ0hpZGVhYmxlQ29sdW1uIGRpcmVjdGl2ZSBjYW4gb25seSBiZSB1c2VkIGluc2lkZSBvZiBhIGNsci1kZy1jb2x1bW4gY29tcG9uZW50LicpO1xuICAgIH1cbiAgfVxuXG4gIC8qKlxuICAgKlxuICAgKiBAZGVzY3JpcHRpb25cbiAgICogU2V0dGVyIGZuIGZvciB0aGUgQElucHV0IHdpdGggdGhlIHNhbWUgbmFtZSBhcyB0aGlzIHN0cnVjdHVyYWwgZGlyZWN0aXZlLlxuICAgKiBJdCBhbGxvd3MgdGhlIHVzZXIgdG8gcHJlLWNvbmZpZ3VyZSB0aGUgY29sdW1uJ3MgaGlkZS9zaG93IHN0YXRlLiB7IGhpZGRlbjogdHJ1ZSB9XG4gICAqIEl0J3MgbW9yZSB2ZXJib3NlIGJ1dCBoYXMgbW9yZSBDbGFyaXR5LlxuICAgKlxuICAgKiBAZXhhbXBsZVxuICAgKiAqY2xyRGdIaWRlYWJsZUNvbHVtblxuICAgKiAqY2xyRGdIaWRlYWJsZUNvbHVtbj17aGlkZGVuOiBmYWxzZX1cbiAgICogKmNsckRnSGlkZWFibGVDb2x1bW49e2hpZGRlbjogdHJ1ZX1cbiAgICpcbiAgICovXG4gIEBJbnB1dCgnY2xyRGdIaWRlYWJsZUNvbHVtbicpXG4gIHNldCBjbHJEZ0hpZGVhYmxlQ29sdW1uKHZhbHVlOiB7IGhpZGRlbjogYm9vbGVhbiB9IHwgc3RyaW5nKSB7XG4gICAgaWYgKHR5cGVvZiB2YWx1ZSA9PT0gJ3N0cmluZycpIHtcbiAgICAgIHRoaXMuY2xyRGdIaWRkZW4gPSBmYWxzZTtcbiAgICAgIHJldHVybjtcbiAgICB9XG4gICAgdGhpcy5jbHJEZ0hpZGRlbiA9IHZhbHVlICYmIHZhbHVlLmhpZGRlbiA/IHZhbHVlLmhpZGRlbiA6IGZhbHNlO1xuICB9XG5cbiAgQElucHV0KCdjbHJEZ0hpZGRlbicpXG4gIHNldCBjbHJEZ0hpZGRlbihoaWRkZW46IGJvb2xlYW4pIHtcbiAgICB0aGlzLl9oaWRkZW4gPSBoaWRkZW4gPyBoaWRkZW4gOiBmYWxzZTtcbiAgICB0aGlzLmNvbHVtbnNTZXJ2aWNlLmVtaXRTdGF0ZUNoYW5nZSh0aGlzLmNvbHVtblN0YXRlLCB7XG4gICAgICBoaWRkZW46IHRoaXMuX2hpZGRlbixcbiAgICAgIGNoYW5nZXM6IFtEYXRhZ3JpZENvbHVtbkNoYW5nZXMuSElEREVOXSxcbiAgICB9KTtcbiAgfVxuXG4gIG5nT25Jbml0KCkge1xuICAgIHRoaXMuY29sdW1uc1NlcnZpY2UuZW1pdFN0YXRlQ2hhbmdlKHRoaXMuY29sdW1uU3RhdGUsIHtcbiAgICAgIGhpZGVhYmxlOiB0cnVlLFxuICAgICAgdGl0bGVUZW1wbGF0ZVJlZjogdGhpcy50aXRsZVRlbXBsYXRlUmVmLFxuICAgICAgaGlkZGVuOiB0aGlzLl9oaWRkZW4sXG4gICAgICBjaGFuZ2VzOiBbRGF0YWdyaWRDb2x1bW5DaGFuZ2VzLkhJRERFTl0sXG4gICAgfSk7XG5cbiAgICB0aGlzLnN1YnNjcmlwdGlvbnMucHVzaChcbiAgICAgIHRoaXMuY29sdW1uU3RhdGUuc3Vic2NyaWJlKChzdGF0ZTogQ29sdW1uU3RhdGUpID0+IHtcbiAgICAgICAgaWYgKHN0YXRlLmNoYW5nZXMgJiYgc3RhdGUuY2hhbmdlcy5pbmRleE9mKERhdGFncmlkQ29sdW1uQ2hhbmdlcy5ISURERU4pID4gLTEpIHtcbiAgICAgICAgICB0aGlzLmhpZGRlbkNoYW5nZS5lbWl0KHN0YXRlLmhpZGRlbik7IC8vIENhbiBlbWl0IHRocm91Z2ggQE91dHB1dCB3aGVuIGRlc3VnYXJlZCBzeW50YXggaXMgdXNlZFxuICAgICAgICB9XG4gICAgICB9KVxuICAgICk7XG4gIH1cblxuICBuZ09uRGVzdHJveSgpIHtcbiAgICB0aGlzLnN1YnNjcmlwdGlvbnMuZm9yRWFjaChzdWIgPT4gc3ViLnVuc3Vic2NyaWJlKCkpO1xuICB9XG59XG4iXX0=