@data-cafe/datagrid/fesm2020/data-cafe-datagrid.mjs

A very generic datagrid component for data-café applications

import { __decorate } from 'tslib';
import * as i0 from '@angular/core';
import { EventEmitter, Component, Input, Output, NgModule } from '@angular/core';
import * as i3 from '@angular/forms';
import { FormControl, Validators, FormsModule, ReactiveFormsModule } from '@angular/forms';
import { UntilDestroy } from '@ngneat/until-destroy';
import { checkIcon, timesIcon, ClarityIcons } from '@cds/core/icon';
import { prepareIcons, uniqueness } from '@data-cafe/helpers';
import * as i1 from '@ngneat/edit-in-place';
import { EditableModule } from '@ngneat/edit-in-place';
import * as i2 from '@angular/common';
import { CommonModule } from '@angular/common';
import * as i1$1 from '@clr/angular';
import { ClrLoadingState, ClarityModule } from '@clr/angular';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

/*
 * data·café
 * Copyright (c) 2021-2022 Data Terrae
 * This program is under the terms of the GNU Affero General Public License version 3
 * The full license information can be found in LICENSE in the root directory of this project.
 */
const { IconsForTemplate: ICONS, IconsForImport: IMPORT_ICONS } = prepareIcons({
    VALID: checkIcon,
    CANCEL: timesIcon,
});

/*
 * data·café
 * Copyright (c) 2021-2022 Data Terrae
 * This program is under the terms of the GNU Affero General Public License version 3
 * The full license information can be found in LICENSE in the root directory of this project.
 */

