@ecodev/natural 38.0.0 → 40.1.0

package/bundles/ecodev-natural.umd.js

@@ -1,8 +1,8 @@
 (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));
-})(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';
+    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'), require('prosemirror-view'), require('prosemirror-state'), require('prosemirror-example-setup'), require('prosemirror-model'), require('prosemirror-schema-basic'), require('prosemirror-schema-list')) :
+    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', 'prosemirror-view', 'prosemirror-state', 'prosemirror-example-setup', 'prosemirror-model', 'prosemirror-schema-basic', 'prosemirror-schema-list'], 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.prosemirrorView, global.prosemirrorState, global.prosemirrorExampleSetup, global.prosemirrorModel, global.prosemirrorSchemaBasic, global.prosemirrorSchemaList));
+})(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, prosemirrorView, prosemirrorState, prosemirrorExampleSetup, prosemirrorModel, prosemirrorSchemaBasic, prosemirrorSchemaList) { 'use strict';
 
     function _interopNamespace(e) {
         if (e && e.__esModule) return 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
              */
@@ -3443,11 +3458,14 @@
         /**
          * Persist search and then launch whatever is required to refresh the list
          */
-        NaturalAbstractList.prototype.search = function (naturalSearchSelections, navigationExtras) {
+        NaturalAbstractList.prototype.search = function (naturalSearchSelections, navigationExtras, resetPagination) {
+            if (resetPagination === void 0) { resetPagination = true; }
             // Reset page index to restart the pagination (preserve pageSize)
-            this.variablesManager.merge('pagination', {
-                pagination: lodashEs.pick(this.defaultPagination, ['offset', 'pageIndex']),
-            });
+            if (resetPagination) {
+                this.variablesManager.merge('pagination', {
+                    pagination: lodashEs.pick(this.defaultPagination, ['offset', 'pageIndex']),
+                });
+            }
             // Persist if activated
             // Two parallel navigations conflict. We first persist the search, then the pagination
             if (this.persistSearch && !this.isPanel) {
@@ -3621,7 +3639,7 @@
          * Uses data provided by router such as:
          *
          * - `route.data.forcedVariables`
-         * - `route.data.initialColumns`
+         * - `route.data.selectedColumns`
          */
         NaturalAbstractList.prototype.initFromRoute = function () {
             // Variables
@@ -3629,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 () {
@@ -3656,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);
@@ -3713,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 = [
@@ -3752,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;
@@ -3771,6 +3781,7 @@
              * Name of filter for child items to access ancestor item
              */
             _this.ancestorRelationName = 'parent';
+            _this.oldAncertorId = null;
             _this.breadcrumbs = [];
             return _this;
         }
@@ -3781,27 +3792,30 @@
             // "na" is a trailing param, and should be considered only when there is no search
             this.route.params.subscribe(function (params) {
                 // "ns" stands for natural-search to be shorter in url
-                if (!params['ns']) {
-                    var navigationConditionValue = null;
-                    // "na" stands for "navigation" (relation) in url
-                    if (params['na']) {
-                        navigationConditionValue = { have: { values: [params['na']] } };
-                        _this.service.getOne(params['na']).subscribe(
-                        // TODO casting should disappear and instead this class should enforce
-                        // the service to support Tone with a new generic
-                        function (ancestor) { return (_this.breadcrumbs = _this.getBreadcrumb(ancestor)); });
-                        _this.clearSearch();
-                    }
-                    else {
-                        navigationConditionValue = { empty: {} };
-                        _this.breadcrumbs = [];
-                    }
-                    var condition = {};
-                    condition[_this.ancestorRelationName] = navigationConditionValue;
-                    var variables = { filter: { groups: [{ conditions: [condition] }] } };
-                    // todo : check why without "as Vall" it errors. Vall is supposed to be QueryVariables, and filter too.
-                    _this.variablesManager.set('navigation', variables);
+                if (params['ns']) {
+                    return;
+                }
+                var navigationConditionValue = null;
+                // "na" stands for "navigation" (relation) in url
+                if (params['na']) {
+                    navigationConditionValue = { have: { values: [params['na']] } };
+                    _this.service.getOne(params['na']).subscribe(
+                    // TODO casting should disappear and instead this class should enforce
+                    // the service to support Tone with a new generic
+                    function (ancestor) { return (_this.breadcrumbs = _this.getBreadcrumb(ancestor)); });
+                    var hasAncestorChanged = params['na'] !== _this.oldAncertorId;
+                    _this.oldAncertorId = params['na'];
+                    _this.clearSearch(hasAncestorChanged);
                 }
+                else {
+                    navigationConditionValue = { empty: {} };
+                    _this.breadcrumbs = [];
+                }
+                var condition = {};
+                condition[_this.ancestorRelationName] = navigationConditionValue;
+                var variables = { filter: { groups: [{ conditions: [condition] }] } };
+                // todo : check why without "as Vall" it errors. Vall is supposed to be QueryVariables, and filter too.
+                _this.variablesManager.set('navigation', variables);
             });
             _super.prototype.ngOnInit.call(this);
         };
@@ -3834,11 +3848,19 @@
             }
             _super.prototype.translateSearchAndRefreshList.call(this, naturalSearchSelections);
         };
-        NaturalAbstractNavigableList.prototype.clearSearch = function () {
+        NaturalAbstractNavigableList.prototype.clearSearch = function (resetPagination) {
+            if (resetPagination === void 0) { resetPagination = true; }
             this.naturalSearchSelections = [[]];
-            this.search([[]]);
+            _super.prototype.search.call(this, [[]], undefined, resetPagination);
             this.persistenceService.persistInStorage('ns', null, this.getStorageKey());
         };
+        NaturalAbstractNavigableList.prototype.search = function (naturalSearchSelections, navigationExtras, resetPagination) {
+            var _this = this;
+            if (resetPagination === void 0) { resetPagination = true; }
+            this.persistenceService.persistInUrl('na', null, this.route).then(function () {
+                _super.prototype.search.call(_this, naturalSearchSelections, navigationExtras, resetPagination);
+            });
+        };
         /**
          * Return an array for router link usage
          */
@@ -3938,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) {
@@ -4829,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
@@ -4859,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 () {
@@ -4885,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,] }]
     };
 
@@ -11080,6 +11131,142 @@
         { type: i2$2.Title }
     ]; };
 
