@ecodev/natural 38.0.1 → 41.0.0

package/bundles/ecodev-natural.umd.js

@@ -1,7 +1,7 @@
 (function (global, factory) {
     typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/localize/init'), require('@angular/core'), require('rxjs'), require('@angular/forms'), require('@angular/router'), require('lodash-es'), require('@angular/material/dialog'), require('@angular/material/snack-bar'), require('rxjs/operators'), require('@angular/material/table'), require('@angular/cdk/collections'), require('apollo-angular'), require('@apollo/client/core'), require('@angular/material/core'), require('@angular/cdk/platform'), require('@angular/common'), require('@angular/material/button'), require('@angular/material/checkbox'), require('@angular/material/menu'), require('@angular/material/icon'), require('@angular/platform-browser'), require('@angular/material/tooltip'), require('@angular/material/tabs'), require('@angular/material/form-field'), require('@angular/material/input'), require('@angular/material/select'), require('@angular/material/list'), require('@angular/cdk/overlay'), require('@angular/cdk/portal'), require('@angular/cdk/a11y'), require('@angular/animations'), require('@angular/material/datepicker'), require('@angular/cdk/tree'), require('@angular/material/chips'), require('@angular/material/progress-spinner'), require('@angular/material/tree'), require('@angular/material/autocomplete'), require('@angular/cdk/coercion'), require('@angular/flex-layout'), require('@angular/flex-layout/core'), require('@angular/material/paginator'), require('@angular/material/sidenav'), require('ts-md5')) :
     typeof define === 'function' && define.amd ? define('@ecodev/natural', ['exports', '@angular/localize/init', '@angular/core', 'rxjs', '@angular/forms', '@angular/router', 'lodash-es', '@angular/material/dialog', '@angular/material/snack-bar', 'rxjs/operators', '@angular/material/table', '@angular/cdk/collections', 'apollo-angular', '@apollo/client/core', '@angular/material/core', '@angular/cdk/platform', '@angular/common', '@angular/material/button', '@angular/material/checkbox', '@angular/material/menu', '@angular/material/icon', '@angular/platform-browser', '@angular/material/tooltip', '@angular/material/tabs', '@angular/material/form-field', '@angular/material/input', '@angular/material/select', '@angular/material/list', '@angular/cdk/overlay', '@angular/cdk/portal', '@angular/cdk/a11y', '@angular/animations', '@angular/material/datepicker', '@angular/cdk/tree', '@angular/material/chips', '@angular/material/progress-spinner', '@angular/material/tree', '@angular/material/autocomplete', '@angular/cdk/coercion', '@angular/flex-layout', '@angular/flex-layout/core', '@angular/material/paginator', '@angular/material/sidenav', 'ts-md5'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.ecodev = global.ecodev || {}, global.ecodev.natural = {}), global.ng.localize.init, global.ng.core, global.rxjs, global.ng.forms, global.ng.router, global["lodash-es"], global.ng.material.dialog, global.ng.material.snackBar, global.rxjs.operators, global.ng.material.table, global.ng.cdk.collections, global["apollo-angular"], global.core, global.ng.material.core, global.ng.cdk.platform, global.ng.common, global.ng.material.button, global.ng.material.checkbox, global.ng.material.menu, global.ng.material.icon, global.ng.platformBrowser, global.ng.material.tooltip, global.ng.material.tabs, global.ng.material.formField, global.ng.material.input, global.ng.material.select, global.ng.material.list, global.ng.cdk.overlay, global.ng.cdk.portal, global.ng.cdk.a11y, global.ng.animations, global.ng.material.datepicker, global.ng.cdk.tree, global.ng.material.chips, global.ng.material.progressSpinner, global.ng.material.tree, global.ng.material.autocomplete, global.ng.cdk.coercion, global.ng.flexLayout, global.ng.flexLayout.core, global.ng.material.paginator, global.ng.material.sidenav, global.tsMd5));
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.ecodev = global.ecodev || {}, global.ecodev.natural = {}), global.ng.localize.init, global.ng.core, global.rxjs, global.ng.forms, global.ng.router, global["lodash-es"], global.ng.material.dialog, global.ng.material.snackBar, global.rxjs.operators, global.ng.material.table, global.ng.cdk.collections, global["apollo-angular"], global["@apollo/client/core"], global.ng.material.core, global.ng.cdk.platform, global.ng.common, global.ng.material.button, global.ng.material.checkbox, global.ng.material.menu, global.ng.material.icon, global.ng.platformBrowser, global.ng.material.tooltip, global.ng.material.tabs, global.ng.material.formField, global.ng.material.input, global.ng.material.select, global.ng.material.list, global.ng.cdk.overlay, global.ng.cdk.portal, global.ng.cdk.a11y, global.ng.animations, global.ng.material.datepicker, global.ng.cdk.tree, global.ng.material.chips, global.ng.material.progressSpinner, global.ng.material.tree, global.ng.material.autocomplete, global.ng.cdk.coercion, global.ng.flexLayout, global.ng.flexLayout.core, global.ng.material.paginator, global.ng.material.sidenav, global["ts-md5"]));
 })(this, (function (exports, init, i0, rxjs, forms, i1$1, lodashEs, i1, i2, operators, table, collections, i1$2, core, i1$3, i2$1, i1$4, button, checkbox, menu, icon, i2$2, tooltip, tabs, formField, input, select, list, i1$5, portal, a11y, animations, datepicker, tree$1, chips, progressSpinner, tree, autocomplete, coercion, flexLayout, i4, paginator, sidenav, tsMd5) { 'use strict';
 
     function _interopNamespace(e) {
@@ -2384,6 +2384,21 @@
             return rxjs.timer(500).pipe(operators.switchMap(function () { return modelService.count(qvm).pipe(operators.map(function (count) { return (count > 0 ? { duplicateValue: count } : null); })); }));
         };
     }
+    /**
+     * Returns an async validator function that checks that the form control value is available
+     *
+     * Similar to `unique` validator, but allows to use a custom query for when the client does
+     * not have permissions for `modelService.count()`.
+     */
+    function available(getAvailableQuery, excludedId) {
+        if (excludedId === void 0) { excludedId = null; }
+        return function (control) {
+            if (!control.value || !control.dirty) {
+                return rxjs.of(null);
+            }
+            return rxjs.timer(500).pipe(operators.switchMap(function () { return getAvailableQuery(control.value, excludedId).pipe(operators.map(function (isAvailable) { return (isAvailable ? null : { available: true }); })); }));
+        };
+    }
     /**
      * Return all errors recursively for the given Form or control
      */
@@ -3357,7 +3372,7 @@
      * Components inheriting from this class can be used as standalone with input attributes.
      *
      * Usage :
-     * <natural-my-listing [forcedVariables]="{filter:...}" [initialColumns]="['col1']" [persistSearch]="false">
+     * <natural-my-listing [forcedVariables]="{filter:...}" [selectedColumns]="['col1']" [persistSearch]="false">
      */
     // @dynamic
     var NaturalAbstractList = /** @class */ (function (_super) {
@@ -3373,7 +3388,7 @@
             /**
              * Columns list after interaction with <natural-columns-picker>
              */
-            _this._selectedColumns = [];
+            _this.columnsForTable = [];
             /**
              * The default column selection that automatically happened after <natural-columns-picker> initialization
              */
@@ -3624,7 +3639,7 @@
          * Uses data provided by router such as:
          *
          * - `route.data.forcedVariables`
-         * - `route.data.initialColumns`
+         * - `route.data.selectedColumns`
          */
         NaturalAbstractList.prototype.initFromRoute = function () {
             // Variables
@@ -3632,8 +3647,8 @@
                 this.applyForcedVariables(this.route.snapshot.data.forcedVariables);
             }
             // Columns
-            if (this.route.snapshot.data.initialColumns) {
-                this.initialColumns = this.route.snapshot.data.initialColumns;
+            if (this.route.snapshot.data.selectedColumns) {
+                this.selectedColumns = this.route.snapshot.data.selectedColumns;
             }
         };
         NaturalAbstractList.prototype.getDataObservable = function () {
@@ -3659,6 +3674,11 @@
             if (sorting) {
                 this.variablesManager.set('sorting', { sorting: sorting });
             }
+            // Columns
+            var persistedColumns = this.persistenceService.get('col', this.route, storageKey);
+            if (typeof persistedColumns === 'string') {
+                this.selectedColumns = persistedColumns.split(',');
+            }
             // Natural search : ns
             this.naturalSearchSelections = fromUrl(this.persistenceService.get('ns', this.route, storageKey));
             this.translateSearchAndRefreshList(this.naturalSearchSelections, true);
@@ -3716,34 +3736,21 @@
                 this.variablesManager.set('sorting', { sorting: variables.sorting });
             }
         };
-        Object.defineProperty(NaturalAbstractList.prototype, "selectedColumns", {
-            get: function () {
-                return this._selectedColumns;
-            },
-            set: function (columns) {
-                this._selectedColumns = columns;
-                if (!this.persistSearch || this.isPanel) {
-                    return;
-                }
-                // The first selection we receive is the default one made by <natural-columns-picker>
-                if (!this.defaultSelectedColumns) {
-                    this.defaultSelectedColumns = columns;
-                    // Now that we know the defaults, we can try to reload from persistence
-                    var storageKey = this.getStorageKey();
-                    var persistedColumns = this.persistenceService.get('col', this.route, storageKey);
-                    if (typeof persistedColumns === 'string') {
-                        this.selectedColumns = persistedColumns.split(',');
-                    }
-                }
-                else {
-                    // Persist only if wanted columns are different from default selection
-                    var value = lodashEs.isEqual(this.defaultSelectedColumns, columns) ? null : columns.join(',');
-                    this.persistenceService.persist('col', value, this.route, this.getStorageKey());
-                }
-            },
-            enumerable: false,
-            configurable: true
-        });
+        NaturalAbstractList.prototype.selectColumns = function (columns) {
+            this.columnsForTable = columns;
+            if (!this.persistSearch || this.isPanel) {
+                return;
+            }
+            // The first selection we receive is the default one made by <natural-columns-picker>
+            if (!this.defaultSelectedColumns) {
+                this.defaultSelectedColumns = columns;
+            }
+            else {
+                // Persist only if wanted columns are different from default selection
+                var value = lodashEs.isEqual(this.defaultSelectedColumns, columns) ? null : columns.join(',');
+                this.persistenceService.persist('col', value, this.route, this.getStorageKey());
+            }
+        };
         return NaturalAbstractList;
     }(NaturalAbstractPanel));
     NaturalAbstractList.decorators = [
@@ -3755,7 +3762,7 @@
     ]; };
     NaturalAbstractList.propDecorators = {
         persistSearch: [{ type: i0.Input }],
-        initialColumns: [{ type: i0.Input }],
+        selectedColumns: [{ type: i0.Input }],
         forcedVariables: [{ type: i0.Input }]
     };
     var templateObject_1$6, templateObject_2$1, templateObject_3$1, templateObject_4$1;