let CellEditableComponent = class CellEditableComponent {
    constructor(renderer, element) {
        this.renderer = renderer;
        this.element = element;
        this.ICON = ICONS;
        /**
         * Main item to edit.
         * It could be null, meaning no value.
         * The `undefined` value is not allowed here; please use `null` instead.
         */
        this.item = null;
        /**
         * Allow edition
         */
        this.enable = true;
        /**
         * Specify some extra validators
         */
        this.validators = [];
        /**
         * call on save:
         * - button validate
         * - enter key
         */
        this.save = new EventEmitter();
        /**
         * Dispatch a event indicating whenever this component is in edition mode.
         */
        this.editing$ = new EventEmitter();
        this.formControl = new FormControl();
    }
    ngOnInit() {
        // Styling parent cell <td>
        const cellElement = this.element.nativeElement.closest('clr-dg-cell');
        this.renderer.addClass(cellElement, 'has-edit');
    }
    getLabel(value) {
        if (!value) {
            return undefined;
        }
        else if (['string', 'number'].includes(typeof value)) {
            return `${value}`;
        }
        else if (this.itemToLabel) {
            return this.itemToLabel(value);
        }
        else if ('label' in value) {
            return value.label;
        }
        else if ('name' in value) {
            return value.name;
        }
        else if ('title' in value) {
            return value.title;
        }
        else {
            return '' + value;
        }
    }
    onEditableChange(mode) {
        if (mode === 'edit') {
            this.formControl.setValidators(this.validators);
            this.formControl.setValue(this.item);
        }
        this.editing$.emit(mode === 'edit');
    }
    trim(value) {
        if (typeof value === 'string') {
            return value.trim();
        }
        else {
            return value;
        }
    }
    onEdit() {
        if (this.formControl.valid) {
            this.save.emit({
                previous: this.item ?? null,
                current: this.trim(this.formControl.value) ?? null,
            });
        }
    }
};
CellEditableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: CellEditableComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
CellEditableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: CellEditableComponent, selector: "dt-cell-editable", inputs: { item: "item", fallbackLabel: "fallbackLabel", altValues: "altValues", itemToLabel: "itemToLabel", enable: "enable", validators: "validators" }, outputs: { save: "save", editing$: "editing$" }, ngImport: i0, template: "<!--\n  ~ data\u00B7caf\u00E9\n  ~ Copyright (c) 2021-2022 Data Terrae\n  ~ This program is under the terms of the GNU Affero General Public License version 3\n  ~ The full license information can be found in LICENSE in the root directory of this project.\n  -->\n\n<editable (modeChange)=\"onEditableChange($event)\"\n          (save)=\"onEdit()\"\n          [class.can-edit]=\"enable\"\n          [class.is-editing]=\"editing$ | async\"\n          [enabled]=\"enable\">\n  <ng-template viewMode>\n    <span [class.missing]=\"!item && fallbackLabel\"\n          [innerText]=\"getLabel(item) ?? fallbackLabel ?? ''\"></span>\n  </ng-template>\n  <ng-template editMode>\n\n    <input *ngIf=\"!altValues\"\n           [formControl]=\"formControl\"\n           clrInput\n           editableFocusable editableOnEnter editableOnEscape trim=\"blur\"/>\n\n    <select *ngIf=\"altValues\"\n            [formControl]=\"formControl\"\n            clrSelect\n            editableFocusable editableOnEnter editableOnEscape>\n      <option [label]=\"fallbackLabel\" [ngValue]=\"null\" class=\"missing\"></option>\n      <option *ngFor=\"let alt of altValues\" [label]=\"getLabel(alt)\" [ngValue]=\"alt\"></option>\n    </select>\n\n    <div class=\"btn-group btn-sm btn-icon\">\n      <button class=\"btn btn-success\" editableOnSave>\n        <cds-icon [attr.shape]=\"ICON.VALID\"></cds-icon>\n      </button>\n      <button class=\"btn btn-danger\" editableOnCancel>\n        <cds-icon [attr.shape]=\"ICON.CANCEL\"></cds-icon>\n      </button>\n    </div>\n  </ng-template>\n</editable>\n", styles: ["@charset \"UTF-8\";/*!\n * data\u00B7caf\u00E9\n * Copyright (c) 2021-2022 Data Terrae\n * This program is under the terms of the GNU Affero General Public License version 3\n * The full license information can be found in LICENSE in the root directory of this project.\n */:host{display:contents}:host editable{height:2rem;display:flex;flex-direction:row;align-items:center;justify-content:space-between}:host editable.can-edit{cursor:pointer}:host editable:not(.is-editing){flex-flow:wrap;padding:0 .6rem;overflow-wrap:break-word}:host editable.is-editing{flex-flow:nowrap;padding:0 .3rem}:host editable ::ng-deep .clr-form-control{display:contents}:host editable ::ng-deep .clr-form-control .clr-control-container{display:contents;margin:0}:host editable ::ng-deep .clr-form-control .clr-control-container .clr-input-wrapper,:host editable ::ng-deep .clr-form-control .clr-control-container .clr-select-wrapper{display:contents}:host editable ::ng-deep .clr-form-control .clr-control-container .clr-input-wrapper input,:host editable ::ng-deep .clr-form-control .clr-control-container .clr-input-wrapper select,:host editable ::ng-deep .clr-form-control .clr-control-container .clr-select-wrapper input,:host editable ::ng-deep .clr-form-control .clr-control-container .clr-select-wrapper select{width:calc(100% - 4.2rem);min-width:unset;max-width:unset;flex-grow:1;flex-shrink:1}:host editable ::ng-deep .btn-group{min-width:3.8rem;flex-grow:0;flex-shrink:0}:host editable ::ng-deep *+.btn-group{margin:0 0 0 .4rem}\n"], components: [{ type: i1.EditableComponent, selector: "editable", inputs: ["enabled", "openBindingEvent", "closeBindingEvent"], outputs: ["save", "cancel", "modeChange"] }], directives: [{ type: i1.ViewModeDirective, selector: "[viewMode]" }, { type: i1.EditModeDirective, selector: "[editMode]" }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i1$1.ClrInput, selector: "[clrInput]" }, { type: i1.EditableFocusDirective, selector: "[editableFocusable]" }, { type: i1.EditableOnEnterDirective, selector: "[editableOnEnter]" }, { type: i1.EditableOnEscapeDirective, selector: "[editableOnEscape]" }, { type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i3.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { type: i1$1.ClrSelect, selector: "[clrSelect]" }, { type: i3.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i3.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1.EditableSaveDirective, selector: "[editableOnSave]", inputs: ["saveEvent"] }, { type: i1$1.CdsIconCustomTag, selector: "cds-icon" }, { type: i1.EditableCancelDirective, selector: "[editableOnCancel]", inputs: ["cancelEvent"] }], pipes: { "async": i2.AsyncPipe } });
CellEditableComponent = __decorate([
    UntilDestroy()
], CellEditableComponent);
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: CellEditableComponent, decorators: [{
            type: Component,
            args: [{ selector: 'dt-cell-editable', template: "<!--\n  ~ data\u00B7caf\u00E9\n  ~ Copyright (c) 2021-2022 Data Terrae\n  ~ This program is under the terms of the GNU Affero General Public License version 3\n  ~ The full license information can be found in LICENSE in the root directory of this project.\n  -->\n\n<editable (modeChange)=\"onEditableChange($event)\"\n          (save)=\"onEdit()\"\n          [class.can-edit]=\"enable\"\n          [class.is-editing]=\"editing$ | async\"\n          [enabled]=\"enable\">\n  <ng-template viewMode>\n    <span [class.missing]=\"!item && fallbackLabel\"\n          [innerText]=\"getLabel(item) ?? fallbackLabel ?? ''\"></span>\n  </ng-template>\n  <ng-template editMode>\n\n    <input *ngIf=\"!altValues\"\n           [formControl]=\"formControl\"\n           clrInput\n           editableFocusable editableOnEnter editableOnEscape trim=\"blur\"/>\n\n    <select *ngIf=\"altValues\"\n            [formControl]=\"formControl\"\n            clrSelect\n            editableFocusable editableOnEnter editableOnEscape>\n      <option [label]=\"fallbackLabel\" [ngValue]=\"null\" class=\"missing\"></option>\n      <option *ngFor=\"let alt of altValues\" [label]=\"getLabel(alt)\" [ngValue]=\"alt\"></option>\n    </select>\n\n    <div class=\"btn-group btn-sm btn-icon\">\n      <button class=\"btn btn-success\" editableOnSave>\n        <cds-icon [attr.shape]=\"ICON.VALID\"></cds-icon>\n      </button>\n      <button class=\"btn btn-danger\" editableOnCancel>\n        <cds-icon [attr.shape]=\"ICON.CANCEL\"></cds-icon>\n      </button>\n    </div>\n  </ng-template>\n</editable>\n", styles: ["@charset \"UTF-8\";/*!\n * data\u00B7caf\u00E9\n * Copyright (c) 2021-2022 Data Terrae\n * This program is under the terms of the GNU Affero General Public License version 3\n * The full license information can be found in LICENSE in the root directory of this project.\n */:host{display:contents}:host editable{height:2rem;display:flex;flex-direction:row;align-items:center;justify-content:space-between}:host editable.can-edit{cursor:pointer}:host editable:not(.is-editing){flex-flow:wrap;padding:0 .6rem;overflow-wrap:break-word}:host editable.is-editing{flex-flow:nowrap;padding:0 .3rem}:host editable ::ng-deep .clr-form-control{display:contents}:host editable ::ng-deep .clr-form-control .clr-control-container{display:contents;margin:0}:host editable ::ng-deep .clr-form-control .clr-control-container .clr-input-wrapper,:host editable ::ng-deep .clr-form-control .clr-control-container .clr-select-wrapper{display:contents}:host editable ::ng-deep .clr-form-control .clr-control-container .clr-input-wrapper input,:host editable ::ng-deep .clr-form-control .clr-control-container .clr-input-wrapper select,:host editable ::ng-deep .clr-form-control .clr-control-container .clr-select-wrapper input,:host editable ::ng-deep .clr-form-control .clr-control-container .clr-select-wrapper select{width:calc(100% - 4.2rem);min-width:unset;max-width:unset;flex-grow:1;flex-shrink:1}:host editable ::ng-deep .btn-group{min-width:3.8rem;flex-grow:0;flex-shrink:0}:host editable ::ng-deep *+.btn-group{margin:0 0 0 .4rem}\n"] }]
        }], ctorParameters: function () { return [{ type: i0.Renderer2 }, { type: i0.ElementRef }]; }, propDecorators: { item: [{
                type: Input
            }], fallbackLabel: [{
                type: Input
            }], altValues: [{
                type: Input
            }], itemToLabel: [{
                type: Input
            }], enable: [{
                type: Input
            }], validators: [{
                type: Input
            }], save: [{
                type: Output
            }], editing$: [{
                type: Output
            }] } });

