@ecodev/natural 40.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;
@@ -11131,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
      */
@@ -11171,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;