@icure/form 2.0.10 → 2.1.0

package/components/common/field-with-options.d.ts

@@ -1,9 +1,9 @@
 import { Field } from './field';
 import { Code } from '../model';
-export declare class FieldWithOptionsMixinInterface extends Field {
+export declare abstract class FieldWithOptionsMixinInterface extends Field {
     optionsProvider: (language: string, terms?: string[]) => Promise<Code[]>;
     displayedOptions: Code[];
 }
-type Constructor<T extends Field> = new (...args: any[]) => T;
+type Constructor<T extends Field> = abstract new (...args: any[]) => T;
 export declare const FieldWithOptionsMixin: <T extends Constructor<Field>>(superClass: T) => Constructor<FieldWithOptionsMixinInterface> & T;
 export {};

package/components/common/field-with-options.js

@@ -19,7 +19,6 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.FieldWithOptionsMixin = void 0;
-const field_1 = require("./field");
 const decorators_js_1 = require("lit/decorators.js");
 const FieldWithOptionsMixin = (superClass) => {
     class FieldWithOptionsMixinClass extends superClass {

package/components/common/field-with-options.js.map

@@ -1 +1 @@
-{"version":3,"file":"field-with-options.js","sourceRoot":"","sources":["../../../tmp/components/common/field-with-options.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA,mCAA+B;AAG/B,qDAAmD;AAS5C,MAAM,qBAAqB,GAAG,CAA+B,UAAa,EAAE,EAAE;IACpF,MAAM,0BAA2B,SAAQ,UAAU;QAAnD;;YACa,oBAAe,GAA4D,GAAS,EAAE,gDAAC,OAAA,EAAE,CAAA,GAAA,CAAA;YAC5F,qBAAgB,GAAW,EAAE,CAAA;QAQvC,CAAC;QANO,YAAY,CAAC,kBAAkC;YACrD,KAAK,CAAC,YAAY,CAAC,kBAAkB,CAAC,CAAA;YACtC,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC,CAAC,IAAI,CAAC,CAAO,OAAO,EAAE,EAAE;gBAC5D,IAAI,CAAC,gBAAgB,GAAG,OAAO,CAAA;YAChC,CAAC,CAAA,CAAC,CAAA;QACH,CAAC;KACD;IATY;QAAX,IAAA,wBAAQ,GAAE;;uEAA0F;IAC5F;QAAR,IAAA,qBAAK,GAAE;;wEAA8B;IASvC,oDAAoD;IACpD,OAAO,0BAA6E,CAAA;AACrF,CAAC,CAAA;AAdY,QAAA,qBAAqB,yBAcjC","sourcesContent":["import { Field } from './field'\nimport { PropertyValues } from '@lit/reactive-element'\nimport { Code } from '../model'\nimport { property, state } from 'lit/decorators.js'\n\nexport declare class FieldWithOptionsMixinInterface extends Field {\n\toptionsProvider: (language: string, terms?: string[]) => Promise<Code[]>\n\tdisplayedOptions: Code[]\n}\n\ntype Constructor<T extends Field> = new (...args: any[]) => T\n\nexport const FieldWithOptionsMixin = <T extends Constructor<Field>>(superClass: T) => {\n\tclass FieldWithOptionsMixinClass extends superClass {\n\t\t@property() optionsProvider: (language: string, terms?: string[]) => Promise<Code[]> = async () => []\n\t\t@state() displayedOptions: Code[] = []\n\n\t\tpublic firstUpdated(_changedProperties: PropertyValues) {\n\t\t\tsuper.firstUpdated(_changedProperties)\n\t\t\tthis.optionsProvider(this.language()).then(async (options) => {\n\t\t\t\tthis.displayedOptions = options\n\t\t\t})\n\t\t}\n\t}\n\t// Cast return type to the superClass type passed in\n\treturn FieldWithOptionsMixinClass as Constructor<FieldWithOptionsMixinInterface> & T\n}\n"]}
+{"version":3,"file":"field-with-options.js","sourceRoot":"","sources":["../../../tmp/components/common/field-with-options.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;AAGA,qDAAmD;AAS5C,MAAM,qBAAqB,GAAG,CAA+B,UAAa,EAAE,EAAE;IACpF,MAAe,0BAA2B,SAAQ,UAAU;QAA5D;;YACa,oBAAe,GAA4D,GAAS,EAAE,gDAAC,OAAA,EAAE,CAAA,GAAA,CAAA;YAC5F,qBAAgB,GAAW,EAAE,CAAA;QAQvC,CAAC;QANO,YAAY,CAAC,kBAAkC;YACrD,KAAK,CAAC,YAAY,CAAC,kBAAkB,CAAC,CAAA;YACtC,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC,CAAC,IAAI,CAAC,CAAO,OAAO,EAAE,EAAE;gBAC5D,IAAI,CAAC,gBAAgB,GAAG,OAAO,CAAA;YAChC,CAAC,CAAA,CAAC,CAAA;QACH,CAAC;KACD;IATY;QAAX,IAAA,wBAAQ,GAAE;;uEAA0F;IAC5F;QAAR,IAAA,qBAAK,GAAE;;wEAA8B;IASvC,oDAAoD;IACpD,OAAO,0BAA6E,CAAA;AACrF,CAAC,CAAA;AAdY,QAAA,qBAAqB,yBAcjC","sourcesContent":["import { Field } from './field'\nimport { PropertyValues } from '@lit/reactive-element'\nimport { Code } from '../model'\nimport { property, state } from 'lit/decorators.js'\n\nexport declare abstract class FieldWithOptionsMixinInterface extends Field {\n\toptionsProvider: (language: string, terms?: string[]) => Promise<Code[]>\n\tdisplayedOptions: Code[]\n}\n\ntype Constructor<T extends Field> = abstract new (...args: any[]) => T\n\nexport const FieldWithOptionsMixin = <T extends Constructor<Field>>(superClass: T) => {\n\tabstract class FieldWithOptionsMixinClass extends superClass {\n\t\t@property() optionsProvider: (language: string, terms?: string[]) => Promise<Code[]> = async () => []\n\t\t@state() displayedOptions: Code[] = []\n\n\t\tpublic firstUpdated(_changedProperties: PropertyValues) {\n\t\t\tsuper.firstUpdated(_changedProperties)\n\t\t\tthis.optionsProvider(this.language()).then(async (options) => {\n\t\t\t\tthis.displayedOptions = options\n\t\t\t})\n\t\t}\n\t}\n\t// Cast return type to the superClass type passed in\n\treturn FieldWithOptionsMixinClass as Constructor<FieldWithOptionsMixinInterface> & T\n}\n"]}

package/components/common/field.d.ts

@@ -1,10 +1,11 @@
-import { LitElement } from 'lit';
+import { LitElement, TemplateResult } from 'lit';
 import { FieldMetadata, FieldValue, Labels } from '../model';
 import { Suggestion, VersionedData } from '../../generic';
+import { Task } from '@lit/task';
 /**
  * Base class for all fields.
  */
-export declare class Field extends LitElement {
+export declare abstract class Field extends LitElement {
     /**
      * The label of the field. This is a unique per form property that is used to create data in the formValuesContainer.
      */
@@ -38,8 +39,9 @@ export declare class Field extends LitElement {
     /**
      * Provides the value of the field.
      */
+    defaultValueProvider?: () => FieldValue;
     valueProvider?: () => VersionedData<FieldValue>;
-    validationErrorsProvider?: () => string[];
+    validationErrorsProvider?: () => Promise<[FieldMetadata, string][]>;
     ownersProvider: (terms: string[], ids?: string[], specialties?: string[]) => Promise<Suggestion[]>;
     metadataProvider?: (id: string, revisions: (string | null)[]) => VersionedData<FieldMetadata>;
     handleValueChanged?: (label: string, language: string, value?: FieldValue, id?: string) => string | undefined;
@@ -49,5 +51,10 @@ export declare class Field extends LitElement {
     displayMetadata: boolean;
     selectedLanguage?: string;
     selectedRevision?: string;
+    _asyncTask: Task<readonly [], [FieldMetadata, string][] | readonly []>;
     language(): string;
+    render(): TemplateResult | TemplateResult[] | undefined;
+    abstract renderSync({}: {
+        validationErrors: [FieldMetadata, string][];
+    }): TemplateResult | TemplateResult[] | undefined;
 }

package/components/common/field.js

@@ -21,6 +21,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Field = void 0;
 const decorators_js_1 = require("lit/decorators.js");
 const lit_1 = require("lit");
+const task_1 = require("@lit/task");
 /**
  * Base class for all fields.
  */
@@ -48,6 +49,7 @@ class Field extends lit_1.LitElement {
         /**
          * Provides the value of the field.
          */
+        this.defaultValueProvider = undefined;
         this.valueProvider = undefined;
         this.validationErrorsProvider = undefined;
         this.ownersProvider = () => __awaiter(this, void 0, void 0, function* () { return []; });
@@ -58,11 +60,26 @@ class Field extends lit_1.LitElement {
         this.readonly = false;
         this.displayMetadata = false;
         this.selectedLanguage = undefined;
+        this._asyncTask = new task_1.Task(this, {
+            task: () => __awaiter(this, void 0, void 0, function* () {
+                return this.validationErrorsProvider ? yield this.validationErrorsProvider() : [];
+            }),
+            args: () => [],
+        });
     }
     language() {
         var _a, _b;
         return (_b = (this.translate ? (_a = this.selectedLanguage) !== null && _a !== void 0 ? _a : this.defaultLanguage : this.defaultLanguage)) !== null && _b !== void 0 ? _b : 'en';
     }
+    render() {
+        return this.validationErrorsProvider
+            ? this._asyncTask.render({
+                pending: () => this.renderSync({ validationErrors: [] }),
+                complete: (validationErrors) => this.renderSync({ validationErrors }),
+                error: () => this.renderSync({ validationErrors: [] }),
+            })
+            : this.renderSync({ validationErrors: [] });
+    }
 }
 exports.Field = Field;
 __decorate([
@@ -93,6 +110,10 @@ __decorate([
     (0, decorators_js_1.property)(),
     __metadata("design:type", Function)
 ], Field.prototype, "translationProvider", void 0);
+__decorate([
+    (0, decorators_js_1.property)(),
+    __metadata("design:type", Function)
+], Field.prototype, "defaultValueProvider", void 0);
 __decorate([
     (0, decorators_js_1.property)(),
     __metadata("design:type", Function)

package/components/common/field.js.map

@@ -1 +1 @@
-{"version":3,"file":"field.js","sourceRoot":"","sources":["../../../tmp/components/common/field.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA,qDAAmD;AACnD,6BAAgC;AAIhC;;GAEG;AACH,MAAa,KAAM,SAAQ,gBAAU;IAArC;;QAMC;;;WAGG;QACS,oBAAe,GAAW,EAAE,CAAA;QAOxC;;WAEG;QACS,cAAS,GAAG,IAAI,CAAA;QAC5B;;WAEG;QACS,oBAAe,GAAG,IAAI,CAAA;QAElC;;WAEG;QACS,cAAS,GAA8B,EAAE,CAAA;QAEzC,wBAAmB,GAA+C,CAAC,QAAQ,EAAE,IAAI,EAAE,EAAE,CAAC,IAAI,CAAA;QAEtG;;WAEG;QACS,kBAAa,GAAqC,SAAS,CAAA;QAC3D,6BAAwB,GAAoB,SAAS,CAAA;QACrD,mBAAc,GAAuF,GAAS,EAAE,gDAAC,OAAA,EAAE,CAAA,GAAA,CAAA;QACnH,qBAAgB,GAAgF,SAAS,CAAA;QACzG,uBAAkB,GAA8F,SAAS,CAAA;QACzH,0BAAqB,GAAkE,SAAS,CAAA;QAEzF,YAAO,GAAG,IAAI,CAAA;QACrB,aAAQ,GAAG,KAAK,CAAA;QAChB,oBAAe,GAAG,KAAK,CAAA;QAE1B,qBAAgB,GAAY,SAAS,CAAA;IAM/C,CAAC;IAHA,QAAQ;;QACP,OAAO,MAAA,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,MAAA,IAAI,CAAC,gBAAgB,mCAAI,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC,IAAI,CAAC,eAAe,CAAC,mCAAI,IAAI,CAAA;IACvG,CAAC;CACD;AArDD,sBAqDC;AAjDY;IAAX,IAAA,wBAAQ,GAAE;;oCAAc;AAMb;IAAX,IAAA,wBAAQ,GAAE;;8CAA6B;AAK5B;IAAX,IAAA,wBAAQ,GAAE;;2CAAyC;AAKxC;IAAX,IAAA,wBAAQ,GAAE;;wCAAiB;AAIhB;IAAX,IAAA,wBAAQ,GAAE;;8CAAuB;AAKtB;IAAX,IAAA,wBAAQ,GAAE;;wCAA0C;AAEzC;IAAX,IAAA,wBAAQ,GAAE;;kDAA2F;AAK1F;IAAX,IAAA,wBAAQ,GAAE;;4CAA4D;AAC3D;IAAX,IAAA,wBAAQ,GAAE;;uDAAsD;AACrD;IAAX,IAAA,wBAAQ,GAAE;;6CAAoH;AACnH;IAAX,IAAA,wBAAQ,GAAE;;+CAA0G;AACzG;IAAX,IAAA,wBAAQ,GAAE;;iDAA0H;AACzH;IAAX,IAAA,wBAAQ,GAAE;;oDAAiG;AAEzF;IAAlB,IAAA,wBAAQ,GAAE;;sCAAsB;AACrB;IAAX,IAAA,wBAAQ,GAAE;;uCAAiB;AAChB;IAAX,IAAA,wBAAQ,GAAE;;8CAAwB;AAE1B;IAAR,IAAA,qBAAK,GAAE;;+CAAsC;AACrC;IAAR,IAAA,qBAAK,GAAE;;+CAA0B","sourcesContent":["import { property, state } from 'lit/decorators.js'\nimport { LitElement } from 'lit'\nimport { FieldMetadata, FieldValue, Labels } from '../model'\nimport { Suggestion, VersionedData } from '../../generic'\n\n/**\n * Base class for all fields.\n */\nexport class Field extends LitElement {\n\t/**\n\t * The label of the field. This is a unique per form property that is used to create data in the formValuesContainer.\n\t */\n\t@property() label: string\n\n\t/**\n\t * The labels of the field. These are the labels that will be displayed in the UI.\n\t * Several labels can be displayed at once\n\t */\n\t@property() displayedLabels: Labels = {}\n\n\t/**\n\t * Extra styles applied to the field.\n\t */\n\t@property() styleOptions: { [key: string]: unknown }\n\n\t/**\n\t * Translate labels and options\n\t */\n\t@property() translate = true\n\t/**\n\t * Iso code of the default language\n\t */\n\t@property() defaultLanguage = 'en'\n\n\t/**\n\t * Iso code and names of the supported languages\n\t */\n\t@property() languages: { [iso: string]: string } = {}\n\n\t@property() translationProvider: (language: string, text: string) => string = (language, text) => text\n\n\t/**\n\t * Provides the value of the field.\n\t */\n\t@property() valueProvider?: () => VersionedData<FieldValue> = undefined\n\t@property() validationErrorsProvider?: () => string[] = undefined\n\t@property() ownersProvider: (terms: string[], ids?: string[], specialties?: string[]) => Promise<Suggestion[]> = async () => []\n\t@property() metadataProvider?: (id: string, revisions: (string | null)[]) => VersionedData<FieldMetadata> = undefined\n\t@property() handleValueChanged?: (label: string, language: string, value?: FieldValue, id?: string) => string | undefined = undefined\n\t@property() handleMetadataChanged?: (metadata: FieldMetadata, id?: string) => string | undefined = undefined\n\n\t@property() public visible = true\n\t@property() readonly = false\n\t@property() displayMetadata = false\n\n\t@state() selectedLanguage?: string = undefined\n\t@state() selectedRevision?: string\n\n\tlanguage(): string {\n\t\treturn (this.translate ? this.selectedLanguage ?? this.defaultLanguage : this.defaultLanguage) ?? 'en'\n\t}\n}\n"]}
+{"version":3,"file":"field.js","sourceRoot":"","sources":["../../../tmp/components/common/field.ts"],"names":[],"mappings":"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","sourcesContent":["import { property, state } from 'lit/decorators.js'\nimport { LitElement, TemplateResult } from 'lit'\nimport { FieldMetadata, FieldValue, Labels } from '../model'\nimport { Suggestion, VersionedData } from '../../generic'\nimport { Task } from '@lit/task'\n\n/**\n * Base class for all fields.\n */\nexport abstract class Field extends LitElement {\n\t/**\n\t * The label of the field. This is a unique per form property that is used to create data in the formValuesContainer.\n\t */\n\t@property() label: string\n\n\t/**\n\t * The labels of the field. These are the labels that will be displayed in the UI.\n\t * Several labels can be displayed at once\n\t */\n\t@property() displayedLabels: Labels = {}\n\n\t/**\n\t * Extra styles applied to the field.\n\t */\n\t@property() styleOptions: { [key: string]: unknown }\n\n\t/**\n\t * Translate labels and options\n\t */\n\t@property() translate = true\n\t/**\n\t * Iso code of the default language\n\t */\n\t@property() defaultLanguage = 'en'\n\n\t/**\n\t * Iso code and names of the supported languages\n\t */\n\t@property() languages: { [iso: string]: string } = {}\n\n\t@property() translationProvider: (language: string, text: string) => string = (language, text) => text\n\n\t/**\n\t * Provides the value of the field.\n\t */\n\t@property() defaultValueProvider?: () => FieldValue = undefined\n\t@property() valueProvider?: () => VersionedData<FieldValue> = undefined\n\t@property() validationErrorsProvider?: () => Promise<[FieldMetadata, string][]> = undefined\n\t@property() ownersProvider: (terms: string[], ids?: string[], specialties?: string[]) => Promise<Suggestion[]> = async () => []\n\t@property() metadataProvider?: (id: string, revisions: (string | null)[]) => VersionedData<FieldMetadata> = undefined\n\t@property() handleValueChanged?: (label: string, language: string, value?: FieldValue, id?: string) => string | undefined = undefined\n\t@property() handleMetadataChanged?: (metadata: FieldMetadata, id?: string) => string | undefined = undefined\n\n\t@property() public visible = true\n\t@property() readonly = false\n\t@property() displayMetadata = false\n\n\t@state() selectedLanguage?: string = undefined\n\t@state() selectedRevision?: string\n\n\t_asyncTask = new Task(this, {\n\t\ttask: async () => {\n\t\t\treturn this.validationErrorsProvider ? await this.validationErrorsProvider() : []\n\t\t},\n\t\targs: () => [],\n\t})\n\n\tlanguage(): string {\n\t\treturn (this.translate ? this.selectedLanguage ?? this.defaultLanguage : this.defaultLanguage) ?? 'en'\n\t}\n\n\trender() {\n\t\treturn this.validationErrorsProvider\n\t\t\t? this._asyncTask.render({\n\t\t\t\t\tpending: () => this.renderSync({ validationErrors: [] }),\n\t\t\t\t\tcomplete: (validationErrors: [FieldMetadata, string][]) => this.renderSync({ validationErrors }),\n\t\t\t\t\terror: () => this.renderSync({ validationErrors: [] }),\n\t\t\t  })\n\t\t\t: this.renderSync({ validationErrors: [] })\n\t}\n\n\tabstract renderSync({}: { validationErrors: [FieldMetadata, string][] }): TemplateResult | TemplateResult[] | undefined\n}\n"]}

package/components/common/metadata-buttons-bar.d.ts

@@ -1,7 +1,7 @@
 import { LitElement } from 'lit';
 import { FieldMetadata, FieldValue } from '../model';
 import { Suggestion, Version } from '../../generic';
-import { CustomEventDetail } from 'app-datepicker/dist/typings';
+import { CustomEventDetail } from '@icure/motss-app-datepicker/dist/typings.js';
 export declare class MetadataButtonBar extends LitElement {
     valueId: string;
     metadata: FieldMetadata;
@@ -16,6 +16,7 @@ export declare class MetadataButtonBar extends LitElement {
     displayedLabels: {
         [iso: string]: string;
     };
+    handleReset?: () => void | undefined;
     handleMetadataChanged?: (metadata: FieldMetadata, id?: string) => string | undefined;
     handleLanguageSelected?: (iso?: string) => void;
     handleRevisionSelected?: (rev?: string | null) => void;

package/components/common/metadata-buttons-bar.js

@@ -24,12 +24,31 @@ const decorators_js_1 = require("lit/decorators.js");
 const paths_1 = require("./styles/paths");
 const date_fns_1 = require("date-fns");
 const dates_1 = require("../../utils/dates");
-const to_resolved_date_1 = require("app-datepicker/dist/helpers/to-resolved-date");
-const constants_1 = require("app-datepicker/dist/constants");
+const to_resolved_date_js_1 = require("@icure/motss-app-datepicker/dist/helpers/to-resolved-date.js");
+const constants_js_1 = require("@icure/motss-app-datepicker/dist/constants.js");
 const languages_1 = require("../../utils/languages");
 // @ts-ignore
 const lit_2 = require("lit");
 const baseCss = (0, lit_2.css) `@charset "UTF-8";
+.tab-container .tab-bar li {
+  display: inline-block;
+  padding: 8px 16px;
+  cursor: pointer;
+  color: #000000;
+  font-size: 14px;
+  font-weight: 500;
+}
+.tab-container .tab-bar li.active {
+  background-color: #656565;
+  color: white;
+}
+.tab-container .tab-content .tab {
+  display: none;
+}
+.tab-container .tab-content .tab.active {
+  display: block;
+}
+
 :host {
   --bg-color-1: #f44336;
 }
@@ -78,15 +97,15 @@ const baseCss = (0, lit_2.css) `@charset "UTF-8";
   margin-right: 0;
 }
 
-.ProseMirror-hideselection {
-  caret-color: transparent;
-}
 .ProseMirror-hideselection *::selection {
   background: transparent;
 }
 .ProseMirror-hideselection *::-moz-selection {
   background: transparent;
 }
+.ProseMirror-hideselection {
+  caret-color: transparent;
+}
 
 .ProseMirror-selectednode {
   outline: 2px solid #8cf;
@@ -877,13 +896,13 @@ app-date-picker {
   margin-bottom: 20px;
 }
 .icure-form h2 {
-  font-size: 14.4px;
+  font-size: add-two(12px, 0, 1.2);
   font-weight: 700;
   color: #084B83;
   padding: 2px;
 }
 .icure-form h3 {
-  font-size: 13.2px;
+  font-size: add-two(12px, 0, 1.1);
   font-weight: 500;
   color: #084B83;
   padding: 6px;
@@ -915,17 +934,16 @@ app-date-picker {
   line-height: 1.4em;
   cursor: text;
   font-size: 12px;
-  left: 9px;
+  left: add-two(8px, 1px);
   color: #084B83;
   align-items: center;
-  height: 28px;
+  text-wrap: auto;
+  min-height: 28px;
   max-width: 85%;
   min-width: 0;
 }
 .icure-text-field .icure-label.float, .icure-button-group .icure-label.float {
   display: flex;
-  white-space: nowrap;
-  text-overflow: ellipsis;
   overflow: hidden;
 }
 
@@ -960,7 +978,6 @@ app-date-picker {
   border-style: solid;
   border-color: #DDE3E7;
   border-radius: 2px;
-  box-sizing: border-box;
   outline: 0;
   font: inherit;
   font-size: 14px;
@@ -973,6 +990,25 @@ app-date-picker {
   background-color: #ffffff;
   color: #000000;
 }
+.icure-text-field .icure-input .reset-button,
+.icure-text-field .input-container .reset-button {
+  position: absolute;
+  right: 0;
+  border: none;
+  background: transparent;
+  top: 0;
+  opacity: 0.5;
+  cursor: pointer;
+  height: 20px;
+  margin-left: 4px;
+  margin-right: 4px;
+  padding: 0;
+}
+.icure-text-field .icure-input .reset-button svg,
+.icure-text-field .input-container .reset-button svg {
+  width: 15px;
+  height: 15px;
+}
 .icure-text-field .icure-input__validationError,
 .icure-text-field .input-container__validationError {
   border-color: red;
@@ -1086,8 +1122,8 @@ input[type=radio] {
   line-height: 1.4em;
   cursor: text;
   font-size: 12px;
-  top: calc(1.4em + 1px);
-  left: 9px;
+  top: add-three(1.4em, 1px, 0);
+  left: add-two(8px, 1px);
   transition: transform 0.2s ease-out, color 0.2s ease-out;
   color: #084B83;
   display: flex;
@@ -1119,6 +1155,7 @@ class MetadataButtonBar extends lit_1.LitElement {
         super(...arguments);
         this.languages = {};
         this.displayedLabels = {};
+        this.handleReset = undefined;
         this.handleMetadataChanged = undefined;
         this.handleLanguageSelected = undefined;
         this.handleRevisionSelected = undefined;
@@ -1158,8 +1195,7 @@ class MetadataButtonBar extends lit_1.LitElement {
         const owner = (_b = this.metadata) === null || _b === void 0 ? void 0 : _b.owner;
         if (owner && !this.loadedOwners[owner]) {
             this.loadedOwners = Object.assign(Object.assign({}, this.loadedOwners), { [owner]: { id: owner, text: '', terms: [], label: {} } }); // Make sure we do not loop endlessly
-            this.ownersProvider &&
-                this.ownersProvider([], [owner]).then((availableOwners) => (this.loadedOwners = availableOwners.reduce((acc, o) => (Object.assign(Object.assign({}, acc), { [o.id]: o })), this.loadedOwners)));
+            this.ownersProvider && this.ownersProvider([], [owner]).then((availableOwners) => (this.loadedOwners = availableOwners.reduce((acc, o) => (Object.assign(Object.assign({}, acc), { [o.id]: o })), this.loadedOwners)));
         }
         const forcedByMenu = this.displayOwnersMenu || this.displayLanguagesMenu || this.displayValueDateMenu || this.displayVersionsMenu;
         const discordantMetadata = (_d = (_c = this.metadata) === null || _c === void 0 ? void 0 : _c.discordantMetadata) === null || _d === void 0 ? void 0 : _d.call(_c);
@@ -1167,9 +1203,11 @@ class MetadataButtonBar extends lit_1.LitElement {
         const forcedByValueDate = (discordantMetadata === null || discordantMetadata === void 0 ? void 0 : discordantMetadata.valueDate) !== undefined;
         const forcedByLanguage = this.selectedLanguage && this.defaultLanguage !== this.selectedLanguage;
         const forcedByVersion = this.revision && this.revision !== ((_f = (_e = this.versions) === null || _e === void 0 ? void 0 : _e[0]) === null || _f === void 0 ? void 0 : _f.revision);
+        console.log('handle reset', this.handleReset);
         return (0, lit_1.html) ` <div id="extra" class=${'extra extra--metadataButtonsBar' + (forcedByMenu ? ' forced' : '')}>
 			<div class="info ${forcedByOwner || forcedByLanguage || forcedByValueDate ? 'hidden' : ''}">&#9432</div>
 			<div class="buttons-container">
+				${this.handleReset ? (0, lit_1.html) `<button @click="${() => { var _a; return (_a = this.handleReset) === null || _a === void 0 ? void 0 : _a.call(this); }}" class="btn forced">${paths_1.resetPicto}</button>` : lit_1.nothing}
 				<div class="menu-container">
 					<button
 						data-content="${(_k = (((_g = this.metadata) === null || _g === void 0 ? void 0 : _g.owner) ? (_j = this.loadedOwners[(_h = this.metadata) === null || _h === void 0 ? void 0 : _h.owner]) === null || _j === void 0 ? void 0 : _j.text : '')) !== null && _k !== void 0 ? _k : ''}"
@@ -1207,24 +1245,14 @@ class MetadataButtonBar extends lit_1.LitElement {
 					${this.displayValueDateMenu
             ? (0, lit_1.html) `
 									<div id="menu" class="menu value-date-menu">
-										<app-date-picker
-											locale="${(_p = this.defaultLanguage) !== null && _p !== void 0 ? _p : 'en'}"
-											style=""
-											max="${constants_1.MAX_DATE}"
-											min="${(0, to_resolved_date_1.toResolvedDate)('1900-01-01')}"
-											@date-updated="${this.dateUpdated}"
-										></app-date-picker>
+										<app-date-picker locale="${(_p = this.defaultLanguage) !== null && _p !== void 0 ? _p : 'en'}" style="" max="${constants_js_1.MAX_DATE}" min="${(0, to_resolved_date_js_1.toResolvedDate)('1900-01-01')}" @date-updated="${this.dateUpdated}"></app-date-picker>
 									</div>
 							  `
             : ''}
 				</div>
 				<div class="menu-container">
 					<button
-						data-content="${this.revision === null
-            ? 'latest'
-            : this.revision
-                ? `rev-${this.revision.split('-')[0]} ${revisionDate ? `(${(0, date_fns_1.format)(new Date(revisionDate), 'yyyy-MM-dd')})` : ''}`
-                : ''}"
+						data-content="${this.revision === null ? 'latest' : this.revision ? `rev-${this.revision.split('-')[0]} ${revisionDate ? `(${(0, date_fns_1.format)(new Date(revisionDate), 'yyyy-MM-dd')})` : ''}` : ''}"
 						@click="${this.toggleVersionsMenu}"
 						class="btn version  ${forcedByVersion ? 'forced' : ''}"
 					>
@@ -1392,6 +1420,10 @@ __decorate([
     (0, decorators_js_1.property)(),
     __metadata("design:type", Object)
 ], MetadataButtonBar.prototype, "displayedLabels", void 0);
+__decorate([
+    (0, decorators_js_1.property)(),
+    __metadata("design:type", Function)
+], MetadataButtonBar.prototype, "handleReset", void 0);
 __decorate([
     (0, decorators_js_1.property)(),
     __metadata("design:type", Function)