/*
 * data·café
 * Copyright (c) 2021-2022 Data Terrae
 * This program is under the terms of the GNU Affero General Public License version 3
 * The full license information can be found in LICENSE in the root directory of this project.
 */
const EDITABLE_VALIDATORS = {
    NONE: [],
    REQUIRED: [Validators.required],
    EMAIL: [Validators.required, Validators.email],
};

/*
 * data·café
 * Copyright (c) 2021-2022 Data Terrae
 * This program is under the terms of the GNU Affero General Public License version 3
 * The full license information can be found in LICENSE in the root directory of this project.
 */

/*
 * data·café
 * Copyright (c) 2021-2022 Data Terrae
 * This program is under the terms of the GNU Affero General Public License version 3
 * The full license information can be found in LICENSE in the root directory of this project.
 */

/*
 * data·café
 * Copyright (c) 2021-2022 Data Terrae
 * This program is under the terms of the GNU Affero General Public License version 3
 * The full license information can be found in LICENSE in the root directory of this project.
 */

/*
 * data·café
 * Copyright (c) 2021-2022 Data Terrae
 * This program is under the terms of the GNU Affero General Public License version 3
 * The full license information can be found in LICENSE in the root directory of this project.
 */

/*
 * data·café
 * Copyright (c) 2021-2022 Data Terrae
 * This program is under the terms of the GNU Affero General Public License version 3
 * The full license information can be found in LICENSE in the root directory of this project.
 */