+    /*
+     * Public API Surface of natural
+     */
+
+    var myNodes = {
+        heading: prosemirrorSchemaBasic.nodes.heading,
+        doc: prosemirrorSchemaBasic.nodes.doc,
+        paragraph: prosemirrorSchemaBasic.nodes.paragraph,
+        text: prosemirrorSchemaBasic.nodes.text,
+        hard_break: prosemirrorSchemaBasic.nodes.hard_break,
+    };
+    var myMarks = {
+        link: prosemirrorSchemaBasic.marks.link,
+        em: prosemirrorSchemaBasic.marks.em,
+        strong: prosemirrorSchemaBasic.marks.strong,
+    };
+    var basicSchema = new prosemirrorModel.Schema({ nodes: myNodes, marks: myMarks });
+    var schema = new prosemirrorModel.Schema({
+        nodes: prosemirrorSchemaList.addListNodes(basicSchema.spec.nodes, 'paragraph block*', 'block'),
+        marks: basicSchema.spec.marks,
+    });
+
+    /**
+     * Prosemirror component
+     * Usage :
+     * <natural-editor [(ngModel)]="htmlString"></natural-editor>
+     */
+    // @dynamic
+    var NaturalEditorComponent = /** @class */ (function () {
+        function NaturalEditorComponent(ngControl, document) {
+            this.ngControl = ngControl;
+            this.document = document;
+            this.view = null;
+            this.contentChange = new i0.EventEmitter();
+            /**
+             * HTML string
+             */
+            this.content = '';
+            if (this.ngControl !== null) {
+                this.ngControl.valueAccessor = this;
+            }
+        }
+        NaturalEditorComponent.prototype.ngOnInit = function () {
+            var _this = this;
+            var serializer = prosemirrorModel.DOMSerializer.fromSchema(schema);
+            var state = this.createState();
+            this.view = new prosemirrorView.EditorView(this.editor.nativeElement, {
+                state: state,
+                dispatchTransaction: function (transaction) {
+                    if (!_this.view) {
+                        return;
+                    }
+                    var newState = _this.view.state.apply(transaction);
+                    _this.view.updateState(newState);
+                    // Transform doc into HTML string
+                    var dom = serializer.serializeFragment(_this.view.state.doc);
+                    var el = _this.document.createElement('_');
+                    el.appendChild(dom);
+                    var newContent = el.innerHTML;
+                    if (_this.content === newContent) {
+                        return;
+                    }
+                    _this.content = el.innerHTML;
+                    if (_this.onChange) {
+                        _this.onChange(_this.content);
+                    }
+                    _this.contentChange.emit(_this.content);
+                },
+            });
+        };
+        NaturalEditorComponent.prototype.writeValue = function (val) {
+            if (typeof val === 'string' && val !== this.content) {
+                this.content = val;
+            }
+            if (this.view !== null) {
+                var state = this.createState();
+                this.view.updateState(state);
+            }
+        };
+        NaturalEditorComponent.prototype.createState = function () {
+            var template = this.document.createElement('_');
+            template.innerHTML = '<div>' + this.content + '</div>';
+            if (!template.firstChild) {
+                throw new Error('child of template element could not be created');
+            }
+            var parser = prosemirrorModel.DOMParser.fromSchema(schema);
+            var doc = parser.parse(template.firstChild);
+            return prosemirrorState.EditorState.create({
+                doc: doc,
+                plugins: prosemirrorExampleSetup.exampleSetup({ schema: schema }),
+            });
+        };
+        NaturalEditorComponent.prototype.registerOnChange = function (fn) {
+            this.onChange = fn;
+        };
+        NaturalEditorComponent.prototype.registerOnTouched = function (fn) { };
+        NaturalEditorComponent.prototype.setDisabledState = function (isDisabled) {
+            // TODO disable editor ?
+        };
+        NaturalEditorComponent.prototype.ngOnDestroy = function () {
+            if (this.view) {
+                this.view.destroy();
+                this.view = null;
+            }
+        };
+        return NaturalEditorComponent;
+    }());
+    NaturalEditorComponent.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'natural-editor',
+                    template: " <div #editor></div>",
+                    styles: ["@charset \"UTF-8\";::ng-deep .ProseMirror{position:relative;background:rgba(0,0,0,.1)}::ng-deep .ProseMirror{word-wrap:break-word;white-space:pre-wrap;-webkit-font-variant-ligatures:none;font-feature-settings:none;font-variant-ligatures:none}::ng-deep .ProseMirror pre{white-space:pre-wrap}::ng-deep .ProseMirror li{position:relative}::ng-deep .ProseMirror-hideselection *::selection{background:transparent}::ng-deep .ProseMirror-hideselection *::-moz-selection{background:transparent}::ng-deep .ProseMirror-hideselection{caret-color:transparent}::ng-deep .ProseMirror-selectednode{outline:2px solid #8cf}::ng-deep li.ProseMirror-selectednode{outline:none}::ng-deep li.ProseMirror-selectednode:after{content:\"\";position:absolute;left:-32px;right:-2px;top:-2px;bottom:-2px;border:2px solid #8cf;pointer-events:none}::ng-deep .ProseMirror-textblock-dropdown{min-width:3em}::ng-deep .ProseMirror-menu{margin:20px;line-height:1}::ng-deep .ProseMirror-tooltip .ProseMirror-menu{width:-moz-fit-content;width:fit-content;white-space:pre}::ng-deep .ProseMirror-menuitem{margin-right:8px;display:inline-block}::ng-deep .ProseMirror-menuseparator{border-right:1px solid rgba(255,255,255,.3);margin-right:12px}::ng-deep .ProseMirror-menu-dropdown,::ng-deep .ProseMirror-menu-dropdown-menu{white-space:nowrap}::ng-deep .ProseMirror-menu-dropdown{vertical-align:1px;cursor:pointer;position:relative;padding-right:15px}::ng-deep .ProseMirror-menu-dropdown-wrap{padding:1px 0 1px 4px;display:inline-block;position:relative}::ng-deep .ProseMirror-menu-dropdown:after{content:\"\";border-left:4px solid transparent;border-right:4px solid transparent;border-top:4px solid currentColor;opacity:.6;position:absolute;right:4px;top:calc(50% - 2px)}::ng-deep .ProseMirror-menu-dropdown-menu,::ng-deep .ProseMirror-menu-submenu{position:absolute;background:white;color:#666;padding:2px;border-radius:4px;box-shadow:0 5px 5px #00000080}::ng-deep .ProseMirror-menu-dropdown-menu{z-index:15;min-width:6em;padding:6px;top:40px}::ng-deep .ProseMirror-menu-dropdown-item{cursor:pointer;padding:12px}::ng-deep .ProseMirror-menu-dropdown-item:hover{background:#f2f2f2}::ng-deep .ProseMirror-menu-submenu{padding:6px}::ng-deep .ProseMirror-menu-submenu-wrap{position:relative;margin-right:-4px}::ng-deep .ProseMirror-menu-submenu-label:after{content:\"\";border-top:4px solid transparent;border-bottom:4px solid transparent;border-left:4px solid currentColor;opacity:.6;position:absolute;right:4px;top:calc(50% - 4px)}::ng-deep .ProseMirror-menu-submenu{display:none;min-width:6em;left:100%;top:-17px}::ng-deep .ProseMirror-menu-active{background:white;color:#000}::ng-deep .ProseMirror-menu-disabled{opacity:.3}::ng-deep .ProseMirror-menu-submenu-wrap:hover .ProseMirror-menu-submenu,::ng-deep .ProseMirror-menu-submenu-wrap-active .ProseMirror-menu-submenu{display:block}::ng-deep .ProseMirror-menubar{border-top-left-radius:inherit;border-top-right-radius:inherit;position:relative;min-height:1em;color:#fffc;padding:10px 18px;top:0;left:0;right:0;background:rgba(0,0,0,.8);z-index:10;box-sizing:border-box;overflow:visible;font-size:18px}::ng-deep .ProseMirror-icon{display:inline-block;line-height:.8;vertical-align:-2px;padding:8px;cursor:pointer;border-radius:4px}::ng-deep .ProseMirror-menu-disabled.ProseMirror-icon{cursor:default}::ng-deep .ProseMirror-icon svg{fill:currentColor;height:1em}::ng-deep .ProseMirror-icon span{vertical-align:text-top}::ng-deep .ProseMirror-gapcursor{display:none;pointer-events:none;position:absolute}::ng-deep .ProseMirror-gapcursor:after{content:\"\";display:block;position:absolute;top:-2px;width:20px;border-top:1px solid black;animation:ProseMirror-cursor-blink 1.1s steps(2,start) infinite}@keyframes ProseMirror-cursor-blink{to{visibility:hidden}}::ng-deep .ProseMirror-focused .ProseMirror-gapcursor{display:block}::ng-deep .ProseMirror-example-setup-style hr{padding:2px 10px;border:none;margin:1em 0}::ng-deep .ProseMirror-example-setup-style hr:after{content:\"\";display:block;height:1px;background-color:silver;line-height:2px}::ng-deep .ProseMirror ul,::ng-deep .ProseMirror ol{padding-left:30px}::ng-deep .ProseMirror blockquote{padding-left:1em;border-left:3px solid #eee;margin-left:0;margin-right:0}::ng-deep .ProseMirror-example-setup-style img{cursor:default}::ng-deep .ProseMirror-prompt{background:white;padding:20px;position:fixed;border-radius:4px;z-index:11;box-shadow:-.5px 2px 15px #000c;font-size:16px;color:#000}::ng-deep .ProseMirror-prompt h5{margin:0;font-weight:normal;font-size:24px}::ng-deep .ProseMirror-prompt input[type=text],::ng-deep .ProseMirror-prompt textarea{background:rgba(0,0,0,.1);border:none;border-bottom:1px solid rgba(0,0,0,.8);outline:none;padding:10px 20px;margin:.4em 0;width:20em;border-top-left-radius:4px;border-top-right-radius:4px;font-size:16px;color:#000}::ng-deep .ProseMirror-prompt-close{position:absolute;left:2px;top:1px;color:#000;border:none;background:transparent;padding:0}::ng-deep .ProseMirror-prompt-close:after{content:\"\\e2\\153\\2022\";font-size:12px}::ng-deep .ProseMirror-invalid{background:#ffc;border:1px solid #cc7;border-radius:4px;padding:5px 10px;position:absolute;min-width:10em}::ng-deep .ProseMirror-prompt-buttons{margin-top:5px;display:none}::ng-deep #editor,::ng-deep .editor{background:white;color:#000;background-clip:padding-box;border-radius:4px;border:2px solid rgba(0,0,0,.2);padding:5px 0;margin-bottom:23px}::ng-deep .ProseMirror p:first-child,::ng-deep .ProseMirror h1:first-child,::ng-deep .ProseMirror h2:first-child,::ng-deep .ProseMirror h3:first-child,::ng-deep .ProseMirror h4:first-child,::ng-deep .ProseMirror h5:first-child,::ng-deep .ProseMirror h6:first-child{margin-top:10px}::ng-deep .ProseMirror{padding:4px 8px 4px 14px;line-height:1.2;outline:none}::ng-deep .ProseMirror p{margin-bottom:1em}\n"]
+                },] }
+    ];
+    NaturalEditorComponent.ctorParameters = function () { return [
+        { type: forms.NgControl, decorators: [{ type: i0.Optional }, { type: i0.Self }] },
+        { type: Document, decorators: [{ type: i0.Inject, args: [i1$4.DOCUMENT,] }] }
+    ]; };
+    NaturalEditorComponent.propDecorators = {
+        editor: [{ type: i0.ViewChild, args: ['editor', { read: i0.ElementRef, static: true },] }],
+        contentChange: [{ type: i0.Output }]
+    };
+
+    var NaturalEditorModule = /** @class */ (function () {
+        function NaturalEditorModule() {
+        }
+        return NaturalEditorModule;
+    }());
+    NaturalEditorModule.decorators = [
+        { type: i0.NgModule, args: [{
+                    declarations: [NaturalEditorComponent],
+                    imports: [i1$4.CommonModule],
+                    exports: [NaturalEditorComponent],
+                },] }
+    ];
+
     /*
      * Public API Surface of natural
      */
@@ -11120,6 +11307,8 @@
     exports.NaturalDialogTriggerModule = NaturalDialogTriggerModule;
     exports.NaturalDropdownComponentsModule = NaturalDropdownComponentsModule;
     exports.NaturalDropdownRef = NaturalDropdownRef;
+    exports.NaturalEditorComponent = NaturalEditorComponent;
+    exports.NaturalEditorModule = NaturalEditorModule;
     exports.NaturalEllipsisPipe = NaturalEllipsisPipe;
     exports.NaturalEnumPipe = NaturalEnumPipe;
     exports.NaturalEnumService = NaturalEnumService;
@@ -11181,9 +11370,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;