@porscheinformatik/clr-addons 19.9.9 → 19.9.10

package/export-datagrid-button/export-datagrid-button.component.d.ts

@@ -1,4 +1,4 @@
-import { EventEmitter, ElementRef } from '@angular/core';
+import { ElementRef, EventEmitter } from '@angular/core';
 import { ClrDatagrid } from '@clr/angular';
 import { ExportDatagridService } from './export-datagrid.service';
 import { ExportType, ExportTypeEnum } from './export-type.model';
@@ -11,12 +11,23 @@ export declare class ExportDatagridButtonComponent {
     isBackendExport: import("@angular/core").InputSignal<boolean>;
     exportTitlePrefix: import("@angular/core").InputSignal<string>;
     exportButtonPosition: import("@angular/core").InputSignal<"right" | "left">;
+    possibleExportTypes: import("@angular/core").WritableSignal<ExportTypeEnum[]>;
     readonly backendExport: EventEmitter<ExportTypeEnum>;
     readonly exportTypes: ExportType[];
-    readonly exportTypesFiltered: import("@angular/core").Signal<ExportType[]>;
+    readonly exportTypesFiltered: import("@angular/core").Signal<{
+        type: ExportTypeEnum;
+        value: string;
+    }[]>;
     constructor(exportService: ExportDatagridService);
     private exportExcel;
     onExport(type: ExportTypeEnum): void;
+    /**
+     * Updates the possible export types based on the current datagrid state and allowed export types.
+     * @param type the export type to update
+     * @param shouldExist whether the export type should exist in the possible export types
+     * @param exportTypesToShowVal the allowed export types to show
+     */
+    private updateExportType;
     private getRowsToExport;
     private getColumnsTitle;
     static ɵfac: i0.ɵɵFactoryDeclaration<ExportDatagridButtonComponent, never>;

package/fesm2022/clr-addons.mjs

@@ -1,10 +1,10 @@
 import * as i0 from '@angular/core';
-import { Component, NgModule, Injectable, EventEmitter, Output, Input, Directive, ViewChild, ContentChildren, TemplateRef, ViewChildren, HostBinding, ElementRef, Renderer2, forwardRef, Inject, ContentChild, Optional, inject, ChangeDetectorRef, output, ChangeDetectionStrategy, DestroyRef, signal, input, IterableDiffers, ViewContainerRef, effect, InjectionToken, isSignal, HostListener, LOCALE_ID, Self, computed } from '@angular/core';
+import { Component, NgModule, Injectable, EventEmitter, Input, Output, Directive, ViewChild, ContentChildren, TemplateRef, ViewChildren, HostBinding, ElementRef, Renderer2, forwardRef, Inject, ContentChild, Optional, inject, ChangeDetectorRef, output, ChangeDetectionStrategy, DestroyRef, signal, input, IterableDiffers, ViewContainerRef, effect, InjectionToken, isSignal, HostListener, LOCALE_ID, Self, computed } from '@angular/core';
 import * as i1 from '@angular/common';
 import { CommonModule, DOCUMENT, NgForOf, NgComponentOutlet, NgTemplateOutlet, getLocaleDateFormat, FormatWidth, NgIf, NgClass } from '@angular/common';
 import { ClarityIcons, arrowIcon, angleIcon, timesIcon, trashIcon, plusCircleIcon, exclamationCircleIcon, searchIcon, ellipsisVerticalIcon, pencilIcon, historyIcon as historyIcon$1, treeViewIcon, organizationIcon, calendarIcon, checkCircleIcon, windowCloseIcon, exclamationTriangleIcon } from '@cds/core/icon';
 import * as i2 from '@clr/angular';
-import { ClarityModule, ClrFormsModule, ClrDropdown, ClrForm, ClrAlert, ClrAlignment, ClrSide, ClrAxis, ClrPopoverToggleService, ClrPopoverEventsService, ClrPopoverPositionService, ClrIconModule, ClrDropdownModule, ClrDatagrid, ClrDatagridColumn, ClrDatagridSortOrder, DatagridPropertyComparator, ClrDatagridPagination, ClrDatagridFilter, ClrDateContainer, ClrLabel, ClrControlHelper, ClrControlError, ClrControlSuccess, ClrDatepickerModule } from '@clr/angular';
+import { ClarityModule, ClrFormsModule, ClrDropdown, ClrForm, ClrAlert, ClrAxis, ClrSide, ClrAlignment, ClrPopoverToggleService, ClrPopoverEventsService, ClrPopoverPositionService, ClrIconModule, ClrDropdownModule, ClrDatagrid, ClrDatagridColumn, ClrDatagridSortOrder, DatagridPropertyComparator, ClrDatagridPagination, ClrDatagridFilter, ClrDateContainer, ClrLabel, ClrControlHelper, ClrControlError, ClrControlSuccess, ClrDatepickerModule } from '@clr/angular';
 import * as i3$1 from '@angular/forms';
 import { FormsModule, NG_VALIDATORS, NgControl, NG_VALUE_ACCESSOR, ReactiveFormsModule, FormControl, NgModel } from '@angular/forms';
 import { Subject, BehaviorSubject, timer as timer$1, asyncScheduler, interval, debounceTime, fromEvent, of, tap, switchMap, filter as filter$1, ReplaySubject, takeUntil as takeUntil$1, delay } from 'rxjs';
@@ -14884,6 +14884,7 @@ class ExportDatagridButtonComponent {
         this.isBackendExport = input(false);
         this.exportTitlePrefix = input('export-datagrid');
         this.exportButtonPosition = input('right');
+        this.possibleExportTypes = signal([ExportTypeEnum.ALL]);
         /* outputs */
         this.backendExport = new EventEmitter();
         this.exportTypes = [
@@ -14892,12 +14893,26 @@ class ExportDatagridButtonComponent {
             { type: ExportTypeEnum.SELECTED, value: 'Selected entries' },
         ];
         this.exportTypesFiltered = computed(() => {
-            const exportTypesToShowVal = this.exportTypesToShow();
+            this.possibleExportTypes();
+            let exportTypesToShowVal = this.exportTypesToShow();
             if (!exportTypesToShowVal || exportTypesToShowVal.length === 0) {
-                return this.exportTypes;
+                exportTypesToShowVal = this.exportTypes;
             }
+            for (const column of this.datagrid().columns) {
+                // if a column filter is applied, show the FILTERED export type
+                column.filterValueChange.subscribe((col) => {
+                    this.updateExportType(ExportTypeEnum.FILTERED, !!col, exportTypesToShowVal);
+                });
+            }
+            this.datagrid().selectedChanged.subscribe(() => {
+                const hasSelection = this.datagrid().selection.current.length > 0;
+                // if a row is selected, show the SELECTED export type
+                this.updateExportType(ExportTypeEnum.SELECTED, hasSelection, exportTypesToShowVal);
+            });
             // Map to translated value, falling back to default if value is not provided
-            return exportTypesToShowVal.map(showType => {
+            return exportTypesToShowVal
+                .filter(showType => this.possibleExportTypes().some(et => et === showType.type))
+                .map(showType => {
                 const defaultType = this.exportTypes.find(et => et.type === showType.type);
                 return {
                     type: showType.type,
@@ -14933,6 +14948,22 @@ class ExportDatagridButtonComponent {
             this.exportExcel(type);
         }
     }
+    /**
+     * Updates the possible export types based on the current datagrid state and allowed export types.
+     * @param type the export type to update
+     * @param shouldExist whether the export type should exist in the possible export types
+     * @param exportTypesToShowVal the allowed export types to show
+     */
+    updateExportType(type, shouldExist, exportTypesToShowVal) {
+        const index = this.possibleExportTypes().findIndex(et => et === type);
+        const allowed = !exportTypesToShowVal || exportTypesToShowVal.length === 0 || exportTypesToShowVal.some(et => et.type === type);
+        if (index === -1 && allowed && shouldExist) {
+            this.possibleExportTypes.update(prev => [...prev, type]);
+        }
+        else if (allowed && !shouldExist && index !== -1) {
+            this.possibleExportTypes.update(prev => prev.filter(et => et !== type));
+        }
+    }
     getRowsToExport(type) {
         switch (type) {
             case ExportTypeEnum.ALL:
@@ -14958,11 +14989,11 @@ class ExportDatagridButtonComponent {
         return columnTitles;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: ExportDatagridButtonComponent, deps: [{ token: ExportDatagridService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.6", type: ExportDatagridButtonComponent, isStandalone: true, selector: "clr-export-datagrid-button", inputs: { datagrid: { classPropertyName: "datagrid", publicName: "datagrid", isSignal: true, isRequired: false, transformFunction: null }, datagridRef: { classPropertyName: "datagridRef", publicName: "datagridRef", isSignal: true, isRequired: false, transformFunction: null }, exportTypesToShow: { classPropertyName: "exportTypesToShow", publicName: "exportTypesToShow", isSignal: true, isRequired: false, transformFunction: null }, isBackendExport: { classPropertyName: "isBackendExport", publicName: "isBackendExport", isSignal: true, isRequired: false, transformFunction: null }, exportTitlePrefix: { classPropertyName: "exportTitlePrefix", publicName: "exportTitlePrefix", isSignal: true, isRequired: false, transformFunction: null }, exportButtonPosition: { classPropertyName: "exportButtonPosition", publicName: "exportButtonPosition", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { backendExport: "backendExport" }, ngImport: i0, template: "<div\n  [ngClass]=\"{\n    'export-btn-right': exportButtonPosition() === 'right',\n    'export-btn-left': exportButtonPosition() === 'left'\n  }\"\n>\n  <ng-container *ngIf=\"exportTypesFiltered().length === 1; else exportDropdown\">\n    <button class=\"btn btn-sm btn-outline\" type=\"button\" (click)=\"onExport(exportTypesFiltered()[0].type)\">\n      {{ exportTypesFiltered()[0].value }}\n    </button>\n  </ng-container>\n  <ng-template #exportDropdown>\n    <clr-dropdown>\n      <button class=\"btn btn-sm btn-outline\" clrDropdownTrigger type=\"button\">\n        Export\n        <cds-icon shape=\"angle\" direction=\"down\" size=\"12\"></cds-icon>\n      </button>\n      <clr-dropdown-menu *clrIfOpen clrPosition=\"bottom-right\">\n        <button *ngFor=\"let exportType of exportTypesFiltered()\" (click)=\"onExport(exportType.type)\" clrDropdownItem>\n          {{ exportType.value }}\n        </button>\n      </clr-dropdown-menu>\n    </clr-dropdown>\n  </ng-template>\n</div>\n", styles: [".export-btn-right{display:flex;justify-content:flex-end}.export-btn-left{display:flex;justify-content:flex-start}\n"], dependencies: [{ kind: "ngmodule", type: ClarityModule }, { kind: "directive", type: i2.CdsIconCustomTag, selector: "cds-icon" }, { kind: "directive", type: i2.ClrIfOpen, selector: "[clrIfOpen]", inputs: ["clrIfOpen"], outputs: ["clrIfOpenChange"] }, { kind: "component", type: i2.ClrDropdown, selector: "clr-dropdown", inputs: ["clrCloseMenuOnItemClick"] }, { kind: "component", type: i2.ClrDropdownMenu, selector: "clr-dropdown-menu", inputs: ["clrPosition"] }, { kind: "directive", type: i2.ClrDropdownTrigger, selector: "[clrDropdownTrigger],[clrDropdownToggle]" }, { kind: "directive", type: i2.ClrDropdownItem, selector: "[clrDropdownItem]", inputs: ["clrDisabled", "id"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.6", type: ExportDatagridButtonComponent, isStandalone: true, selector: "clr-export-datagrid-button", inputs: { datagrid: { classPropertyName: "datagrid", publicName: "datagrid", isSignal: true, isRequired: false, transformFunction: null }, datagridRef: { classPropertyName: "datagridRef", publicName: "datagridRef", isSignal: true, isRequired: false, transformFunction: null }, exportTypesToShow: { classPropertyName: "exportTypesToShow", publicName: "exportTypesToShow", isSignal: true, isRequired: false, transformFunction: null }, isBackendExport: { classPropertyName: "isBackendExport", publicName: "isBackendExport", isSignal: true, isRequired: false, transformFunction: null }, exportTitlePrefix: { classPropertyName: "exportTitlePrefix", publicName: "exportTitlePrefix", isSignal: true, isRequired: false, transformFunction: null }, exportButtonPosition: { classPropertyName: "exportButtonPosition", publicName: "exportButtonPosition", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { backendExport: "backendExport" }, ngImport: i0, template: "<div\n  [ngClass]=\"{\n    'export-btn-right': exportButtonPosition() === 'right',\n    'export-btn-left': exportButtonPosition() === 'left'\n  }\"\n>\n  <ng-container *ngIf=\"exportTypesFiltered().length === 1; else exportDropdown\">\n    <button\n      class=\"btn btn-sm btn-outline custom-button-export\"\n      type=\"button\"\n      (click)=\"onExport(exportTypesFiltered()[0].type)\"\n    >\n      {{ exportTypesFiltered()[0].value }}\n    </button>\n  </ng-container>\n  <ng-template #exportDropdown>\n    <clr-dropdown>\n      <button class=\"btn btn-sm btn-outline\" clrDropdownTrigger type=\"button\">\n        Export\n        <cds-icon shape=\"angle\" direction=\"down\" size=\"12\"></cds-icon>\n      </button>\n      <clr-dropdown-menu *clrIfOpen clrPosition=\"bottom-right\">\n        <button *ngFor=\"let exportType of exportTypesFiltered()\" (click)=\"onExport(exportType.type)\" clrDropdownItem>\n          {{ exportType.value }}\n        </button>\n      </clr-dropdown-menu>\n    </clr-dropdown>\n  </ng-template>\n</div>\n", styles: [".export-btn-right{display:flex;justify-content:flex-end}.export-btn-left{display:flex;justify-content:flex-start}.custom-button-export{margin:0}\n"], dependencies: [{ kind: "ngmodule", type: ClarityModule }, { kind: "directive", type: i2.CdsIconCustomTag, selector: "cds-icon" }, { kind: "directive", type: i2.ClrIfOpen, selector: "[clrIfOpen]", inputs: ["clrIfOpen"], outputs: ["clrIfOpenChange"] }, { kind: "component", type: i2.ClrDropdown, selector: "clr-dropdown", inputs: ["clrCloseMenuOnItemClick"] }, { kind: "component", type: i2.ClrDropdownMenu, selector: "clr-dropdown-menu", inputs: ["clrPosition"] }, { kind: "directive", type: i2.ClrDropdownTrigger, selector: "[clrDropdownTrigger],[clrDropdownToggle]" }, { kind: "directive", type: i2.ClrDropdownItem, selector: "[clrDropdownItem]", inputs: ["clrDisabled", "id"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: ExportDatagridButtonComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'clr-export-datagrid-button', standalone: true, imports: [ClarityModule, NgIf, NgForOf, NgClass], template: "<div\n  [ngClass]=\"{\n    'export-btn-right': exportButtonPosition() === 'right',\n    'export-btn-left': exportButtonPosition() === 'left'\n  }\"\n>\n  <ng-container *ngIf=\"exportTypesFiltered().length === 1; else exportDropdown\">\n    <button class=\"btn btn-sm btn-outline\" type=\"button\" (click)=\"onExport(exportTypesFiltered()[0].type)\">\n      {{ exportTypesFiltered()[0].value }}\n    </button>\n  </ng-container>\n  <ng-template #exportDropdown>\n    <clr-dropdown>\n      <button class=\"btn btn-sm btn-outline\" clrDropdownTrigger type=\"button\">\n        Export\n        <cds-icon shape=\"angle\" direction=\"down\" size=\"12\"></cds-icon>\n      </button>\n      <clr-dropdown-menu *clrIfOpen clrPosition=\"bottom-right\">\n        <button *ngFor=\"let exportType of exportTypesFiltered()\" (click)=\"onExport(exportType.type)\" clrDropdownItem>\n          {{ exportType.value }}\n        </button>\n      </clr-dropdown-menu>\n    </clr-dropdown>\n  </ng-template>\n</div>\n", styles: [".export-btn-right{display:flex;justify-content:flex-end}.export-btn-left{display:flex;justify-content:flex-start}\n"] }]
+            args: [{ selector: 'clr-export-datagrid-button', standalone: true, imports: [ClarityModule, NgIf, NgForOf, NgClass], template: "<div\n  [ngClass]=\"{\n    'export-btn-right': exportButtonPosition() === 'right',\n    'export-btn-left': exportButtonPosition() === 'left'\n  }\"\n>\n  <ng-container *ngIf=\"exportTypesFiltered().length === 1; else exportDropdown\">\n    <button\n      class=\"btn btn-sm btn-outline custom-button-export\"\n      type=\"button\"\n      (click)=\"onExport(exportTypesFiltered()[0].type)\"\n    >\n      {{ exportTypesFiltered()[0].value }}\n    </button>\n  </ng-container>\n  <ng-template #exportDropdown>\n    <clr-dropdown>\n      <button class=\"btn btn-sm btn-outline\" clrDropdownTrigger type=\"button\">\n        Export\n        <cds-icon shape=\"angle\" direction=\"down\" size=\"12\"></cds-icon>\n      </button>\n      <clr-dropdown-menu *clrIfOpen clrPosition=\"bottom-right\">\n        <button *ngFor=\"let exportType of exportTypesFiltered()\" (click)=\"onExport(exportType.type)\" clrDropdownItem>\n          {{ exportType.value }}\n        </button>\n      </clr-dropdown-menu>\n    </clr-dropdown>\n  </ng-template>\n</div>\n", styles: [".export-btn-right{display:flex;justify-content:flex-end}.export-btn-left{display:flex;justify-content:flex-start}.custom-button-export{margin:0}\n"] }]
         }], ctorParameters: () => [{ type: ExportDatagridService }], propDecorators: { backendExport: [{
                 type: Output
             }] } });