/*
 * data·café
 * Copyright (c) 2021-2022 Data Terrae
 * This program is under the terms of the GNU Affero General Public License version 3
 * The full license information can be found in LICENSE in the root directory of this project.
 */
var Type;
(function (Type) {
    Type["TEXT"] = "text";
    Type["NUMBER"] = "number";
})(Type || (Type = {}));

/*
 * data·café
 * Copyright (c) 2021-2022 Data Terrae
 * This program is under the terms of the GNU Affero General Public License version 3
 * The full license information can be found in LICENSE in the root directory of this project.
 */
/**
 * Generate the inital UI state.
 */
function initialUI() {
    return {
        loading: false,
        editable: false,
    };
}

/*
 * data·café
 * Copyright (c) 2021-2022 Data Terrae
 * This program is under the terms of the GNU Affero General Public License version 3
 * The full license information can be found in LICENSE in the root directory of this project.
 */

let DatagridComponent = class DatagridComponent {
    constructor() {
        this.NO_ITEMS = [];
        this.NO_COLS = [];
        this.ClrLoadingState = ClrLoadingState;
        this.ui = initialUI();
        /**
         * Dispatch everytime an item is updated in the datagrid.
         *
         * @see editable
         */
        this.edit = new EventEmitter();
    }
    /**
     * Set the data to be displayed.
     * @param value
     */
    set items(value) {
        this.updateUI(value ?? undefined);
    }
    /**
     * Transform the grid editable.
     *
     * @param something
     *
     * @see edit
     */
    set editable(something) {
        this.ui.editable = something != null && `${something}` !== "false";
    }
    onEdit(item, property, modification) {
        this.edit.emit({
            previous: { ...item },
            updated: {
                ...item,
                [property]: modification,
            },
            updatedProperties: [property],
        });
    }
    // -- Helper methods ---------------------------------------------------------
    updateUI(items) {
        if (items?.length) {
            // Generate structure
            const cols = Object
                .keys(items[0])
                .map(property => ({
                property,
                title: property,
                type: Type.TEXT,
            }));
            // Build data
            this.data = {
                items,
                cols,
            };
            // Update UI
            this.ui.loading = false;
        }
        else {
            // Clear data
            this.data = undefined;
            // Update UI
            this.ui.loading = true;
        }
    }
};
DatagridComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: DatagridComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
DatagridComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: DatagridComponent, selector: "dt-datagrid", inputs: { texts: "texts", actions: "actions", items: "items", editable: "editable" }, outputs: { edit: "edit" }, ngImport: i0, template: "<!--\n  ~ data\u00B7caf\u00E9\n  ~ Copyright (c) 2021-2022 Data Terrae\n  ~ This program is under the terms of the GNU Affero General Public License version 3\n  ~ The full license information can be found in LICENSE in the root directory of this project.\n  -->\n\n<h1 *ngIf=\"texts?.h1\" [innerText]=\"texts!.h1\"></h1>\n<h2 *ngIf=\"texts?.h2\" [innerText]=\"texts!.h2\"></h2>\n<h3 *ngIf=\"texts?.h3\" [innerText]=\"texts!.h3\"></h3>\n<p *ngIf=\"texts?.top\" [innerText]=\"texts!.top\"></p>\n\n<clr-datagrid [clrLoading]=\"ui.loading\">\n\n  <!-- Actions -->\n  <clr-dg-action-bar *ngIf=\"actions?.length\">\n    <div *ngFor=\"let action of actions\" class=\"btn-group\">\n      <button (click)=\"action.callback($event)\"\n              [clrLoading]=\"action.loading ?? ClrLoadingState.DEFAULT\"\n              class=\"btn btn-sm btn-secondary\"\n              type=\"button\">\n        <cds-icon *ngIf=\"action.icon\" [attr.shape]=\"action.icon\"></cds-icon>\n        {{ action.label }}\n      </button>\n    </div>\n  </clr-dg-action-bar>\n\n  <!-- Placeholder -->\n  <clr-dg-placeholder *ngIf=\"texts?.placeholder\">{{ texts!.placeholder }}</clr-dg-placeholder>\n\n  <!-- Columns -->\n  <clr-dg-column *ngFor=\"let col of data?.cols ?? NO_COLS\">{{ col.title }}</clr-dg-column>\n\n  <!-- Rows -->\n  <clr-dg-row *ngFor=\"let item of data?.items ?? NO_ITEMS\" [clrDgItem]=\"item\">\n    <clr-dg-cell *ngFor=\"let col of data?.cols ?? NO_COLS\">\n\n      <dt-cell-editable (save)=\"onEdit(item, col.property, $event.current)\"\n                        [enable]=\"ui.editable\"\n                        [fallbackLabel]=\"col.fallbackLabel ?? texts?.fallbackLabel ?? undefined\"\n                        [item]=\"item[col.property]\"></dt-cell-editable>\n    </clr-dg-cell>\n  </clr-dg-row>\n\n  <clr-dg-footer *ngIf=\"data && texts?.counter\">\n    {{ texts!.counter!(data!.items.length) }}\n  </clr-dg-footer>\n</clr-datagrid>\n\n<p *ngIf=\"texts?.bottom\" [innerText]=\"texts!.bottom\"></p>\n", styles: ["@charset \"UTF-8\";/*!\n * data\u00B7caf\u00E9\n * Copyright (c) 2021-2022 Data Terrae\n * This program is under the terms of the GNU Affero General Public License version 3\n * The full license information can be found in LICENSE in the root directory of this project.\n */\n"], components: [{ type: i1$1.ClrDatagrid, selector: "clr-datagrid", inputs: ["clrDgSingleSelectionAriaLabel", "clrDgSingleActionableAriaLabel", "clrDetailExpandableAriaLabel", "clrDgDisablePageFocus", "clrDgLoading", "clrDgSelected", "clrDgSingleSelected", "clrDgPreserveSelection", "clrDgRowSelection"], outputs: ["clrDgRefresh", "clrDgSelectedChange", "clrDgSingleSelectedChange"] }, { type: i1$1.ClrDatagridActionBar, selector: "clr-dg-action-bar" }, { type: i1$1.ClrLoadingButton, selector: "button[clrLoading]", inputs: ["disabled"], outputs: ["clrLoadingChange"] }, { type: i1$1.ClrDatagridPlaceholder, selector: "clr-dg-placeholder" }, { type: i1$1.ClrDatagridColumn, selector: "clr-dg-column", inputs: ["clrDgColType", "clrDgField", "clrFilterValue", "clrDgSortBy", "clrDgSorted", "clrDgSortOrder"], outputs: ["clrDgSortedChange", "clrDgSortOrderChange", "clrFilterValueChange"] }, { type: i1$1.ClrDatagridRow, selector: "clr-dg-row", inputs: ["clrDgSelected", "clrDgSelectable", "clrDgExpanded", "clrDgDetailOpenLabel", "clrDgDetailCloseLabel", "clrDgItem"], outputs: ["clrDgSelectedChange", "clrDgExpandedChange"] }, { type: i1$1.ClrDatagridCell, selector: "clr-dg-cell" }, { type: CellEditableComponent, selector: "dt-cell-editable", inputs: ["item", "fallbackLabel", "altValues", "itemToLabel", "enable", "validators"], outputs: ["save", "editing$"] }, { type: i1$1.ClrDatagridFooter, selector: "clr-dg-footer" }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.ÇlrDatagridMainRenderer, selector: "clr-datagrid" }, { type: i1$1.ÇlrDatagridWillyWonka, selector: "clr-datagrid" }, { type: i1$1.ÇlrActionableOompaLoompa, selector: "clr-datagrid, clr-dg-row" }, { type: i1$1.ÇlrExpandableOompaLoompa, selector: "clr-datagrid, clr-dg-row" }, { type: i1$1.ClrLoading, selector: "[clrLoading]", inputs: ["clrLoading"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$1.CdsIconCustomTag, selector: "cds-icon" }, { type: i1$1.ÇlrDatagridHeaderRenderer, selector: "clr-dg-column", outputs: ["clrDgColumnResize"] }, { type: i1$1.ÇlrDatagridRowRenderer, selector: "clr-dg-row, clr-dg-row-detail" }, { type: i1$1.ÇlrDatagridCellRenderer, selector: "clr-dg-cell" }] });
DatagridComponent = __decorate([
    UntilDestroy()
], DatagridComponent);
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: DatagridComponent, decorators: [{
            type: Component,
            args: [{ selector: 'dt-datagrid', template: "<!--\n  ~ data\u00B7caf\u00E9\n  ~ Copyright (c) 2021-2022 Data Terrae\n  ~ This program is under the terms of the GNU Affero General Public License version 3\n  ~ The full license information can be found in LICENSE in the root directory of this project.\n  -->\n\n<h1 *ngIf=\"texts?.h1\" [innerText]=\"texts!.h1\"></h1>\n<h2 *ngIf=\"texts?.h2\" [innerText]=\"texts!.h2\"></h2>\n<h3 *ngIf=\"texts?.h3\" [innerText]=\"texts!.h3\"></h3>\n<p *ngIf=\"texts?.top\" [innerText]=\"texts!.top\"></p>\n\n<clr-datagrid [clrLoading]=\"ui.loading\">\n\n  <!-- Actions -->\n  <clr-dg-action-bar *ngIf=\"actions?.length\">\n    <div *ngFor=\"let action of actions\" class=\"btn-group\">\n      <button (click)=\"action.callback($event)\"\n              [clrLoading]=\"action.loading ?? ClrLoadingState.DEFAULT\"\n              class=\"btn btn-sm btn-secondary\"\n              type=\"button\">\n        <cds-icon *ngIf=\"action.icon\" [attr.shape]=\"action.icon\"></cds-icon>\n        {{ action.label }}\n      </button>\n    </div>\n  </clr-dg-action-bar>\n\n  <!-- Placeholder -->\n  <clr-dg-placeholder *ngIf=\"texts?.placeholder\">{{ texts!.placeholder }}</clr-dg-placeholder>\n\n  <!-- Columns -->\n  <clr-dg-column *ngFor=\"let col of data?.cols ?? NO_COLS\">{{ col.title }}</clr-dg-column>\n\n  <!-- Rows -->\n  <clr-dg-row *ngFor=\"let item of data?.items ?? NO_ITEMS\" [clrDgItem]=\"item\">\n    <clr-dg-cell *ngFor=\"let col of data?.cols ?? NO_COLS\">\n\n      <dt-cell-editable (save)=\"onEdit(item, col.property, $event.current)\"\n                        [enable]=\"ui.editable\"\n                        [fallbackLabel]=\"col.fallbackLabel ?? texts?.fallbackLabel ?? undefined\"\n                        [item]=\"item[col.property]\"></dt-cell-editable>\n    </clr-dg-cell>\n  </clr-dg-row>\n\n  <clr-dg-footer *ngIf=\"data && texts?.counter\">\n    {{ texts!.counter!(data!.items.length) }}\n  </clr-dg-footer>\n</clr-datagrid>\n\n<p *ngIf=\"texts?.bottom\" [innerText]=\"texts!.bottom\"></p>\n", styles: ["@charset \"UTF-8\";/*!\n * data\u00B7caf\u00E9\n * Copyright (c) 2021-2022 Data Terrae\n * This program is under the terms of the GNU Affero General Public License version 3\n * The full license information can be found in LICENSE in the root directory of this project.\n */\n"] }]
        }], ctorParameters: function () { return []; }, propDecorators: { texts: [{
                type: Input
            }], actions: [{
                type: Input
            }], edit: [{
                type: Output
            }], items: [{
                type: Input
            }], editable: [{
                type: Input
            }] } });

