@icure/form 1.0.8 → 1.0.9

package/components/iqr-text-field/index.js

@@ -22,7 +22,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 // Import the LitElement base class and html helper function
-const lit_element_1 = require("lit-element");
+const lit_1 = require("lit");
+const decorators_1 = require("lit/decorators");
 const prosemirror_state_1 = require("prosemirror-state");
 const prosemirror_view_1 = require("prosemirror-view");
 const prosemirror_history_1 = require("prosemirror-history");
@@ -38,8 +39,8 @@ const suggestion_palette_1 = require("./suggestion-palette");
 const caret_fix_plugin_1 = require("./plugin/caret-fix-plugin");
 const prosemirror_utils_1 = require("./prosemirror-utils");
 // @ts-ignore
-const lit_element_2 = require("lit-element");
-const baseCss = lit_element_2.css `@charset "UTF-8";
+const lit_2 = require("lit");
+const baseCss = lit_2.css `@charset "UTF-8";
 :host {
   --bg-color-1: #F44336;
 }
@@ -431,6 +432,10 @@ h3 {
   box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.25);
   border-radius: 8px;
   padding: 8px;
+  width: 220px;
+  min-height: 120px;
+  max-height: 320px;
+  overflow-y: scroll;
 }
 
 .menu .input-container {
@@ -483,6 +488,9 @@ h3 {
   justify-content: flex-start;
   box-shadow: none;
   border: none;
+  white-space: nowrap;
+  overflow-x: hidden;
+  text-overflow: ellipsis;
 }
 
 .menu-container .item:hover {
@@ -520,7 +528,8 @@ span[data-content]:hover::after {
   background: #274768;
   color: #FFFFFF;
   font-size: 9px;
-  top: -10px;
+  line-height: 12px;
+  top: -12px;
   left: 0px;
   padding: 0px 2px;
 }
@@ -598,14 +607,12 @@ span[data-content]::before {
   border-radius: 4px;
   color: #274768;
 }
-
 .suggestion-palette ul li svg {
   height: 12px;
   width: 12px;
   border-radius: 4px;
   transform-origin: center center;
 }
-
 .suggestion-palette ul li svg path {
   fill: #809ab4;
 }
@@ -665,7 +672,7 @@ span.code-count-3::after, span.code-count-3::before {
   /* background: linear-gradient(90deg, var(--bg-code-color-1) 0%, var(--bg-code-color-2) 100%);*/
 }`;
 // @ts-ignore
-const kendoCss = lit_element_2.css `.iqr-text-field {
+const kendoCss = lit_2.css `.iqr-text-field {
   position: relative;
   padding-top: 1.4em;
   display: inline-flex;
@@ -789,27 +796,45 @@ const kendoCss = lit_element_2.css `.iqr-text-field {
 const mask_plugin_1 = require("./plugin/mask-plugin");
 const has_content_class_plugin_1 = require("./plugin/has-content-class-plugin");
 const regexp_plugin_1 = require("./plugin/regexp-plugin");
+const no_lodash_1 = require("../../utils/no-lodash");
+const paths_1 = require("./styles/paths");
+const languages_1 = require("../../utils/languages");
 // Extend the LitElement base class
-class IqrTextField extends lit_element_1.LitElement {
+class IqrTextField extends lit_1.LitElement {
     constructor() {
         super();
         this.suggestionStopWords = new Set();
         this.linksProvider = () => Promise.resolve(undefined);
-        this.suggestionProvider = () => [];
+        this.suggestionProvider = () => __awaiter(this, void 0, void 0, function* () { return []; });
+        this.ownersProvider = () => __awaiter(this, void 0, void 0, function* () { return []; });
         this.codeColorProvider = () => 'XI';
         this.linkColorProvider = () => 'cat1';
-        this.codeContentProvider = (codes) => codes.map(c => c.code).join(',');
+        this.codeContentProvider = (codes) => codes.map((c) => c.code).join(',');
         this.schema = 'styled-text-with-codes';
         this.label = '';
         this.labelPosition = 'float';
         this.placeholder = '';
+        this.textRegex = '';
         this.value = '';
-        this.displayOwnerMenu = false;
+        this.defaultLanguage = 'en';
+        this.valueProvider = undefined;
+        this.metaProvider = undefined;
+        this.handleValueChanged = undefined;
+        this.handleMetaChanged = undefined;
+        this.displayOwnersMenu = false;
+        this.ownerInputValue = '';
+        this.availableOwners = [];
+        this.displayLanguagesMenu = false;
+        this.languageInputValue = '';
+        this.displayVersionsMenu = false;
         this.suggestions = false;
         this.links = false;
-        this.textRegex = '';
+        this.displayedLanguage = this.defaultLanguage;
+        this.displayedVersion = '0';
+        this.availableLanguages = [this.displayedLanguage];
         this.windowListeners = [];
         this.mouseCount = 0;
+        this.serviceId = undefined;
     }
     connectedCallback() {
         super.connectedCallback();
@@ -821,77 +846,75 @@ class IqrTextField extends lit_element_1.LitElement {
     }
     disconnectedCallback() {
         super.disconnectedCallback();
-        this.windowListeners.forEach(wl => window.removeEventListener(wl[0], wl[1]));
+        this.windowListeners.forEach((wl) => window.removeEventListener(wl[0], wl[1]));
     }
     static get styles() {
         return [baseCss, kendoCss];
     }
     render() {
-        return lit_element_1.html `
-		<div id="root" class="iqr-text-field" data-placeholder=${this.placeholder}>
+        var _a, _b;
+        return lit_1.html `
+			<div id="root" class="iqr-text-field" data-placeholder=${this.placeholder}>
 				<label class="iqr-label ${this.labelPosition}"><span>${this.label}</span></label>
 				<div class="iqr-input">
 					<div id="editor"></div>
-					<div id="extra" class=${'extra' + (this.displayOwnerMenu ? ' forced' : '')}>
-						<div class="info">
-								~${this.owner}
-						</div>
+					<div id="extra" class=${'extra' + (this.displayOwnersMenu ? ' forced' : '')}>
+						<div class="info">~${this.owner}</div>
 						<div class="buttons-container">
 							<div class="menu-container">
-								<button data-content="${this.owner}" @click="${this.toggleOwnerMenu}" class="btn menu-trigger author">
-									<svg width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg">
-										<path fill-rule="evenodd" clip-rule="evenodd" d="M10 5C10 7.76142 7.76142 10 5 10C2.23858 10 0 7.76142 0 5C0 2.23858 2.23858 0 5 0C7.76142 0 10 2.23858 10 5ZM7 3C7 4.10457 6.10457 5 5 5C3.89543 5 3 4.10457 3 3C3 1.89543 3.89543 1 5 1C6.10457 1 7 1.89543 7 3ZM5.00001 9C6.53071 9 7.8606 8.1402 8.53306 6.8772C7.62844 6.33518 6.37946 6 5.00001 6C3.62055 6 2.37158 6.33517 1.46695 6.87719C2.13941 8.14019 3.4693 9 5.00001 9Z"/>
-									</svg>
-								</button>
-								${this.displayOwnerMenu ? lit_element_1.html `
-								<div id="menu" class="menu">
-									<div class="input-container">
-										<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-											<path d="M12.9167 11.6667H12.2583L12.025 11.4417C12.8417 10.4917 13.3333 9.25833 13.3333 7.91667C13.3333 4.925 10.9083 2.5 7.91667 2.5C4.925 2.5 2.5 4.925 2.5 7.91667C2.5 10.9083 4.925 13.3333 7.91667 13.3333C9.25833 13.3333 10.4917 12.8417 11.4417 12.025L11.6667 12.2583V12.9167L15.8333 17.075L17.075 15.8333L12.9167 11.6667ZM7.91667 11.6667C5.84167 11.6667 4.16667 9.99167 4.16667 7.91667C4.16667 5.84167 5.84167 4.16667 7.91667 4.16667C9.99167 4.16667 11.6667 5.84167 11.6667 7.91667C11.6667 9.99167 9.99167 11.6667 7.91667 11.6667Z" fill="#809AB4"/>
-										</svg>
-									 <input>
-									</div>
-									<button class="item">
-										Jean René
-									</button>
-									<button class="item">
-										Jean José
-									</button>
-									<button class="item">
-										Marie-Josée Perrec
-									</button>
-								</div>
-								` : ''}
-					 </div>
+								<button data-content="${this.owner}" @click="${this.toggleOwnerMenu}" class="btn menu-trigger author">${paths_1.ownerPicto}</button>
+								${this.displayOwnersMenu
+            ? lit_1.html `
+											<div id="menu" class="menu">
+												<div class="input-container">${paths_1.searchPicto} <input id="ownerSearch" @input="${this.searchOwner}" /></div>
+												${(_a = this.availableOwners) === null || _a === void 0 ? void 0 : _a.map((x) => lit_1.html `<button @click="${this.handleOwnerButtonClicked(x.id)}" id="${x.id}" class="item">${x.text} @</button>`)}
+											</div>
+									  `
+            : ''}
+							</div>
 							<div class="menu-container">
-							<button data-content="01/02/20" class="btn date">
-								<svg width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg">
-									<path fill-rule="evenodd" clip-rule="evenodd" d="M2 0C0.895431 0 0 0.89543 0 2V8C0 9.10457 0.89543 10 2 10H8C9.10457 10 10 9.10457 10 8V2C10 0.895431 9.10457 0 8 0H2ZM1 3V8C1 8.55229 1.44772 9 2 9H8C8.55229 9 9 8.55229 9 8V3H1ZM8 8H5V5H8V8Z"/>
-								</svg>
-							</button>
+								<button data-content="01/02/20" class="btn date">${paths_1.datePicto}</button>
 							</div>
 							<div class="menu-container">
-							<button data-content="1.0" class="btn version">
-								<svg width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg">
-									<path fill-rule="evenodd" clip-rule="evenodd" d="M5 10C7.76141 10 10 7.76142 10 5C10 2.23858 7.76141 0 5 0C2.23859 0 0 2.23858 0 5C0 7.76142 2.23859 10 5 10ZM3.5 3.33172C3.03394 3.16698 2.70001 2.72249 2.70001 2.2C2.70001 1.53726 3.23727 1 3.90002 1C4.56274 1 5.10001 1.53726 5.10001 2.2C5.10001 2.72249 4.76608 3.16698 4.30002 3.33172V5.04041C4.73386 4.59767 5.31354 4.29838 5.96133 4.22028C6.12021 3.74364 6.56998 3.4 7.10001 3.4C7.76276 3.4 8.30002 3.93726 8.30002 4.6C8.30002 5.26274 7.76276 5.8 7.10001 5.8C6.58722 5.8 6.14957 5.47836 5.97775 5.02583C5.13132 5.16293 4.46295 5.8313 4.32584 6.67775C4.77838 6.84955 5.10001 7.28722 5.10001 7.8C5.10001 8.46274 4.56274 9 3.90002 9C3.23727 9 2.70001 8.46274 2.70001 7.8C2.70001 7.27751 3.03394 6.83302 3.5 6.66828V3.33172ZM3.5 7.8C3.5 7.58001 3.67758 7.4015 3.89722 7.4H3.9028C4.12241 7.4015 4.29999 7.58001 4.29999 7.8C4.29999 8.0209 4.12091 8.2 3.89999 8.2C3.67908 8.2 3.5 8.0209 3.5 7.8ZM6.70001 4.59555V4.60446C6.70239 4.82333 6.88055 5.00001 7.09998 5.00001C7.32089 5.00001 7.5 4.82092 7.5 4.60001C7.5 4.37909 7.32089 4.2 7.09998 4.2C6.88055 4.2 6.70239 4.37669 6.70001 4.59555ZM3.89999 2.6C4.12091 2.6 4.29999 2.42091 4.29999 2.2C4.29999 1.97909 4.12091 1.8 3.89999 1.8C3.67908 1.8 3.5 1.97909 3.5 2.2C3.5 2.42091 3.67908 2.6 3.89999 2.6Z"/>
-								</svg>
-							</button>
+								<button data-content="1.0" class="btn version">${paths_1.versionPicto}</button>
 							</div>
 							<div class="menu-container">
-							<button data-content="fr" class="btn language">
-								<svg width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg">
-									<path d="M5 0C2.2379 0 0 2.2379 0 5C0 7.7621 2.2379 10 5 10C7.7621 10 10 7.7621 10 5C10 2.2379 7.7621 0 5 0ZM9.03226 5C9.03226 5.45363 8.95363 5.89113 8.81452 6.29839H8.40524C8.31855 6.29839 8.23589 6.26411 8.1754 6.20161L7.53024 5.54435C7.43952 5.45161 7.43952 5.3004 7.53226 5.20766L7.78427 4.95565V4.78024C7.78427 4.71976 7.76008 4.66129 7.71774 4.61895L7.52823 4.42944C7.48589 4.3871 7.42742 4.3629 7.36694 4.3629H7.04435C6.91935 4.3629 6.81653 4.26008 6.81653 4.13508C6.81653 4.0746 6.84073 4.01613 6.88306 3.97379L7.07258 3.78427C7.11492 3.74194 7.17339 3.71774 7.23387 3.71774H7.87903C8.00403 3.71774 8.10685 3.61492 8.10685 3.48992V3.3004C8.10685 3.1754 8.00403 3.07258 7.87903 3.07258H7.13911C6.96169 3.07258 6.81653 3.21774 6.81653 3.39516V3.48589C6.81653 3.625 6.72782 3.74798 6.59677 3.79234L5.95968 4.00403C5.89315 4.02621 5.84879 4.08669 5.84879 4.15726V4.20161C5.84879 4.29032 5.77621 4.3629 5.6875 4.3629H5.36492C5.27621 4.3629 5.20363 4.29032 5.20363 4.20161C5.20363 4.1129 5.13105 4.04032 5.04234 4.04032H4.97984C4.91935 4.04032 4.8629 4.0746 4.83468 4.12903L4.64516 4.50605C4.59073 4.61492 4.47984 4.68347 4.35685 4.68347H3.91129C3.73387 4.68347 3.58871 4.53831 3.58871 4.36089V3.85081C3.58871 3.76613 3.62298 3.68347 3.68347 3.62298L4.08871 3.21774C4.18145 3.125 4.23387 2.99798 4.23387 2.86492C4.23387 2.79637 4.27823 2.73387 4.34476 2.71169L5.15121 2.44355C5.18548 2.43145 5.21573 2.41331 5.23992 2.38911L5.78024 1.84879C5.82258 1.80645 5.84677 1.74798 5.84677 1.6875C5.84677 1.5625 5.74395 1.45968 5.61895 1.45968H5.20161L4.87903 1.78226V1.94355C4.87903 2.03226 4.80645 2.10484 4.71774 2.10484H4.39516C4.30645 2.10484 4.23387 2.03226 4.23387 1.94355V1.54032C4.23387 1.48992 4.25806 1.44153 4.29839 1.41129L4.88105 0.97379C4.91935 0.971774 4.95766 0.967742 4.99597 0.967742C7.22379 0.967742 9.03226 2.77621 9.03226 5ZM2.62298 2.84476C2.62298 2.78427 2.64718 2.72581 2.68952 2.68347L3.20161 2.17137C3.24395 2.12903 3.30242 2.10484 3.3629 2.10484C3.4879 2.10484 3.59073 2.20766 3.59073 2.33266V2.65524C3.59073 2.71573 3.56653 2.77419 3.52419 2.81653L3.33468 3.00605C3.29234 3.04839 3.23387 3.07258 3.17339 3.07258H2.85081C2.72581 3.07258 2.62298 2.96976 2.62298 2.84476ZM5.20363 9.02218V8.87903C5.20363 8.70161 5.05847 8.55645 4.88105 8.55645H4.47379C4.25605 8.55645 3.93548 8.4496 3.76008 8.31855L3.3125 7.98185C3.08065 7.80847 2.94556 7.53629 2.94556 7.24798V6.76613C2.94556 6.44355 3.11492 6.14516 3.39113 5.97984L4.25605 5.46169C4.39919 5.37702 4.5625 5.33065 4.72782 5.33065H5.35685C5.57661 5.33065 5.78831 5.40927 5.95363 5.5504L6.8246 6.29839H7.19355C7.36492 6.29839 7.52823 6.36694 7.64919 6.4879L7.99798 6.83669C8.06653 6.90524 8.16129 6.94355 8.25806 6.94355H8.52823C7.875 8.13105 6.6371 8.9496 5.20363 9.02218Z"/>
-								</svg>
-							</button>
+								<button data-content="${this.displayedLanguage}" @click="${this.toggleLanguageMenu}" class="btn menu-trigger language">${paths_1.i18nPicto}</button>
+								${this.displayLanguagesMenu
+            ? lit_1.html `
+											<div id="menu" class="menu">
+												<div class="input-container">${paths_1.searchPicto} <input /></div>
+												${(_b = this.availableLanguages) === null || _b === void 0 ? void 0 : _b.map((x) => lit_1.html `<button id="${x}" class="item">${languages_1.languageName(x)}</button>`)}
+											</div>
+									  `
+            : ''}
 							</div>
 						</div>
 					</div>
 				</div>
 			</div>
-    `;
+		`;
     }
     toggleOwnerMenu() {
-        this.displayOwnerMenu = !this.displayOwnerMenu;
+        this.displayOwnersMenu = !this.displayOwnersMenu;
+    }
+    searchOwner(e) {
+        const text = e.target.value;
+        setTimeout(() => __awaiter(this, void 0, void 0, function* () {
+            if (this._ownerSearch.value === text) {
+                if (this.ownersProvider) {
+                    const availableOwners = yield this.ownersProvider(text.split(' '));
+                    console.log(availableOwners);
+                    this.availableOwners = availableOwners;
+                }
+            }
+        }), 300);
+    }
+    handleOwnerButtonClicked(id) {
+        this.handleMetaChanged && this.serviceId && this.handleMetaChanged(this.serviceId, { revision: this.displayedVersion, owner: { id } });
+    }
+    toggleLanguageMenu() {
+        this.displayLanguagesMenu = !this.displayLanguagesMenu;
     }
     mouseDown() {
         this.mouseCount++;
@@ -900,77 +923,40 @@ class IqrTextField extends lit_element_1.LitElement {
         var _a, _b, _c, _d, _e, _f, _g;
         this.mouseCount = 0;
         if (!((_c = (_b = (_a = this.view) === null || _a === void 0 ? void 0 : _a.dom) === null || _b === void 0 ? void 0 : _b.classList) === null || _c === void 0 ? void 0 : _c.contains('ProseMirror-focused'))) {
-            (_g = (_f = (_e = (_d = this.view) === null || _d === void 0 ? void 0 : _d.dom) === null || _e === void 0 ? void 0 : _e.parentElement) === null || _f === void 0 ? void 0 : _f.querySelectorAll('.companion')) === null || _g === void 0 ? void 0 : _g.forEach(x => {
+            (_g = (_f = (_e = (_d = this.view) === null || _d === void 0 ? void 0 : _d.dom) === null || _e === void 0 ? void 0 : _e.parentElement) === null || _f === void 0 ? void 0 : _f.querySelectorAll('.companion')) === null || _g === void 0 ? void 0 : _g.forEach((x) => {
+                ;
                 x.style.display = 'none';
             });
         }
     }
     firstUpdated() {
-        var _a;
-        const schema = this.proseMirrorSchema = schema_1.createSchema(this.schema, (t, c, isC) => isC ? this.codeColorProvider(t, c) : this.linkColorProvider(t, c), this.codeContentProvider);
-        const tokenizer = markdown_it_1.default("commonmark", { html: false });
-        this.parser = this.schema === 'date' ? {
-            parse: (value) => schema.node("paragraph", {}, [
-                schema.node("date", {}, value ? [schema.text(value)] : []),
-            ])
-        } : this.schema === 'date-time' ? {
-            parse: (value) => {
-                const date = value ? value.split(' ')[0] : '';
-                const time = value ? value.split(' ')[1] : '';
-                return schema.node("paragraph", {}, [
-                    schema.node("date", {}, date && date.length ? [schema.text(date)] : [schema.text(' ')]),
-                    schema.node("time", {}, time && time.length ? [schema.text(time)] : [schema.text(' ')]),
-                ]);
-            }
-        } : this.schema === 'text-document' ? new prosemirror_markdown_1.MarkdownParser(schema, markdown_it_1.default("commonmark", { html: false }), {
-            blockquote: { block: "blockquote" },
-            paragraph: { block: "paragraph" },
-            list_item: { block: "list_item" },
-            bullet_list: { block: "bullet_list" },
-            ordered_list: { block: "ordered_list", getAttrs: tok => ({ order: +(tok.attrGet("start") || 1) }) },
-            heading: { block: "heading", getAttrs: tok => ({ level: +tok.tag.slice(1) }) },
-            hr: { node: "horizontal_rule" },
-            image: { node: "image", getAttrs: tok => {
-                    var _a;
-                    return ({
-                        src: tok.attrGet("src"),
-                        title: tok.attrGet("title") || null,
-                        alt: ((_a = (tok.children || [])[0]) === null || _a === void 0 ? void 0 : _a.content) || null
-                    });
-                } },
-            hardbreak: { node: "hard_break" },
-            em: prosemirror_utils_1.hasMark(schema.spec.marks, 'em') ? { mark: "em" } : { ignore: true },
-            strong: prosemirror_utils_1.hasMark(schema.spec.marks, 'strong') ? { mark: "strong" } : { ignore: true },
-            link: prosemirror_utils_1.hasMark(schema.spec.marks, 'link') ? { mark: "link", getAttrs: tok => ({
-                    href: tok.attrGet("href"),
-                    title: tok.attrGet("title") || null
-                }) } : { ignore: true }
-        }) : new prosemirror_markdown_1.MarkdownParser(schema, { parse: (src, env) => {
-                return tokenizer.parse(src, env).filter(t => !t.type.startsWith('paragraph_'));
-            } }, {
-            em: prosemirror_utils_1.hasMark(schema.spec.marks, 'em') ? { mark: "em" } : { ignore: true },
-            strong: prosemirror_utils_1.hasMark(schema.spec.marks, 'strong') ? { mark: "strong" } : { ignore: true },
-            link: prosemirror_utils_1.hasMark(schema.spec.marks, 'link') ? { mark: "link", getAttrs: tok => ({
-                    href: tok.attrGet("href"),
-                    title: tok.attrGet("title") || null
-                }) } : { ignore: true }
-        });
+        var _a, _b, _c;
+        // eslint-disable-next-line @typescript-eslint/no-this-alias
         const cmp = this;
+        const pms = (this.proseMirrorSchema = schema_1.createSchema(this.schema, (t, c, isC) => (isC ? this.codeColorProvider(t, c) : this.linkColorProvider(t, c)), this.codeContentProvider));
+        this.parser = this.makeParser(pms);
         this.container = ((_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.getElementById('editor')) || undefined;
-        let br = schema.nodes.hard_break;
-        const hardBreak = prosemirror_commands_1.chainCommands(prosemirror_commands_1.exitCode, (state, dispatch) => {
-            dispatch && dispatch(state.tr.replaceSelectionWith(br.create()).scrollIntoView());
-            return true;
-        });
-        const replaceRangeWithSuggestion = (from, to, sug) => __awaiter(this, void 0, void 0, function* () {
-            const link = yield this.linksProvider(sug);
-            return link && cmp.view.state.tr.replaceWith(from, to, this.proseMirrorSchema.text(sug.text, [this.proseMirrorSchema.mark('link', link)])) || undefined;
-        });
         if (this.container) {
-            let headingsKeymap = prosemirror_keymap_1.keymap([1, 2, 3, 4, 5, 6].reduce((acc, idx) => {
-                return Object.assign(acc, { [`Mod-ctrl-${idx}`]: prosemirror_commands_1.setBlockType(this.proseMirrorSchema.nodes.heading, { level: '' + idx }) });
+            const br = pms.nodes.hard_break;
+            const hardBreak = prosemirror_commands_1.chainCommands(prosemirror_commands_1.exitCode, (state, dispatch) => {
+                dispatch && dispatch(state.tr.replaceSelectionWith(br.create()).scrollIntoView());
+                return true;
+            });
+            const replaceRangeWithSuggestion = (from, to, sug) => __awaiter(this, void 0, void 0, function* () {
+                const link = yield this.linksProvider(sug);
+                return (link && cmp.view && cmp.view.state.tr.replaceWith(from, to, pms.text(sug.text, [pms.mark('link', link)]))) || undefined;
+            });
+            const headingsKeymap = prosemirror_keymap_1.keymap([1, 2, 3, 4, 5, 6].reduce((acc, idx) => {
+                return Object.assign(acc, { [`Mod-ctrl-${idx}`]: prosemirror_commands_1.setBlockType(pms.nodes.heading, { level: '' + idx }) });
             }, {}));
-            const parsedDoc = this.parser.parse(this.value);
+            const providedValue = this.valueProvider && this.valueProvider();
+            const displayedVersionedValue = (_c = (_b = providedValue === null || providedValue === void 0 ? void 0 : providedValue.versions) === null || _b === void 0 ? void 0 : _b[0]) === null || _c === void 0 ? void 0 : _c.value;
+            this.serviceId = providedValue === null || providedValue === void 0 ? void 0 : providedValue.id;
+            this.availableLanguages = displayedVersionedValue && Object.keys(displayedVersionedValue).length ? no_lodash_1.sorted(Object.keys(displayedVersionedValue)) : this.availableLanguages;
+            if (!this.availableLanguages.includes(this.displayedLanguage)) {
+                this.displayedLanguage = this.availableLanguages[0];
+            }
+            const parsedDoc = this.parser.parse(this.valueProvider ? (displayedVersionedValue === null || displayedVersionedValue === void 0 ? void 0 : displayedVersionedValue[this.displayedLanguage]) || '' : this.value);
             this.view = new prosemirror_view_1.EditorView(this.container, {
                 state: prosemirror_state_1.EditorState.create({
                     doc: parsedDoc,
@@ -978,102 +964,262 @@ class IqrTextField extends lit_element_1.LitElement {
                     plugins: [
                         caret_fix_plugin_1.caretFixPlugin(),
                         prosemirror_history_1.history(),
-                        this.links ?
-                            new prosemirror_state_1.Plugin({
-                                view(editorView) { return new selection_companion_1.SelectionCompanion(editorView, () => cmp.mouseCount > 0); }
-                            }) : null,
-                        this.suggestions ?
-                            new prosemirror_state_1.Plugin({
-                                view(editorView) { return (cmp.suggestionPalette = new suggestion_palette_1.SuggestionPalette(editorView, (terms) => cmp.suggestionProvider(terms), () => cmp.suggestionStopWords)); }
-                            }) : null,
-                        this.suggestions ?
-                            prosemirror_keymap_1.keymap({
-                                "Tab": (state, dispatch) => { return cmp.suggestionPalette && cmp.suggestionPalette.focusOrInsert(this.view, replaceRangeWithSuggestion) || false; },
-                                "ArrowUp": (state, dispatch) => { return cmp.suggestionPalette && cmp.suggestionPalette.arrowUp() || false; },
-                                "ArrowDown": (state, dispatch) => { return cmp.suggestionPalette && cmp.suggestionPalette.arrowDown() || false; },
-                                "Enter": (state, dispatch) => { return cmp.suggestionPalette && cmp.suggestionPalette.insert(this.view, replaceRangeWithSuggestion) || false; },
-                            }) : null,
-                        prosemirror_keymap_1.keymap({ "Mod-z": prosemirror_history_1.undo, "Mod-Shift-z": prosemirror_history_1.redo }),
-                        prosemirror_keymap_1.keymap(Object.assign({}, schema.marks.strong ? { "Mod-b": prosemirror_commands_1.toggleMark(schema.marks.strong) } : {}, schema.marks.em ? { "Mod-i": prosemirror_commands_1.toggleMark(schema.marks.em) } : {}, schema.nodes.paragraph ? { "Alt-ArrowUp": prosemirror_commands_1.joinUp } : {}, schema.nodes.paragraph ? { "Alt-ArrowDown": prosemirror_commands_1.joinDown } : {}, schema.nodes.paragraph ? { "Alt-Enter": hardBreak } : {}, schema.nodes.paragraph ? { "Shift-Enter": hardBreak } : {}, schema.nodes.ordered_list ? { "Shift-ctrl-1": prosemirror_schema_list_1.wrapInList(schema.nodes.ordered_list) } : {}, schema.nodes.bullet_list ? { "Shift-ctrl-*": prosemirror_schema_list_1.wrapInList(schema.nodes.bullet_list) } : {}, schema.nodes.blockquote ? { "Shift-ctrl-w": prosemirror_commands_2.wrapInIfNeeded(schema.nodes.blockquote) } : {}, schema.nodes.blockquote ? { "Shift-ctrl-u": prosemirror_commands_2.unwrapFrom(schema.nodes.blockquote) } : {}, schema.nodes.paragraph ? { "Mod-ctrl-0": prosemirror_commands_1.setBlockType(schema.nodes.paragraph) } : {}, schema.nodes.paragraph ? { "Shift-ctrl-0": prosemirror_commands_1.setBlockType(schema.nodes.paragraph) } : {}, schema.nodes.list_item ? { "Enter": prosemirror_schema_list_1.splitListItem(schema.nodes.list_item) } : {}, schema.nodes.ordered_list || schema.nodes.bullet_list ? { "Mod-(": prosemirror_schema_list_1.liftListItem(schema.nodes.list_item) } : {}, schema.nodes.ordered_list || schema.nodes.bullet_list ? { "Mod-[": prosemirror_schema_list_1.liftListItem(schema.nodes.list_item) } : {}, schema.nodes.ordered_list || schema.nodes.bullet_list ? { "Mod-)": prosemirror_schema_list_1.sinkListItem(schema.nodes.list_item) } : {}, schema.nodes.ordered_list || schema.nodes.bullet_list ? { "Mod-]": prosemirror_schema_list_1.sinkListItem(schema.nodes.list_item) } : {})),
-                        schema.nodes.heading ? headingsKeymap : null,
+                        this.links
+                            ? new prosemirror_state_1.Plugin({
+                                view(editorView) {
+                                    return new selection_companion_1.SelectionCompanion(editorView, () => cmp.mouseCount > 0);
+                                },
+                            })
+                            : null,
+                        this.suggestions
+                            ? new prosemirror_state_1.Plugin({
+                                view(editorView) {
+                                    return (cmp.suggestionPalette = new suggestion_palette_1.SuggestionPalette(editorView, (terms) => cmp.suggestionProvider(terms), () => cmp.suggestionStopWords));
+                                },
+                            })
+                            : null,
+                        this.suggestions
+                            ? prosemirror_keymap_1.keymap({
+                                Tab: () => {
+                                    return (cmp.suggestionPalette && this.view && cmp.suggestionPalette.focusOrInsert(this.view, replaceRangeWithSuggestion)) || false;
+                                },
+                                ArrowUp: () => {
+                                    return (cmp.suggestionPalette && cmp.suggestionPalette.arrowUp()) || false;
+                                },
+                                ArrowDown: () => {
+                                    return (cmp.suggestionPalette && cmp.suggestionPalette.arrowDown()) || false;
+                                },
+                                Enter: () => {
+                                    return (cmp.suggestionPalette && this.view && cmp.suggestionPalette.insert(this.view, replaceRangeWithSuggestion)) || false;
+                                },
+                            })
+                            : null,
+                        prosemirror_keymap_1.keymap({ 'Mod-z': prosemirror_history_1.undo, 'Mod-Shift-z': prosemirror_history_1.redo }),
+                        prosemirror_keymap_1.keymap(Object.assign({}, pms.marks.strong ? { 'Mod-b': prosemirror_commands_1.toggleMark(pms.marks.strong) } : {}, pms.marks.em ? { 'Mod-i': prosemirror_commands_1.toggleMark(pms.marks.em) } : {}, pms.nodes.paragraph ? { 'Alt-ArrowUp': prosemirror_commands_1.joinUp } : {}, pms.nodes.paragraph ? { 'Alt-ArrowDown': prosemirror_commands_1.joinDown } : {}, pms.nodes.paragraph ? { 'Alt-Enter': hardBreak } : {}, pms.nodes.paragraph ? { 'Shift-Enter': hardBreak } : {}, pms.nodes.ordered_list ? { 'Shift-ctrl-1': prosemirror_schema_list_1.wrapInList(pms.nodes.ordered_list) } : {}, pms.nodes.bullet_list ? { 'Shift-ctrl-*': prosemirror_schema_list_1.wrapInList(pms.nodes.bullet_list) } : {}, pms.nodes.blockquote ? { 'Shift-ctrl-w': prosemirror_commands_2.wrapInIfNeeded(pms.nodes.blockquote) } : {}, pms.nodes.blockquote ? { 'Shift-ctrl-u': prosemirror_commands_2.unwrapFrom(pms.nodes.blockquote) } : {}, pms.nodes.paragraph ? { 'Mod-ctrl-0': prosemirror_commands_1.setBlockType(pms.nodes.paragraph) } : {}, pms.nodes.paragraph ? { 'Shift-ctrl-0': prosemirror_commands_1.setBlockType(pms.nodes.paragraph) } : {}, pms.nodes.list_item ? { Enter: prosemirror_schema_list_1.splitListItem(pms.nodes.list_item) } : {}, pms.nodes.ordered_list || pms.nodes.bullet_list ? { 'Mod-(': prosemirror_schema_list_1.liftListItem(pms.nodes.list_item) } : {}, pms.nodes.ordered_list || pms.nodes.bullet_list ? { 'Mod-[': prosemirror_schema_list_1.liftListItem(pms.nodes.list_item) } : {}, pms.nodes.ordered_list || pms.nodes.bullet_list ? { 'Mod-)': prosemirror_schema_list_1.sinkListItem(pms.nodes.list_item) } : {}, pms.nodes.ordered_list || pms.nodes.bullet_list ? { 'Mod-]': prosemirror_schema_list_1.sinkListItem(pms.nodes.list_item) } : {})),
+                        pms.nodes.heading ? headingsKeymap : null,
                         mask_plugin_1.maskPlugin(),
                         regexp_plugin_1.regexpPlugin(),
-                        has_content_class_plugin_1.hasContentClassPlugin(this.shadowRoot),
-                        prosemirror_keymap_1.keymap(prosemirror_commands_1.baseKeymap)
-                    ].filter(x => !!x).map(x => x)
+                        has_content_class_plugin_1.hasContentClassPlugin(this.shadowRoot || undefined),
+                        prosemirror_keymap_1.keymap(prosemirror_commands_1.baseKeymap),
+                    ]
+                        .filter((x) => !!x)
+                        .map((x) => x),
                 }),
                 dispatchTransaction: (tr) => {
                     this.view && this.view.updateState(this.view.state.apply(tr));
                     //current state as json in text area
                     //this.view && console.log(JSON.stringify(this.view.state.doc.toJSON(), null, 2));
-                }
+                },
             });
         }
     }
+    makeParser(pms) {
+        const tokenizer = markdown_it_1.default('commonmark', { html: false });
+        return this.schema === 'date'
+            ? {
+                parse: (value) => pms.node('paragraph', {}, [pms.node('date', {}, value ? [pms.text(value)] : [])]),
+            }
+            : this.schema === 'time'
+                ? {
+                    parse: (value) => pms.node('paragraph', {}, [pms.node('time', {}, value ? [pms.text(value)] : [])]),
+                }
+                : this.schema === 'measure'
+                    ? {
+                        parse: (value) => {
+                            const decimal = value ? value.split(' ')[0] : '';
+                            const unit = value ? value.split(' ')[1] : '';
+                            return pms.node('paragraph', {}, [
+                                pms.node('decimal', {}, decimal && decimal.length ? [pms.text(decimal)] : [pms.text(' ')]),
+                                pms.node('unit', {}, unit && unit.length ? [pms.text(unit)] : [pms.text(' ')]),
+                            ]);
+                        },
+                    }
+                    : this.schema === 'date-time'
+                        ? {
+                            parse: (value) => {
+                                const date = value ? value.split(' ')[0] : '';
+                                const time = value ? value.split(' ')[1] : '';
+                                return pms.node('paragraph', {}, [
+                                    pms.node('date', {}, date && date.length ? [pms.text(date)] : [pms.text(' ')]),
+                                    pms.node('time', {}, time && time.length ? [pms.text(time)] : [pms.text(' ')]),
+                                ]);
+                            },
+                        }
+                        : this.schema === 'text-document'
+                            ? new prosemirror_markdown_1.MarkdownParser(pms, markdown_it_1.default('commonmark', { html: false }), {
+                                blockquote: { block: 'blockquote' },
+                                paragraph: { block: 'paragraph' },
+                                list_item: { block: 'list_item' },
+                                bullet_list: { block: 'bullet_list' },
+                                ordered_list: { block: 'ordered_list', getAttrs: (tok) => ({ order: +(tok.attrGet('start') || 1) }) },
+                                heading: { block: 'heading', getAttrs: (tok) => ({ level: +tok.tag.slice(1) }) },
+                                hr: { node: 'horizontal_rule' },
+                                image: {
+                                    node: 'image',
+                                    getAttrs: (tok) => {
+                                        var _a;
+                                        return ({
+                                            src: tok.attrGet('src'),
+                                            title: tok.attrGet('title') || null,
+                                            alt: ((_a = (tok.children || [])[0]) === null || _a === void 0 ? void 0 : _a.content) || null,
+                                        });
+                                    },
+                                },
+                                hardBreak: { node: 'hard_break' },
+                                em: prosemirror_utils_1.hasMark(pms.spec.marks, 'em') ? { mark: 'em' } : { ignore: true },
+                                strong: prosemirror_utils_1.hasMark(pms.spec.marks, 'strong') ? { mark: 'strong' } : { ignore: true },
+                                link: prosemirror_utils_1.hasMark(pms.spec.marks, 'link')
+                                    ? {
+                                        mark: 'link',
+                                        getAttrs: (tok) => ({
+                                            href: tok.attrGet('href'),
+                                            title: tok.attrGet('title') || null,
+                                        }),
+                                    }
+                                    : { ignore: true },
+                            })
+                            : new prosemirror_markdown_1.MarkdownParser(pms, {
+                                parse: (src, env) => {
+                                    return tokenizer.parse(src, env).filter((t) => !t.type.startsWith('paragraph_'));
+                                },
+                            }, {
+                                em: prosemirror_utils_1.hasMark(pms.spec.marks, 'em') ? { mark: 'em' } : { ignore: true },
+                                strong: prosemirror_utils_1.hasMark(pms.spec.marks, 'strong') ? { mark: 'strong' } : { ignore: true },
+                                link: prosemirror_utils_1.hasMark(pms.spec.marks, 'link')
+                                    ? {
+                                        mark: 'link',
+                                        getAttrs: (tok) => ({
+                                            href: tok.attrGet('href'),
+                                            title: tok.attrGet('title') || null,
+                                        }),
+                                    }
+                                    : { ignore: true },
+                            });
+    }
 }
 __decorate([
-    lit_element_1.property(),
+    decorators_1.property(),
     __metadata("design:type", Set)
 ], IqrTextField.prototype, "suggestionStopWords", void 0);
 __decorate([
-    lit_element_1.property(),
+    decorators_1.property(),
     __metadata("design:type", Function)
 ], IqrTextField.prototype, "linksProvider", void 0);
 __decorate([
-    lit_element_1.property(),
+    decorators_1.property(),
     __metadata("design:type", Function)
 ], IqrTextField.prototype, "suggestionProvider", void 0);
 __decorate([
-    lit_element_1.property(),
+    decorators_1.property(),
+    __metadata("design:type", Function)
+], IqrTextField.prototype, "ownersProvider", void 0);
+__decorate([
+    decorators_1.property(),
     __metadata("design:type", Function)
 ], IqrTextField.prototype, "codeColorProvider", void 0);
 __decorate([
-    lit_element_1.property(),
+    decorators_1.property(),
     __metadata("design:type", Function)
 ], IqrTextField.prototype, "linkColorProvider", void 0);
 __decorate([
-    lit_element_1.property(),
+    decorators_1.property(),
     __metadata("design:type", Function)
 ], IqrTextField.prototype, "codeContentProvider", void 0);
 __decorate([
-    lit_element_1.property(),
+    decorators_1.property(),
     __metadata("design:type", String)
 ], IqrTextField.prototype, "schema", void 0);
 __decorate([
-    lit_element_1.property(),
-    __metadata("design:type", String)
+    decorators_1.property(),
+    __metadata("design:type", Object)
 ], IqrTextField.prototype, "label", void 0);
 __decorate([
-    lit_element_1.property(),
+    decorators_1.property(),
     __metadata("design:type", String)
 ], IqrTextField.prototype, "labelPosition", void 0);
 __decorate([
-    lit_element_1.property(),
-    __metadata("design:type", String)
+    decorators_1.property(),
+    __metadata("design:type", Object)
 ], IqrTextField.prototype, "placeholder", void 0);
 __decorate([
-    lit_element_1.property(),
-    __metadata("design:type", String)
+    decorators_1.property(),
+    __metadata("design:type", Object)
+], IqrTextField.prototype, "textRegex", void 0);
+__decorate([
+    decorators_1.property(),
+    __metadata("design:type", Object)
 ], IqrTextField.prototype, "value", void 0);
 __decorate([
-    lit_element_1.property(),
+    decorators_1.property(),
+    __metadata("design:type", Object)
+], IqrTextField.prototype, "defaultLanguage", void 0);
+__decorate([
+    decorators_1.property(),
     __metadata("design:type", String)
 ], IqrTextField.prototype, "owner", void 0);
 __decorate([
-    lit_element_1.property({ type: Boolean }),
-    __metadata("design:type", Boolean)
-], IqrTextField.prototype, "displayOwnerMenu", void 0);
+    decorators_1.property(),
+    __metadata("design:type", Function)
+], IqrTextField.prototype, "valueProvider", void 0);
+__decorate([
+    decorators_1.property(),
+    __metadata("design:type", Function)
+], IqrTextField.prototype, "metaProvider", void 0);
+__decorate([
+    decorators_1.property(),
+    __metadata("design:type", Function)
+], IqrTextField.prototype, "handleValueChanged", void 0);
+__decorate([
+    decorators_1.property(),
+    __metadata("design:type", Function)
+], IqrTextField.prototype, "handleMetaChanged", void 0);
 __decorate([
-    lit_element_1.property({ type: Boolean }),
-    __metadata("design:type", Boolean)
+    decorators_1.state(),
+    __metadata("design:type", Object)
+], IqrTextField.prototype, "displayOwnersMenu", void 0);
+__decorate([
+    decorators_1.state(),
+    __metadata("design:type", Object)
+], IqrTextField.prototype, "ownerInputValue", void 0);
+__decorate([
+    decorators_1.state(),
+    __metadata("design:type", Array)
+], IqrTextField.prototype, "availableOwners", void 0);
+__decorate([
+    decorators_1.state(),
+    __metadata("design:type", Object)
+], IqrTextField.prototype, "displayLanguagesMenu", void 0);
+__decorate([
+    decorators_1.state(),
+    __metadata("design:type", Object)
+], IqrTextField.prototype, "languageInputValue", void 0);
+__decorate([
+    decorators_1.state(),
+    __metadata("design:type", Object)
+], IqrTextField.prototype, "displayVersionsMenu", void 0);
+__decorate([
+    decorators_1.state(),
+    __metadata("design:type", Object)
 ], IqrTextField.prototype, "suggestions", void 0);
 __decorate([
-    lit_element_1.property({ type: Boolean }),
-    __metadata("design:type", Boolean)
+    decorators_1.state(),
+    __metadata("design:type", Object)
 ], IqrTextField.prototype, "links", void 0);
 __decorate([
-    lit_element_1.property(),
-    __metadata("design:type", String)
-], IqrTextField.prototype, "textRegex", void 0);
+    decorators_1.state(),
+    __metadata("design:type", Object)
+], IqrTextField.prototype, "displayedLanguage", void 0);
+__decorate([
+    decorators_1.state(),
+    __metadata("design:type", Object)
+], IqrTextField.prototype, "displayedVersion", void 0);
+__decorate([
+    decorators_1.state(),
+    __metadata("design:type", Object)
+], IqrTextField.prototype, "availableLanguages", void 0);
+__decorate([
+    decorators_1.query('#ownerSearch'),
+    __metadata("design:type", HTMLInputElement)
+], IqrTextField.prototype, "_ownerSearch", void 0);
 // Register the new element with the browser.
 customElements.define('iqr-text-field', IqrTextField);