@icure/form 2.0.11 → 2.1.2

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

@@ -1,3 +1,4 @@
+"use strict";
 var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
     var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
     if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
@@ -16,17 +17,38 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
-import { html, LitElement } from 'lit';
-import { property, state } from 'lit/decorators.js';
-import { calendarPatientPicto, i18nPicto, ownerPicto, searchPicto, versionPicto } from './styles/paths';
-import { format } from 'date-fns';
-import { anyDateToDate } from '../../utils/dates';
-import { toResolvedDate } from 'app-datepicker/dist/helpers/to-resolved-date';
-import { MAX_DATE } from 'app-datepicker/dist/constants';
-import { languageName } from '../../utils/languages';
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MetadataButtonBar = void 0;
+const lit_1 = require("lit");
+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_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
-import { css } from 'lit';
-const baseCss = css `@charset "UTF-8";
+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;
 }
@@ -75,15 +97,15 @@ const baseCss = 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;
@@ -874,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;
@@ -912,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;
 }
 
@@ -957,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;
@@ -970,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;
@@ -1083,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;
@@ -1111,11 +1150,12 @@ input[type=radio] {
   font-weight: 500;
   height: 1.4em;
 }`;
-export class MetadataButtonBar extends LitElement {
+class MetadataButtonBar extends lit_1.LitElement {
     constructor() {
         super(...arguments);
         this.languages = {};
         this.displayedLabels = {};
+        this.handleReset = undefined;
         this.handleMetadataChanged = undefined;
         this.handleLanguageSelected = undefined;
         this.handleRevisionSelected = undefined;
@@ -1155,8 +1195,7 @@ export class MetadataButtonBar extends 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);
@@ -1164,24 +1203,26 @@ export class MetadataButtonBar extends 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);
-        return html ` <div id="extra" class=${'extra extra--metadataButtonsBar' + (forcedByMenu ? ' forced' : '')}>
+        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 : ''}"
 						@click="${() => { var _a; return this.toggleOwnersMenu((_a = this.metadata) === null || _a === void 0 ? void 0 : _a.owner); }}"
 						class="btn menu-trigger author ${forcedByOwner ? 'forced' : ''}"
 					>
-						${ownerPicto}
+						${paths_1.ownerPicto}
 					</button>
 					${this.displayOwnersMenu
-            ? html `
+            ? (0, lit_1.html) `
 									<div id="menu" class="menu">
-										<div class="input-container">${searchPicto} <input id="ownerSearch" @input="${this.searchOwner}" /></div>
+										<div class="input-container">${paths_1.searchPicto} <input id="ownerSearch" @input="${this.searchOwner}" /></div>
 										${(_m = (((_l = this.availableOwners) === null || _l === void 0 ? void 0 : _l.length) ? this.availableOwners : Object.values(this.loadedOwners))) === null || _m === void 0 ? void 0 : _m.map((x) => {
                 var _a, _b, _c;
-                return html ` <button
+                return (0, lit_1.html) ` <button
 												@click="${() => this.handleOwnerButtonClicked(x.id)}"
 												id="${x.id}"
 												class="${((_a = this.metadata) === null || _a === void 0 ? void 0 : _a.owner) && ((_c = this.loadedOwners[(_b = this.metadata) === null || _b === void 0 ? void 0 : _b.owner]) === null || _c === void 0 ? void 0 : _c.text) === x.text ? 'item selected' : 'item'}"
@@ -1195,44 +1236,34 @@ export class MetadataButtonBar extends LitElement {
 				</div>
 				<div class="menu-container">
 					<button
-						data-content="${((_o = this.metadata) === null || _o === void 0 ? void 0 : _o.valueDate) ? format(anyDateToDate(this.metadata.valueDate), 'yyyy-MM-dd HH:mm:ss').replace(/ 00:00:00$/, '') : ''}"
+						data-content="${((_o = this.metadata) === null || _o === void 0 ? void 0 : _o.valueDate) ? (0, date_fns_1.format)((0, dates_1.anyDateToDate)(this.metadata.valueDate), 'yyyy-MM-dd HH:mm:ss').replace(/ 00:00:00$/, '') : ''}"
 						class="btn date ${forcedByValueDate ? 'forced' : ''}"
 						@click="${() => this.toggleValueDateMenu()}"
 					>
-						${calendarPatientPicto}
+						${paths_1.calendarPatientPicto}
 					</button>
 					${this.displayValueDateMenu
-            ? html `
+            ? (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="${MAX_DATE}"
-											min="${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 ? `(${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' : ''}"
 					>
-						${versionPicto}
+						${paths_1.versionPicto}
 					</button>
 					${this.displayVersionsMenu
-            ? html ` <div id="menu" class="menu">
+            ? (0, lit_1.html) ` <div id="menu" class="menu">
 									${this.versions.map((x) => {
                 var _a;
-                return html ` <button class="item ${x.revision === this.revision ? 'item selected' : ''}" @click="${() => this.handleRevisionButtonClicked(x.revision)}">
-												${x.revision == null ? 'Latest' : (_a = x.revision) !== null && _a !== void 0 ? _a : ''} ${x.modified ? `(${format(new Date(x.modified), 'yyyy-MM-dd')})` : ''}
+                return (0, lit_1.html) ` <button class="item ${x.revision === this.revision ? 'item selected' : ''}" @click="${() => this.handleRevisionButtonClicked(x.revision)}">
+												${x.revision == null ? 'Latest' : (_a = x.revision) !== null && _a !== void 0 ? _a : ''} ${x.modified ? `(${(0, date_fns_1.format)(new Date(x.modified), 'yyyy-MM-dd')})` : ''}
 											</button>`;
             })}
 							  </div>`
@@ -1240,21 +1271,21 @@ export class MetadataButtonBar extends LitElement {
 				</div>
 				<div class="menu-container">
 					<button
-						data-content="${this.selectedLanguage ? (_q = languageName(this.selectedLanguage)) !== null && _q !== void 0 ? _q : this.selectedLanguage : (_r = languageName(this.defaultLanguage)) !== null && _r !== void 0 ? _r : this.defaultLanguage}"
+						data-content="${this.selectedLanguage ? (_q = (0, languages_1.languageName)(this.selectedLanguage)) !== null && _q !== void 0 ? _q : this.selectedLanguage : (_r = (0, languages_1.languageName)(this.defaultLanguage)) !== null && _r !== void 0 ? _r : this.defaultLanguage}"
 						@click="${this.toggleLanguagesMenu}"
 						class="btn menu-trigger language ${forcedByLanguage ? 'forced' : ''}"
 					>
-						${i18nPicto}
+						${paths_1.i18nPicto}
 					</button>
 					${this.displayLanguagesMenu
-            ? html `
+            ? (0, lit_1.html) `
 									<div id="menu" class="menu">
-										<div class="input-container">${searchPicto} <input id="languageSearch" @input="${this.searchLanguage}" /></div>
+										<div class="input-container">${paths_1.searchPicto} <input id="languageSearch" @input="${this.searchLanguage}" /></div>
 										${[this.defaultLanguage, ...Object.keys(this.languages).filter((x) => x !== this.defaultLanguage)]
-                .filter((x) => { var _a, _b, _c; return !!x && ((_b = (_a = languageName(x)) !== null && _a !== void 0 ? _a : this.languages[x]) !== null && _b !== void 0 ? _b : x).toLowerCase().includes(((_c = this.languageInputValue) !== null && _c !== void 0 ? _c : '').toLowerCase()); })
+                .filter((x) => { var _a, _b, _c; return !!x && ((_b = (_a = (0, languages_1.languageName)(x)) !== null && _a !== void 0 ? _a : this.languages[x]) !== null && _b !== void 0 ? _b : x).toLowerCase().includes(((_c = this.languageInputValue) !== null && _c !== void 0 ? _c : '').toLowerCase()); })
                 .map((x) => {
                 var _a;
-                return html ` <button
+                return (0, lit_1.html) ` <button
 													@click="${() => this.handleLanguageButtonClicked(x)}"
 													id="${x}"
 													class="${(x === this.defaultLanguage && !this.selectedLanguage) || x === this.selectedLanguage
@@ -1263,7 +1294,7 @@ export class MetadataButtonBar extends LitElement {
                         ? 'item item existing'
                         : 'item'}"
 												>
-													${x ? languageName(x) : ''}
+													${x ? (0, languages_1.languageName)(x) : ''}
 												</button>`;
             })}
 									</div>
@@ -1352,88 +1383,93 @@ export class MetadataButtonBar extends LitElement {
         }
     }
 }
+exports.MetadataButtonBar = MetadataButtonBar;
 __decorate([
-    property(),
+    (0, decorators_js_1.property)(),
     __metadata("design:type", String)
 ], MetadataButtonBar.prototype, "valueId", void 0);
 __decorate([
-    property(),
+    (0, decorators_js_1.property)(),
     __metadata("design:type", Object)
 ], MetadataButtonBar.prototype, "metadata", void 0);
 __decorate([
-    property(),
+    (0, decorators_js_1.property)(),
     __metadata("design:type", String)
 ], MetadataButtonBar.prototype, "revision", void 0);
 __decorate([
-    property(),
+    (0, decorators_js_1.property)(),
     __metadata("design:type", Array)
 ], MetadataButtonBar.prototype, "versions", void 0);
 __decorate([
-    property(),
+    (0, decorators_js_1.property)(),
     __metadata("design:type", String)
 ], MetadataButtonBar.prototype, "defaultLanguage", void 0);
 __decorate([
-    property(),
+    (0, decorators_js_1.property)(),
     __metadata("design:type", String)
 ], MetadataButtonBar.prototype, "selectedLanguage", void 0);
 __decorate([
-    property(),
+    (0, decorators_js_1.property)(),
     __metadata("design:type", Object)
 ], MetadataButtonBar.prototype, "languages", void 0);
 __decorate([
-    property(),
+    (0, decorators_js_1.property)(),
     __metadata("design:type", Array)
 ], MetadataButtonBar.prototype, "existingLanguages", void 0);
 __decorate([
-    property(),
+    (0, decorators_js_1.property)(),
     __metadata("design:type", Object)
 ], MetadataButtonBar.prototype, "displayedLabels", void 0);
 __decorate([
-    property(),
+    (0, decorators_js_1.property)(),
+    __metadata("design:type", Function)
+], MetadataButtonBar.prototype, "handleReset", void 0);
+__decorate([
+    (0, decorators_js_1.property)(),
     __metadata("design:type", Function)
 ], MetadataButtonBar.prototype, "handleMetadataChanged", void 0);
 __decorate([
-    property(),
+    (0, decorators_js_1.property)(),
     __metadata("design:type", Function)
 ], MetadataButtonBar.prototype, "handleLanguageSelected", void 0);
 __decorate([
-    property(),
+    (0, decorators_js_1.property)(),
     __metadata("design:type", Function)
 ], MetadataButtonBar.prototype, "handleRevisionSelected", void 0);
 __decorate([
-    property(),
+    (0, decorators_js_1.property)(),
     __metadata("design:type", Function)
 ], MetadataButtonBar.prototype, "ownersProvider", void 0);
 __decorate([
-    state(),
+    (0, decorators_js_1.state)(),
     __metadata("design:type", Object)
 ], MetadataButtonBar.prototype, "displayOwnersMenu", void 0);
 __decorate([
-    state(),
+    (0, decorators_js_1.state)(),
     __metadata("design:type", Object)
 ], MetadataButtonBar.prototype, "ownerInputValue", void 0);
 __decorate([
-    state(),
+    (0, decorators_js_1.state)(),
     __metadata("design:type", Array)
 ], MetadataButtonBar.prototype, "availableOwners", void 0);
 __decorate([
-    state(),
+    (0, decorators_js_1.state)(),
     __metadata("design:type", Object)
 ], MetadataButtonBar.prototype, "loadedOwners", void 0);
 __decorate([
-    state(),
+    (0, decorators_js_1.state)(),
     __metadata("design:type", Object)
 ], MetadataButtonBar.prototype, "displayLanguagesMenu", void 0);
 __decorate([
-    state(),
+    (0, decorators_js_1.state)(),
     __metadata("design:type", Object)
 ], MetadataButtonBar.prototype, "displayVersionsMenu", void 0);
 __decorate([
-    state(),
+    (0, decorators_js_1.state)(),
     __metadata("design:type", Object)
 ], MetadataButtonBar.prototype, "displayValueDateMenu", void 0);
 __decorate([
-    state(),
+    (0, decorators_js_1.state)(),
     __metadata("design:type", Object)
 ], MetadataButtonBar.prototype, "languageInputValue", void 0);
 //# sourceMappingURL=metadata-buttons-bar.js.map