/*
 * data·café
 * Copyright (c) 2021-2022 Data Terrae
 * This program is under the terms of the GNU Affero General Public License version 3
 * The full license information can be found in LICENSE in the root directory of this project.
 */

/*
 * data·café
 * Copyright (c) 2021-2022 Data Terrae
 * This program is under the terms of the GNU Affero General Public License version 3
 * The full license information can be found in LICENSE in the root directory of this project.
 */

/*
 * data·café
 * Copyright (c) 2021-2022 Data Terrae
 * This program is under the terms of the GNU Affero General Public License version 3
 * The full license information can be found in LICENSE in the root directory of this project.
 */

/*
 * data·café
 * Copyright (c) 2021-2022 Data Terrae
 * This program is under the terms of the GNU Affero General Public License version 3
 * The full license information can be found in LICENSE in the root directory of this project.
 */

/*
 * data·café
 * Copyright (c) 2021-2022 Data Terrae
 * This program is under the terms of the GNU Affero General Public License version 3
 * The full license information can be found in LICENSE in the root directory of this project.
 */

/*
 * data·café
 * Copyright (c) 2021-2022 Data Terrae
 * This program is under the terms of the GNU Affero General Public License version 3
 * The full license information can be found in LICENSE in the root directory of this project.
 */

/*
 * data·café
 * Copyright (c) 2021-2022 Data Terrae
 * This program is under the terms of the GNU Affero General Public License version 3
 * The full license information can be found in LICENSE in the root directory of this project.
 */