@@ -3953,6 +3960,17 @@
             return;
         }));
     }
+    /**
+     * For debugging purpose only, will dump in console everything that happen to
+     * the observable
+     */
+    function debug(debugName) {
+        return operators.tap({
+            next: function (value) { return console.log('NEXT', debugName, value); },
+            error: function (error) { return console.log('ERROR', debugName, error); },
+            complete: function () { return console.log('COMPLETE', debugName); },
+        });
+    }
 
     var NaturalAbstractModelService = /** @class */ (function () {
         function NaturalAbstractModelService(apollo, name, oneQuery, allQuery, createMutation, updateMutation, deleteMutation) {
@@ -4844,20 +4862,38 @@
         function NaturalColumnsPickerComponent(changeDetectorRef) {
             this.changeDetectorRef = changeDetectorRef;
             /**
-             * Emit a list of column keys whenever the selection changes
+             * Emit a list of valid and selected column keys whenever the selection changes
              */
             this.selectionChange = new i0.EventEmitter();
-            this.defaultSelectionChange = new i0.EventEmitter();
+            /**
+             * Available columns are defined by options in the template
+             */
             this.availableColumns = null;
+            /**
+             * Displayed options in the dropdown menu
+             */
             this.displayedColumns = [];
             this.ngUnsubscribe = new rxjs.Subject();
         }
-        Object.defineProperty(NaturalColumnsPickerComponent.prototype, "selection", {
+        Object.defineProperty(NaturalColumnsPickerComponent.prototype, "selections", {
+            /**
+             * Set the columns that are wanted but might be unavailable.
+             *
+             * If a column is unavailable it will be ignored silently. To know what columns were actually applied
+             * you should use `selectionChange`.
+             *
+             * It is often set once on component initialization, but it can also be set again later in the lifespan of the component.
+             */
             set: function (columns) {
                 var _a;
+                this._selections = columns;
+                if (!columns || !this.availableColumns) {
+                    return;
+                }
                 (_a = this.availableColumns) === null || _a === void 0 ? void 0 : _a.forEach(function (col) {
                     col.checked = columns.includes(col.key);
                 });
+                this.updateColumns();
             },
             enumerable: false,
             configurable: true
@@ -4874,8 +4910,10 @@
             var _this = this;
             var _a, _b, _c;
             (_a = this.availableColumns) === null || _a === void 0 ? void 0 : _a.forEach(function (col) {
-                col.checked = _this.initialSelection ? _this.initialSelection.includes(col.key) : col.checked;
+                var _a;
+                col.checked = ((_a = _this._selections) === null || _a === void 0 ? void 0 : _a.length) ? _this._selections.includes(col.key) : col.checked;
             });
+            // Show options only for columns that are not hidden
             this.displayedColumns = (_c = (_b = this.availableColumns) === null || _b === void 0 ? void 0 : _b.filter(function (col) { return !col.hidden; })) !== null && _c !== void 0 ? _c : [];
         };
         NaturalColumnsPickerComponent.prototype.updateColumns = function () {
@@ -4900,10 +4938,8 @@
         { type: i0.ChangeDetectorRef }
     ]; };
     NaturalColumnsPickerComponent.propDecorators = {
-        selection: [{ type: i0.Input }],
+        selections: [{ type: i0.Input }],
         selectionChange: [{ type: i0.Output }],
-        defaultSelectionChange: [{ type: i0.Output }],
-        initialSelection: [{ type: i0.Input }],
         availableColumns: [{ type: i0.ContentChildren, args: [NaturalColumnsPickerColumnDirective,] }]
     };
 
@@ -7178,7 +7214,7 @@
     }());
     NaturalHierarchicSelectorDialogComponent.decorators = [
         { type: i0.Component, args: [{
-                    template: "<h2 i18n mat-dialog-title>S\u00E9lection</h2>\n\n<mat-dialog-content>\n    <natural-hierarchic-selector\n        (selectionChange)=\"config.hierarchicSelection = $event\"\n        [selected]=\"config.hierarchicSelection ?? {}\"\n        [config]=\"config.hierarchicConfig\"\n        [filters]=\"config.hierarchicFilters\"\n        [multiple]=\"config.multiple ?? false\"\n        [allowUnselect]=\"config.allowUnselect ?? true\"\n        [searchFacets]=\"config.searchFacets ?? []\"\n        [searchSelections]=\"config.searchSelections ?? []\"\n        (searchSelectionChange)=\"searchSelectionsOutput = $event\"\n    ></natural-hierarchic-selector>\n</mat-dialog-content>\n\n<mat-dialog-actions>\n    <button [mat-dialog-close] i18n mat-button>Annuler</button>\n    <button (click)=\"close(config.hierarchicSelection)\" color=\"primary\" mat-raised-button\n        ><span i18n>Valider</span>\n    </button>\n</mat-dialog-actions>\n",
+                    template: "<h2 i18n mat-dialog-title>S\u00E9lection</h2>\n\n<mat-dialog-content>\n    <natural-hierarchic-selector\n        (selectionChange)=\"config.hierarchicSelection = $event\"\n        [selected]=\"config.hierarchicSelection ?? {}\"\n        [config]=\"config.hierarchicConfig\"\n        [filters]=\"config.hierarchicFilters\"\n        [multiple]=\"config.multiple ?? false\"\n        [allowUnselect]=\"config.allowUnselect ?? true\"\n        [searchFacets]=\"config.searchFacets ?? []\"\n        [searchSelections]=\"config.searchSelections ?? []\"\n        (searchSelectionChange)=\"searchSelectionsOutput = $event\"\n    ></natural-hierarchic-selector>\n</mat-dialog-content>\n\n<mat-dialog-actions>\n    <button [mat-dialog-close] mat-button i18n>Annuler</button>\n    <button (click)=\"close(config.hierarchicSelection)\" color=\"primary\" mat-raised-button\n        ><span i18n>Valider</span>\n    </button>\n</mat-dialog-actions>\n",
                     styles: [":host mat-dialog-actions{display:flex;flex-direction:row;justify-content:flex-end}\n"]
                 },] }
     ];
@@ -11196,9 +11232,11 @@
     exports.TypeNumberComponent = TypeNumberComponent;
     exports.TypeSelectComponent = TypeSelectComponent;
     exports.TypeTextComponent = TypeTextComponent;
+    exports.available = available;
     exports.cancellableTimeout = cancellableTimeout;
     exports.cleanSameValues = cleanSameValues;
     exports.collectErrors = collectErrors;
+    exports.debug = debug;
     exports.decimal = decimal;
     exports.deliverableEmail = deliverableEmail;
     exports.ensureHttpPrefix = ensureHttpPrefix;