@dereekb/dbx-web 9.24.16 → 9.24.18

package/fesm2020/dereekb-dbx-web.mjs

@@ -1885,6 +1885,9 @@ class DbxFilterPopoverComponent extends AbstractPopoverDirective {
     constructor(popover) {
         super(popover);
         this._closeOnChangeSub = new SubscriptionObject();
+        this.showCloseButton = this.config.showCloseButton ?? !(this.config.closeOnFilterChange ?? true);
+        this.closeButtonText = this.config.closeButtonText ?? 'Close';
+        this.customizeButtonText = this.config.customizeButtonText ?? 'Customize';
         /**
          * Whether or not to display buttons to toggle between custom and preset filters.
          */
@@ -1892,15 +1895,19 @@ class DbxFilterPopoverComponent extends AbstractPopoverDirective {
         this._showPreset = new BehaviorSubject(false);
         this.showPreset$ = this._showPreset.asObservable();
         this.config$ = this._showPreset.pipe(map((showPreset) => {
-            const { closeOnFilterChange = true, connector, initialFilterObs, customFilterComponentClass, presetFilterComponentClass } = this.config;
+            const { closeOnFilterChange = true, connector, initialFilterObs, customFilterComponentClass, presetFilterComponentClass, customFilterComponentConfig, presetFilterComponentConfig } = this.config;
             let componentClass;
+            let baseConfig;
             if (showPreset) {
-                componentClass = presetFilterComponentClass;
+                componentClass = (presetFilterComponentConfig?.componentClass ?? presetFilterComponentClass);
+                baseConfig = presetFilterComponentConfig;
             }
             else {
-                componentClass = customFilterComponentClass;
+                componentClass = (customFilterComponentConfig?.componentClass ?? customFilterComponentClass);
+                baseConfig = customFilterComponentConfig;
             }
             const config = {
+                ...baseConfig,
                 componentClass,
                 init: (filterSource) => {
                     connector.connectWithSource(filterSource);
@@ -1909,16 +1916,17 @@ class DbxFilterPopoverComponent extends AbstractPopoverDirective {
                     }
                     if (closeOnFilterChange !== false) {
                         this._closeOnChangeSub.subscription = filterSource.filter$.pipe(skip(1), filterMaybe(), first(), defaultIfEmpty(undefined)).subscribe(() => {
-                            console.log();
                             this.close();
                         });
                     }
+                    // run the next init if provided
+                    baseConfig?.init?.(filterSource);
                 }
             };
             return config;
         }));
     }
-    static openPopover(popupService, { width, height, isResizable, origin, header, icon, customFilterComponentClass, presetFilterComponentClass, connector, initialFilterObs, closeOnFilterChange }, popoverKey) {
+    static openPopover(popupService, { width, height, isResizable, origin, header, icon, customFilterComponentClass, presetFilterComponentClass, customFilterComponentConfig, presetFilterComponentConfig, connector, initialFilterObs, closeOnFilterChange, customizeButtonText, showCloseButton, closeButtonText }, popoverKey) {
         return popupService.open({
             key: popoverKey ?? DEFAULT_FILTER_POPOVER_KEY,
             origin,
@@ -1929,8 +1937,13 @@ class DbxFilterPopoverComponent extends AbstractPopoverDirective {
             data: {
                 header,
                 icon,
+                customizeButtonText,
+                showCloseButton,
+                closeButtonText,
                 customFilterComponentClass,
                 presetFilterComponentClass,
+                customFilterComponentConfig,
+                presetFilterComponentConfig,
                 connector,
                 initialFilterObs,
                 closeOnFilterChange
@@ -1948,14 +1961,14 @@ class DbxFilterPopoverComponent extends AbstractPopoverDirective {
     }
     ngOnInit() {
         let showPreset = false;
-        const { customFilterComponentClass, presetFilterComponentClass } = this.config;
-        if (customFilterComponentClass) {
+        const { customFilterComponentClass, presetFilterComponentClass, customFilterComponentConfig, presetFilterComponentConfig } = this.config;
+        if (customFilterComponentClass || customFilterComponentConfig) {
             showPreset = false;
         }
-        if (presetFilterComponentClass) {
+        if (presetFilterComponentClass || presetFilterComponentConfig) {
             showPreset = true;
         }
-        if (!customFilterComponentClass && !presetFilterComponentClass) {
+        if (!(customFilterComponentClass || customFilterComponentConfig) && !(presetFilterComponentClass || presetFilterComponentConfig)) {
             throw new Error('Requires a preset or custom class provided for DbxFilterPopover.');
         }
         this._showPreset.next(showPreset);
@@ -1972,10 +1985,10 @@ class DbxFilterPopoverComponent extends AbstractPopoverDirective {
     }
 }
 DbxFilterPopoverComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DbxFilterPopoverComponent, deps: [{ token: DbxPopoverComponent }], target: i0.ɵɵFactoryTarget.Component });
-DbxFilterPopoverComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: DbxFilterPopoverComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<dbx-popover-content>\n  <!-- Header -->\n  <dbx-popover-header [icon]=\"icon\" [header]=\"header\">\n    <ng-container *ngIf=\"showSwitchButtons\" [ngSwitch]=\"showPreset$ | async\">\n      <button *ngSwitchCase=\"true\" mat-flat-button color=\"accent\" (click)=\"showCustom()\">Custom</button>\n      <button *ngSwitchCase=\"false\" mat-flat-button color=\"accent\" (click)=\"showPresets()\">Presets</button>\n    </ng-container>\n  </dbx-popover-header>\n  <!-- Content -->\n  <dbx-popover-scroll-content>\n    <dbx-injection [config]=\"config$ | async\"></dbx-injection>\n  </dbx-popover-scroll-content>\n</dbx-popover-content>\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: DbxPopoverContentComponent, selector: "dbx-popover-content" }, { kind: "component", type: DbxPopoverHeaderComponent, selector: "dbx-popover-header", inputs: ["header", "icon"] }, { kind: "component", type: DbxPopoverScrollContentComponent, selector: "dbx-popover-scroll-content" }, { kind: "component", type: i1$2.DbxInjectionComponent, selector: "dbx-injection, [dbxInjection], [dbx-injection]", inputs: ["config", "template"] }, { kind: "component", type: i2.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] });
+DbxFilterPopoverComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: DbxFilterPopoverComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<dbx-popover-content>\n  <!-- Header -->\n  <dbx-popover-header [icon]=\"icon\" [header]=\"header\">\n    <ng-container *ngIf=\"showSwitchButtons\" [ngSwitch]=\"showPreset$ | async\">\n      <button *ngSwitchCase=\"true\" mat-flat-button color=\"accent\" (click)=\"showCustom()\">{{ customizeButtonText }}</button>\n      <button *ngSwitchCase=\"false\" mat-flat-button color=\"accent\" (click)=\"showPresets()\">Presets</button>\n    </ng-container>\n    <ng-container *ngIf=\"showCloseButton\">\n      <dbx-button-spacer *ngIf=\"showSwitchButtons\"></dbx-button-spacer>\n      <button mat-stroked-button color=\"accent\" (click)=\"close()\">{{ closeButtonText }}</button>\n    </ng-container>\n  </dbx-popover-header>\n  <!-- Content -->\n  <dbx-popover-scroll-content>\n    <dbx-injection [config]=\"config$ | async\"></dbx-injection>\n  </dbx-popover-scroll-content>\n</dbx-popover-content>\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: DbxPopoverContentComponent, selector: "dbx-popover-content" }, { kind: "component", type: DbxPopoverHeaderComponent, selector: "dbx-popover-header", inputs: ["header", "icon"] }, { kind: "component", type: DbxPopoverScrollContentComponent, selector: "dbx-popover-scroll-content" }, { kind: "directive", type: DbxButtonSpacerDirective, selector: "dbx-button-spacer,[dbxButtonSpacer]" }, { kind: "component", type: i1$2.DbxInjectionComponent, selector: "dbx-injection, [dbxInjection], [dbx-injection]", inputs: ["config", "template"] }, { kind: "component", type: i2.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DbxFilterPopoverComponent, decorators: [{
             type: Component,
-            args: [{ template: "<dbx-popover-content>\n  <!-- Header -->\n  <dbx-popover-header [icon]=\"icon\" [header]=\"header\">\n    <ng-container *ngIf=\"showSwitchButtons\" [ngSwitch]=\"showPreset$ | async\">\n      <button *ngSwitchCase=\"true\" mat-flat-button color=\"accent\" (click)=\"showCustom()\">Custom</button>\n      <button *ngSwitchCase=\"false\" mat-flat-button color=\"accent\" (click)=\"showPresets()\">Presets</button>\n    </ng-container>\n  </dbx-popover-header>\n  <!-- Content -->\n  <dbx-popover-scroll-content>\n    <dbx-injection [config]=\"config$ | async\"></dbx-injection>\n  </dbx-popover-scroll-content>\n</dbx-popover-content>\n" }]
+            args: [{ template: "<dbx-popover-content>\n  <!-- Header -->\n  <dbx-popover-header [icon]=\"icon\" [header]=\"header\">\n    <ng-container *ngIf=\"showSwitchButtons\" [ngSwitch]=\"showPreset$ | async\">\n      <button *ngSwitchCase=\"true\" mat-flat-button color=\"accent\" (click)=\"showCustom()\">{{ customizeButtonText }}</button>\n      <button *ngSwitchCase=\"false\" mat-flat-button color=\"accent\" (click)=\"showPresets()\">Presets</button>\n    </ng-container>\n    <ng-container *ngIf=\"showCloseButton\">\n      <dbx-button-spacer *ngIf=\"showSwitchButtons\"></dbx-button-spacer>\n      <button mat-stroked-button color=\"accent\" (click)=\"close()\">{{ closeButtonText }}</button>\n    </ng-container>\n  </dbx-popover-header>\n  <!-- Content -->\n  <dbx-popover-scroll-content>\n    <dbx-injection [config]=\"config$ | async\"></dbx-injection>\n  </dbx-popover-scroll-content>\n</dbx-popover-content>\n" }]
         }], ctorParameters: function () { return [{ type: DbxPopoverComponent }]; } });
 
 /**
@@ -2268,6 +2281,7 @@ class AbstractDbxPresetFilterMenuComponent {
     constructor(filterSourceDirective) {
         this.filterSourceDirective = filterSourceDirective;
         //TODO: Rename to AbstractDbxPresetFilterMenuDirective with next breaking changes
+        this.presetSelected = new EventEmitter();
         this._presets = new BehaviorSubject([]);
         this.selected$ = this.filterSourceDirective.filter$.pipe(startWith(undefined), distinctUntilChanged(), shareReplay(1));
         this.presetsWithPresetStringOnly$ = this._presets.pipe(map((x) => x.filter((y) => Boolean(y.preset))));
@@ -2331,16 +2345,20 @@ class AbstractDbxPresetFilterMenuComponent {
             }
             this.filterSourceDirective.setFilter(filter);
         }
+        this.presetSelected.next(preset);
     }
     ngOnDestroy() {
         this._presets.complete();
+        this.presetSelected.complete();
     }
 }
 AbstractDbxPresetFilterMenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: AbstractDbxPresetFilterMenuComponent, deps: [{ token: i1$2.FilterSourceDirective }], target: i0.ɵɵFactoryTarget.Directive });
-AbstractDbxPresetFilterMenuComponent.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.2.12", type: AbstractDbxPresetFilterMenuComponent, inputs: { presets: "presets" }, ngImport: i0 });
+AbstractDbxPresetFilterMenuComponent.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.2.12", type: AbstractDbxPresetFilterMenuComponent, inputs: { presets: "presets" }, outputs: { presetSelected: "presetSelected" }, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: AbstractDbxPresetFilterMenuComponent, decorators: [{
             type: Directive
-        }], ctorParameters: function () { return [{ type: i1$2.FilterSourceDirective }]; }, propDecorators: { presets: [{
+        }], ctorParameters: function () { return [{ type: i1$2.FilterSourceDirective }]; }, propDecorators: { presetSelected: [{
+                type: Output
+            }], presets: [{
                 type: Input
             }] } });