// Clarity web component
ClarityIcons.addIcons(...uniqueness(...IMPORT_ICONS));
class DatagridModule {
}
DatagridModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: DatagridModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
DatagridModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: DatagridModule, declarations: [DatagridComponent, CellEditableComponent], imports: [
        // Angular
        CommonModule,
        BrowserAnimationsModule,
        FormsModule,
        ReactiveFormsModule,
        // Third-party
        ClarityModule,
        EditableModule], exports: [DatagridComponent] });
DatagridModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: DatagridModule, imports: [[
            // Angular
            CommonModule,
            BrowserAnimationsModule,
            FormsModule,
            ReactiveFormsModule,
            // Third-party
            ClarityModule,
            EditableModule,
        ]] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: DatagridModule, decorators: [{
            type: NgModule,
            args: [{
                    declarations: [DatagridComponent, CellEditableComponent],
                    imports: [
                        // Angular
                        CommonModule,
                        BrowserAnimationsModule,
                        FormsModule,
                        ReactiveFormsModule,
                        // Third-party
                        ClarityModule,
                        EditableModule,
                    ],
                    exports: [DatagridComponent],
                }]
        }] });

/*
 * data·café
 * Copyright (c) 2021-2022 Data Terrae
 * This program is under the terms of the GNU Affero General Public License version 3
 * The full license information can be found in LICENSE in the root directory of this project.
 */

/*
 * data·café
 * Copyright (c) 2021-2022 Data Terrae
 * This program is under the terms of the GNU Affero General Public License version 3
 * The full license information can be found in LICENSE in the root directory of this project.
 */

/**
 * Generated bundle index. Do not edit.
 */

export { DatagridComponent, DatagridModule };
//# sourceMappingURL=data-cafe-datagrid.mjs.map