@icure/form 1.1.19 → 1.1.21

package/components/icure-label/index.js

@@ -307,7 +307,6 @@ h3 {
 
 .extra {
   flex-shrink: 0;
-  height: 28px;
   display: flex;
   flex-flow: row nowrap;
   align-items: center;
@@ -330,6 +329,7 @@ h3 {
 }
 
 .extra .buttons-container {
+  position: relative;
   display: flex;
   height: 100%;
   flex-flow: row nowrap;
@@ -342,14 +342,7 @@ h3 {
 .extra:hover .buttons-container .menu-container .btn {
   animation: slideIn 0.24s ease-in forwards;
   pointer-events: none;
-}
-
-.extra:hover .buttons-container .menu-container .btn {
-  animation-delay: 0.24s;
-}
-
-.extra:hover .buttons-container .menu-container:hover .btn {
-  animation-delay: 0.04s;
+  display: unset !important;
 }
 
 .extra.forced:hover .buttons-container .menu-container .btn {
@@ -359,13 +352,15 @@ h3 {
 
 .extra.forced .buttons-container .btn {
   opacity: 1 !important;
+  display: unset !important;
 }
 
-.extra.forced .info {
-  opacity: 0 !important;
+.extra .buttons-container .btn.forced {
+  opacity: 1 !important;
+  display: unset !important;
 }
 
-.extra:hover .info {
+.extra.forced .info, .extra .info.hidden {
   opacity: 0 !important;
   z-index: 0 !important;
 }
@@ -375,6 +370,7 @@ h3 {
   background: transparent;
   position: relative;
   top: 0;
+  display: none;
   opacity: 0;
   cursor: pointer;
   height: 20px;
@@ -392,6 +388,10 @@ h3 {
   fill: #809ab4;
 }
 
+.extra .buttons-container .btn.forced svg path {
+  fill: crimson !important;
+}
+
 .extra .buttons-container .btn:hover svg path {
   fill: #274768;
 }
@@ -434,7 +434,8 @@ h3 {
 
 @keyframes slideIn {
   0% {
-    top: 12px;
+    top: 0;
+    opacity: 0;
     pointer-events: none;
   }
   100% {
@@ -444,10 +445,13 @@ h3 {
   }
 }
 .menu-container {
-  position: relative;
   display: flex;
   align-items: center;
-  height: 100%;
+  height: fit-content;
+}
+
+.value-date-menu {
+  width: unset !important;
 }
 
 .menu {
@@ -465,7 +469,6 @@ h3 {
   max-height: 320px;
   overflow-y: scroll;
 }
-
 .menu .input-container {
   background: #edf2f7;
   border-radius: 4px;
@@ -477,22 +480,18 @@ h3 {
   margin-bottom: 4px;
   padding: 0 4px;
 }
-
 .menu .input-container:hover {
   box-shadow: 0 0 0 3px rgba(40, 151, 255, 0.2);
 }
-
 .menu .input-container:focus-within {
   box-shadow: 0 0 0 3px rgba(40, 151, 255, 0.2), 0 0 0 1px rgb(40, 151, 255);
 }
-
 .menu .input-container input {
   background: transparent;
   border: none;
   flex-grow: 1;
   height: 100%;
 }
-
 .menu .input-container input:focus {
   background: transparent;
   border: none;
@@ -913,7 +912,7 @@ app-date-picker {
 .icure-text-field .icure-input,
 .icure-text-field .input-container {
   border-radius: 2px;
-  padding: 4px 8px;
+  padding: 0 8px;
   width: 100%;
   box-sizing: border-box;
   border-width: 1px;
@@ -1017,7 +1016,7 @@ input[type=radio] {
   line-height: 1.4em;
   cursor: text;
   font-size: 12px;
-  top: calc(1.4em + 5px);
+  top: calc(1.4em + 1px);
   left: 9px;
   transition: transform 0.2s ease-out, color 0.2s ease-out;
   color: #084B83;

package/components/icure-label/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../tmp/components/icure-label/index.ts"],"names":[],"mappings":";;;;;;;;;;;;AAAA,6BAAsC;AACtC,2CAA+C;AAC/C,qDAA4C;AAC5C,aAAa;AACb,6BAA0B;AAC1B,MAAM,OAAO,GAAG,IAAA,SAAG,EAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAqgCjB,CAAA;AAEF,MAAa,UAAW,SAAQ,gBAAU;IAA1C;;QAGa,YAAO,GAAG,IAAI,CAAA;IAY3B,CAAC;IAVA,MAAM,KAAK,MAAM;QAChB,OAAO,CAAC,OAAO,CAAC,CAAA;IACjB,CAAC;IAED,MAAM;;QACL,IAAI,CAAC,IAAI,CAAC,OAAO,EAAE,CAAC;YACnB,OAAO,IAAA,UAAI,EAAA,EAAE,CAAA;QACd,CAAC;QACD,OAAO,IAAA,UAAI,EAAA,GAAG,IAAA,qBAAa,EAAC,MAAA,IAAI,CAAC,KAAK,mCAAI,EAAE,EAAE,MAAA,IAAI,CAAC,aAAa,mCAAI,OAAO,EAAE,IAAI,CAAC,EAAE,CAAA;IACrF,CAAC;CACD;AAfD,gCAeC;AAdY;IAAX,IAAA,wBAAQ,GAAE;;yCAAe;AACd;IAAX,IAAA,wBAAQ,GAAE;;iDAAuB;AACtB;IAAX,IAAA,wBAAQ,GAAE;;2CAAe","sourcesContent":["import { html, LitElement } from 'lit'\nimport { generateLabel } from '../common/utils'\nimport { property } from 'lit/decorators.js'\n// @ts-ignore\nimport { css } from 'lit';\nconst baseCss = css`@charset \"UTF-8\";\n:host {\n  --bg-color-1: #f44336;\n}\n\n.ProseMirror {\n  position: relative;\n}\n\n.ProseMirror {\n  width: 100%;\n  word-wrap: break-word;\n  white-space: pre-wrap;\n  -webkit-font-variant-ligatures: none;\n  font-variant-ligatures: none;\n  font-feature-settings: \"liga\" 0; /* the above doesn't seem to work in Edge */\n}\n\n.ProseMirror pre {\n  white-space: pre-wrap;\n}\n\n.ProseMirror li {\n  position: relative;\n}\n\n.ProseMirror-hideselection *::selection {\n  background: transparent;\n}\n\n.ProseMirror-hideselection *::-moz-selection {\n  background: transparent;\n}\n\n.ProseMirror-hideselection {\n  caret-color: transparent;\n}\n\n.ProseMirror-selectednode {\n  outline: 2px solid #8cf;\n}\n\n/* Make sure li selections wrap around markers */\nli.ProseMirror-selectednode {\n  outline: none;\n}\n\nli.ProseMirror-selectednode:after {\n  content: \"\";\n  position: absolute;\n  left: -32px;\n  right: -2px;\n  top: -2px;\n  bottom: -2px;\n  border: 2px solid #8cf;\n  pointer-events: none;\n}\n\n.ProseMirror-gapcursor {\n  display: none;\n  pointer-events: none;\n  position: absolute;\n}\n\n.ProseMirror-gapcursor:after {\n  content: \"\";\n  display: block;\n  position: absolute;\n  top: -2px;\n  width: 20px;\n  border-top: 1px solid black;\n  animation: ProseMirror-cursor-blink 1.1s steps(2, start) infinite;\n}\n\n@keyframes ProseMirror-cursor-blink {\n  to {\n    visibility: hidden;\n  }\n}\n.ProseMirror-focused .ProseMirror-gapcursor {\n  display: block;\n}\n\n/* Add space around the hr to make clicking it easier */\n.ProseMirror-example-setup-style hr {\n  padding: 2px 10px;\n  border: none;\n  margin: 1em 0;\n}\n\n.ProseMirror-example-setup-style hr:after {\n  content: \"\";\n  display: block;\n  height: 1px;\n  background: silver;\n  line-height: 2px;\n}\n\n.ProseMirror ul,\n.ProseMirror ol {\n  padding-left: 30px;\n}\n\n.ProseMirror blockquote {\n  padding-left: 1em;\n  border-left: 3px solid #eee;\n  margin-left: 0;\n  margin-right: 0;\n}\n\n.ProseMirror-example-setup-style img {\n  cursor: default;\n}\n\n.ProseMirror-prompt {\n  background: white;\n  padding: 5px 10px 5px 15px;\n  border: 1px solid silver;\n  position: fixed;\n  border-radius: 3px;\n  z-index: 11;\n  box-shadow: -0.5px 2px 5px rgba(0, 0, 0, 0.2);\n}\n\n.ProseMirror-prompt h5 {\n  margin: 0;\n  font-weight: normal;\n  font-size: 100%;\n  color: #444;\n}\n\n.ProseMirror-prompt input[type=text],\n.ProseMirror-prompt textarea {\n  background: #eee;\n  border: none;\n  outline: none;\n}\n\n.ProseMirror-prompt input[type=text] {\n  padding: 0 4px;\n}\n\n.ProseMirror-prompt-close {\n  position: absolute;\n  left: 2px;\n  top: 1px;\n  color: #666;\n  border: none;\n  background: transparent;\n  padding: 0;\n}\n\n.ProseMirror-prompt-close:after {\n  content: \"✕\";\n  font-size: 12px;\n}\n\n.ProseMirror-invalid {\n  background: #ffc;\n  border: 1px solid #cc7;\n  border-radius: 4px;\n  padding: 5px 10px;\n  position: absolute;\n  min-width: 10em;\n}\n\n.ProseMirror-prompt-buttons {\n  margin-top: 5px;\n  display: none;\n}\n\n#editor,\n.editor {\n  color: rgb(101, 101, 101);\n  background-clip: padding-box;\n  border-radius: 4px;\n  border: 2px solid rgba(0, 0, 0, 0.2);\n  padding: 5px 0;\n  display: flex;\n  align-items: flex-end;\n}\n\n.ProseMirror p:last-child,\n.ProseMirror h1:last-child,\n.ProseMirror h2:last-child,\n.ProseMirror h3:last-child,\n.ProseMirror h4:last-child,\n.ProseMirror h5:last-child,\n.ProseMirror h6:last-child {\n  margin-bottom: 2px;\n}\n\n.ProseMirror {\n  padding: 6px 8px 2px 8px;\n  line-height: 1.2;\n  color: #274768;\n  font-size: 14px;\n  font-weight: 400;\n  outline: none;\n}\n\n.ProseMirror p {\n  margin-bottom: 1em;\n}\n\n.icure-input {\n  background: #edf2f7;\n  border-radius: 8px;\n  border: none;\n  min-height: 28px;\n  height: auto;\n  display: flex;\n  flex-flow: row nowrap;\n  align-items: flex-start;\n  justify-content: space-between;\n}\n\n#editor {\n  background: transparent;\n  border: none;\n  padding: 0;\n  flex-grow: 1;\n  display: flex;\n  align-items: stretch;\n}\n#editor.tokens-list .ProseMirror, #editor.styled-tokens-list .ProseMirror {\n  display: flex;\n  flex-direction: row;\n  flex-wrap: wrap;\n  align-items: flex-start;\n}\n#editor.tokens-list .ProseMirror li, #editor.styled-tokens-list .ProseMirror li {\n  display: inline-block;\n  border-radius: 8px;\n  padding: 2px 4px;\n  margin-right: 2px;\n  background-color: #dadada;\n  border-color: rgba(42, 61, 108, 0.44);\n}\n#editor.tokens-list .ProseMirror li span, #editor.styled-tokens-list .ProseMirror li span {\n  min-width: 26px;\n  display: inline-block;\n}\n#editor.tokens-list .ProseMirror li span br, #editor.styled-tokens-list .ProseMirror li span br {\n  display: none;\n}\n#editor.tokens-list .ProseMirror li span:after:hover, #editor.styled-tokens-list .ProseMirror li span:after:hover {\n  background: transparent url(\"data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB4bWxu cz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGlkPSJPdXRsaW5lIiB2aWV3 Qm94PSIwIDAgMjQgMjQiIHN0cm9rZT0iIzAwMDAwMCIgZmlsbD0iIzAwMDAwMCIg d2lkdGg9IjUxMiIgaGVpZ2h0PSI1MTIiPjxwYXRoIGQ9Ik0xNiw4YTEsMSwwLDAs MC0xLjQxNCwwTDEyLDEwLjU4Niw5LjQxNCw4QTEsMSwwLDAsMCw4LDkuNDE0TDEw LjU4NiwxMiw4LDE0LjU4NkExLDEsMCwwLDAsOS40MTQsMTZMMTIsMTMuNDE0LDE0 LjU4NiwxNkExLDEsMCwwLDAsMTYsMTQuNTg2TDEzLjQxNCwxMiwxNiw5LjQxNEEx LDEsMCwwLDAsMTYsOFoiLz48cGF0aCBkPSJNMTIsMEExMiwxMiwwLDEsMCwyNCwx MiwxMi4wMTMsMTIuMDEzLDAsMCwwLDEyLDBabTAsMjJBMTAsMTAsMCwxLDEsMjIs MTIsMTAuMDExLDEwLjAxMSwwLDAsMSwxMiwyMloiLz48L3N2Zz4K\") no-repeat center/16px;\n}\n#editor.tokens-list .ProseMirror li span:after, #editor.styled-tokens-list .ProseMirror li span:after {\n  content: \" \";\n  min-width: 22px;\n  background: transparent url(\"data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB4bWxu cz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGlkPSJPdXRsaW5lIiB2aWV3 Qm94PSIwIDAgMjQgMjQiIHN0cm9rZT0iIzg4ODg4OCIgZmlsbD0iIzg4ODg4OCIg d2lkdGg9IjUxMiIgaGVpZ2h0PSI1MTIiPjxwYXRoIGQ9Ik0xNiw4YTEsMSwwLDAs MC0xLjQxNCwwTDEyLDEwLjU4Niw5LjQxNCw4QTEsMSwwLDAsMCw4LDkuNDE0TDEw LjU4NiwxMiw4LDE0LjU4NkExLDEsMCwwLDAsOS40MTQsMTZMMTIsMTMuNDE0LDE0 LjU4NiwxNkExLDEsMCwwLDAsMTYsMTQuNTg2TDEzLjQxNCwxMiwxNiw5LjQxNEEx LDEsMCwwLDAsMTYsOFoiLz48cGF0aCBkPSJNMTIsMEExMiwxMiwwLDEsMCwyNCwx MiwxMi4wMTMsMTIuMDEzLDAsMCwwLDEyLDBabTAsMjJBMTAsMTAsMCwxLDEsMjIs MTIsMTAuMDExLDEwLjAxMSwwLDAsMSwxMiwyMloiLz48L3N2Zz4K\") no-repeat center/16px;\n  display: inline-block;\n}\n#editor.items-list .ProseMirror {\n  display: flex;\n  flex-direction: column;\n  flex-wrap: nowrap;\n  align-items: flex-start;\n  gap: 6px;\n}\n#editor.items-list .ProseMirror li {\n  list-style-type: none;\n  width: 100%;\n  padding-bottom: 4px;\n  border-bottom: 1px dotted rgba(128, 128, 128, 0.5098039216);\n}\n#editor.items-list .ProseMirror li:last-child {\n  border-bottom: none;\n}\n\n#content {\n  position: relative;\n  padding: 0;\n}\n\n* {\n  font-family: \"Roboto\", Helvetica, sans-serif;\n}\n\np {\n  margin-top: 0;\n}\n\nh3 {\n  color: #274768;\n  margin-top: 0;\n}\n\n.extra {\n  flex-shrink: 0;\n  height: 28px;\n  display: flex;\n  flex-flow: row nowrap;\n  align-items: center;\n  padding: 0 8px;\n  transition: all 0.24s cubic-bezier(0.42, 0.01, 1, 0.62);\n}\n\n.extra > .info {\n  color: #809ab4;\n  font-size: 12px;\n  width: 100%;\n  height: auto;\n  overflow: hidden;\n  pointer-events: none;\n  text-align: right;\n}\n\n.extra > .info > span {\n  font-weight: 700;\n}\n\n.extra .buttons-container {\n  display: flex;\n  height: 100%;\n  flex-flow: row nowrap;\n  align-items: center;\n  justify-content: flex-end;\n  width: 0;\n  transition: all 0.24s cubic-bezier(0.14, 0.69, 0.87, 0.54);\n}\n\n.extra:hover .buttons-container .menu-container .btn {\n  animation: slideIn 0.24s ease-in forwards;\n  pointer-events: none;\n}\n\n.extra:hover .buttons-container .menu-container .btn {\n  animation-delay: 0.24s;\n}\n\n.extra:hover .buttons-container .menu-container:hover .btn {\n  animation-delay: 0.04s;\n}\n\n.extra.forced:hover .buttons-container .menu-container .btn {\n  animation: none;\n  pointer-events: all;\n}\n\n.extra.forced .buttons-container .btn {\n  opacity: 1 !important;\n}\n\n.extra.forced .info {\n  opacity: 0 !important;\n}\n\n.extra:hover .info {\n  opacity: 0 !important;\n  z-index: 0 !important;\n}\n\n.extra .buttons-container .btn {\n  border: none;\n  background: transparent;\n  position: relative;\n  top: 0;\n  opacity: 0;\n  cursor: pointer;\n  height: 20px;\n  width: 10px;\n  margin-left: 4px;\n  margin-right: 4px;\n  padding: 0;\n}\n\n.extra .buttons-container .menu-container:last-child .btn {\n  margin-right: 0;\n}\n\n.extra .buttons-container .btn svg path {\n  fill: #809ab4;\n}\n\n.extra .buttons-container .btn:hover svg path {\n  fill: #274768;\n}\n\n.extra .buttons-container .menu-container .btn:hover::after {\n  content: attr(data-content);\n  position: absolute;\n  top: -22px;\n  height: 16px;\n  left: 50%;\n  transform: translateX(-50%);\n  border-radius: 8px;\n  background: #274768;\n  color: white;\n  display: flex;\n  flex-flow: row wrap;\n  align-items: center;\n  text-transform: capitalize;\n  white-space: nowrap;\n  padding: 0 12px;\n  font-size: 12px;\n  line-height: 0;\n}\n\n.extra .buttons-container .btn:focus,\n.extra .buttons-container .btn:focus-within {\n  border: none;\n  outline: none;\n}\n\n.extra .buttons-container .menu-container .btn:hover::before {\n  content: \"\";\n  display: block;\n  border-color: #274768 transparent transparent transparent;\n  border-style: solid;\n  border-width: 4px;\n  position: absolute;\n  top: -6px;\n}\n\n@keyframes slideIn {\n  0% {\n    top: 12px;\n    pointer-events: none;\n  }\n  100% {\n    top: 0;\n    opacity: 1;\n    pointer-events: all;\n  }\n}\n.menu-container {\n  position: relative;\n  display: flex;\n  align-items: center;\n  height: 100%;\n}\n\n.menu {\n  display: block;\n  position: absolute;\n  top: 20px;\n  right: 0;\n  z-index: 2;\n  background: #fff;\n  box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.25);\n  border-radius: 8px;\n  padding: 8px;\n  width: 220px;\n  min-height: 120px;\n  max-height: 320px;\n  overflow-y: scroll;\n}\n\n.menu .input-container {\n  background: #edf2f7;\n  border-radius: 4px;\n  display: flex;\n  flex-flow: row nowrap;\n  align-items: center;\n  justify-content: flex-start;\n  height: 32px;\n  margin-bottom: 4px;\n  padding: 0 4px;\n}\n\n.menu .input-container:hover {\n  box-shadow: 0 0 0 3px rgba(40, 151, 255, 0.2);\n}\n\n.menu .input-container:focus-within {\n  box-shadow: 0 0 0 3px rgba(40, 151, 255, 0.2), 0 0 0 1px rgb(40, 151, 255);\n}\n\n.menu .input-container input {\n  background: transparent;\n  border: none;\n  flex-grow: 1;\n  height: 100%;\n}\n\n.menu .input-container input:focus {\n  background: transparent;\n  border: none;\n  outline: none;\n}\n\n.menu-trigger:focus .menu {\n  display: block;\n}\n\n.menu-container .item {\n  height: 22px;\n  width: 100%;\n  background: transparent;\n  border-radius: 4px;\n  font-size: 14px;\n  color: #274768;\n  display: flex;\n  flex-flow: row nowrap;\n  align-items: center;\n  justify-content: flex-start;\n  box-shadow: none;\n  border: none;\n  white-space: nowrap;\n  overflow-x: hidden;\n  text-overflow: ellipsis;\n}\n\n.menu-container .item:hover {\n  background: #f5f9fd;\n  font-weight: 500;\n  border-radius: 4px;\n}\n\nspan {\n  position: relative;\n  z-index: 1;\n}\n\nspan.date {\n  margin-right: 1px;\n}\n\nspan.time {\n  margin-left: 1px;\n}\n\nspan.measure {\n  display: inline-block;\n  margin-right: 1px;\n}\n\nspan.unit {\n  margin-left: 1px;\n  display: inline-block;\n}\n\nspan[data-content]:hover::after {\n  position: absolute;\n  content: attr(data-content);\n  background: #274768;\n  color: #ffffff;\n  font-size: 9px;\n  line-height: 12px;\n  top: -12px;\n  left: 0px;\n  padding: 0px 2px;\n}\n\nspan[data-content]::before {\n  position: absolute;\n  content: \"\";\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  z-index: -1;\n  opacity: 0.3;\n}\n\n.masked {\n  display: none;\n}\n\n.companion {\n  position: absolute;\n  width: 15px;\n  background-color: hsl(194, 100%, 50%);\n  color: white;\n  z-index: 20;\n  padding: 0;\n  text-align: center;\n  font-size: 14px;\n  font-weight: 500;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  border-radius: 0 2px 2px 0;\n}\n\n.companion:hover {\n  font-weight: 700;\n  background: hsl(202, 100%, 50%);\n}\n\n*::selection {\n  background-color: hsla(194, 100%, 50%, 0.2);\n}\n\n.suggestion-palette {\n  position: absolute;\n  z-index: 20;\n  max-width: 380px;\n  font-size: 11px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  padding: 4px;\n  border: none;\n  border-radius: 8px;\n  background: white;\n  box-shadow: 0 1.1px 1.1px rgba(0, 0, 0, 0.022), 0 2.7px 2.7px rgba(0, 0, 0, 0.032), 0 5px 5px rgba(0, 0, 0, 0.04), 0 8.9px 8.9px rgba(0, 0, 0, 0.048), 0 16.7px 16.7px rgba(0, 0, 0, 0.058), 0 40px 40px rgba(0, 0, 0, 0.08);\n}\n\n.suggestion-palette ul {\n  white-space: nowrap;\n  list-style-type: none;\n  margin: 0;\n  padding: 0;\n}\n\n.suggestion-palette ul li {\n  padding: 0 8px;\n  font-size: 11px;\n  height: 20px;\n  box-sizing: border-box;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  border-radius: 4px;\n  color: rgb(39, 71, 104);\n}\n.suggestion-palette ul li svg {\n  height: 12px;\n  width: 12px;\n  border-radius: 4px;\n  transform-origin: center center;\n}\n.suggestion-palette ul li svg path {\n  fill: rgb(128, 154, 180);\n}\n\n.suggestion-palette ul li:not(:first-child) svg.tab-icn,\n.suggestion-palette ul li:not(.focused) svg.return-icn,\n.suggestion-palette ul.focused li:first-child svg.tab-icn {\n  height: 0;\n  width: 0;\n  transform: scale(0);\n  opacity: 0;\n}\n\n.suggestion-palette ul li.focused {\n  background-color: rgb(237, 242, 247);\n}\n\n.suggestion-palette ul li.focused svg.return-icn {\n  animation: growIn 0.24s ease-in forwards;\n}\n\n@keyframes growIn {\n  0% {\n    transform: scale(0.5);\n  }\n  90% {\n    transform: scale(1.1);\n  }\n  100% {\n    transform: scale(1);\n  }\n}\nspan.code-count-1::after,\nspan.code-count-1::before {\n  background: var(--bg-code-color-1);\n  color: var(--text-code-color-1);\n}\n\nspan.code-count-2::after,\nspan.code-count-2::before {\n  background: var(--bg-code-color-1);\n  color: var(--text-code-color-1);\n  /* STRIPES */\n  /*background: repeating-linear-gradient(*/\n  /*\t45deg,*/\n  /*\tvar(--bg-code-color-1),*/\n  /*\tvar(--bg-code-color-1) 10px,*/\n  /*\tvar(--bg-code-color-2) 10px,*/\n  /*\tvar(--bg-code-color-2) 20px*/\n  /*);*/\n  /* PAS STRIPES */\n  background: linear-gradient(90deg, var(--bg-code-color-1) 0%, var(--bg-code-color-2) 100%);\n}\n\nspan.code-count-3::after,\nspan.code-count-3::before {\n  background: var(--bg-code-color-1);\n  color: var(--text-code-color-1);\n  /* STRIPES */\n  background: repeating-linear-gradient(45deg, var(--bg-code-color-1), var(--bg-code-color-1) 10px, var(--bg-code-color-2) 10px, var(--bg-code-color-2) 20px);\n  /* PAS STRIPES */\n  /* background: linear-gradient(90deg, var(--bg-code-color-1) 0%, var(--bg-code-color-2) 100%);*/\n}\n\n.selected-option {\n  padding: 2px;\n  margin-right: 5px;\n}\n\n.options {\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  position: absolute;\n  top: 30px;\n  left: 0;\n  z-index: 2;\n  background: #fff;\n  box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.25);\n  width: auto;\n  min-width: 100%;\n  overflow-y: auto;\n  max-height: 280px;\n}\n\n.date-picker {\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  position: absolute;\n  top: 30px;\n  right: 0;\n  z-index: 2;\n  background: #fff;\n  box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.25);\n  width: 260px;\n  overflow-y: auto;\n  max-height: 280px;\n  left: 0px;\n}\n\napp-date-picker {\n  --app-primary: #084B83;\n  --app-hover: #5b7da2;\n  --app-selected-hover: #5b7da2;\n}\n\n.option {\n  height: 28px;\n  min-height: 28px;\n  width: 100%;\n  background: transparent;\n  border-radius: 4px;\n  font-size: 14px;\n  color: #545454;\n  display: flex;\n  flex-flow: row nowrap;\n  align-items: center;\n  justify-content: flex-start;\n  box-shadow: none;\n  border: none;\n  white-space: nowrap;\n  overflow-x: hidden;\n  text-overflow: ellipsis;\n  padding: 4px 8px;\n  -webkit-user-select: none; /* Safari */\n  -ms-user-select: none; /* IE 10 and IE 11 */\n  user-select: none; /* Standard syntax */\n}\n\n.option:hover {\n  color: #656565;\n  background-color: #ededed;\n}\n\n.select-arrow {\n  border: none;\n  background: 0px 0px;\n  position: relative;\n  top: 0px;\n  opacity: 0.5;\n  cursor: pointer;\n  height: 20px;\n  width: 10px;\n  margin-left: 4px;\n  margin-right: 4px;\n  padding: 0px;\n}\n\n.hidden {\n  display: none;\n}\n\n.container {\n  position: relative;\n}\n\n.icure-form {\n  background-color: rgba(0, 0, 0, 0);\n  display: grid;\n  gap: 0 6px;\n  grid-template-columns: repeat(24, 1fr);\n}\n\n.group {\n  align-items: end;\n  display: grid;\n}\n\n.subform {\n  align-items: end;\n  display: grid;\n  position: relative;\n  margin: 8px -8px 8px;\n  padding: 0 8px 0;\n  min-height: 64px;\n  background-color: #e7f0fd;\n}\n\n.icure-form hr {\n  display: block;\n  margin-top: 20px;\n  border-top: 1px solid rgba(8, 75, 131, 0.13);\n  margin-bottom: 20px;\n}\n.icure-form h2 {\n  font-size: 14.4px;\n  font-weight: 700;\n  color: #084B83;\n  padding: 2px;\n}\n.icure-form h3 {\n  font-size: 13.2px;\n  font-weight: 500;\n  color: #084B83;\n  padding: 6px;\n}\n.icure-form .group.bordered {\n  background: #f6f6f6;\n  border-radius: 12px;\n}\n.icure-form .float-right-btn {\n  position: absolute;\n  right: 10px;\n  cursor: pointer;\n}\n.icure-form .float-right-btn.top {\n  top: 6px;\n}\n.icure-form .float-right-btn.bottom {\n  bottom: -8px;\n}\n\n.icure-form-field {\n  align-items: end;\n  display: grid;\n}\n\n.error {\n  color: red;\n  font-size: 12px;\n}\n\n.icure-text-field > .icure-label, .icure-button-group > .icure-label {\n  z-index: 1;\n  pointer-events: none;\n  line-height: 1.4em;\n  cursor: text;\n  font-size: 12px;\n  left: 9px;\n  color: #084B83;\n  align-items: center;\n  height: 28px;\n  max-width: 85%;\n  min-width: 0;\n}\n.icure-text-field > .icure-label.float, .icure-button-group > .icure-label.float {\n  display: inline-block;\n  height: 1.4em;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  overflow: hidden;\n}\n\n.icure-text-field {\n  position: relative;\n  width: 100%;\n  flex-direction: row;\n  justify-content: stretch;\n  align-items: center;\n}\n.icure-text-field > .icure-label {\n  transition: transform 0.2s ease-out, color 0.2s ease-out;\n}\n.icure-text-field > .icure-input {\n  flex: 1 1 auto;\n  width: auto;\n}\n.icure-text-field > .icure-label.side {\n  position: relative;\n}\n.icure-text-field > .icure-label.side.left {\n  order: -1;\n  margin-right: 1em;\n}\n.icure-text-field > .icure-label.side.right {\n  order: 1;\n  margin-left: 1em;\n}\n.icure-text-field .icure-input,\n.icure-text-field .input-container {\n  border-radius: 2px;\n  padding: 4px 8px;\n  width: 100%;\n  box-sizing: border-box;\n  border-width: 1px;\n  border-style: solid;\n  outline: 0;\n  font: inherit;\n  font-size: 14px;\n  line-height: 1.4em;\n  display: flex;\n  align-items: center;\n  vertical-align: middle;\n  position: relative;\n  -webkit-appearance: none;\n  background-color: #ffffff;\n  border-color: red;\n  color: #000000;\n  box-sizing: border-box;\n}\n.icure-text-field .icure-input:focus, .icure-text-field .icure-input:focus-within,\n.icure-text-field .input-container:focus,\n.icure-text-field .input-container:focus-within {\n  box-shadow: 0 2px 2px 1px rgba(0, 0, 0, 0.06);\n}\n.icure-text-field .icure-input:hover,\n.icure-text-field .input-container:hover {\n  border-color: rgba(0, 0, 0, 0.15);\n  box-shadow: none;\n}\n.icure-text-field .icure-input:hover:focus, .icure-text-field .icure-input:hover:focus-within,\n.icure-text-field .input-container:hover:focus,\n.icure-text-field .input-container:hover:focus-within {\n  box-shadow: 0 2px 2px 1px rgba(0, 0, 0, 0.06);\n}\n.icure-text-field .icure-input .ProseMirror,\n.icure-text-field .input-container .ProseMirror {\n  padding: 0;\n  font-size: 14px;\n  line-height: 1.4em;\n  color: #000000;\n}\n.icure-text-field .icure-input .ProseMirror .date,\n.icure-text-field .input-container .ProseMirror .date {\n  padding: 1px;\n}\n.icure-text-field .icure-input .ProseMirror .time,\n.icure-text-field .input-container .ProseMirror .time {\n  padding: 1px;\n}\n.icure-text-field .icure-input .ProseMirror:focus .focused,\n.icure-text-field .input-container .ProseMirror:focus .focused {\n  background-color: rgba(0, 0, 0, 0.05);\n  border-radius: 3px;\n  border-color: rgba(0, 0, 0, 0.1);\n}\n.icure-text-field .icure-input > svg,\n.icure-text-field .input-container > svg {\n  opacity: 0.5;\n}\n.icure-text-field .icure-input > svg path,\n.icure-text-field .input-container > svg path {\n  fill: #656565;\n}\n.icure-text-field .icure-input .extra,\n.icure-text-field .input-container .extra {\n  height: 20px;\n}\n.icure-text-field .icure-input .extra > .info,\n.icure-text-field .input-container .extra > .info {\n  color: #656565;\n  opacity: 0.5;\n}\n.icure-text-field .icure-input .extra .buttons-container .btn svg path,\n.icure-text-field .input-container .extra .buttons-container .btn svg path {\n  fill: #656565;\n  opacity: 0.5;\n}\n.icure-text-field .icure-input .extra .buttons-container .btn svg path:hover,\n.icure-text-field .input-container .extra .buttons-container .btn svg path:hover {\n  fill: #656565;\n  opacity: 1;\n}\n\ninput[type=radio] {\n  margin-top: -1px;\n  vertical-align: middle;\n}\n\n.icure-checkbox:checked {\n  accent-color: #06a070;\n}\n\n.icure-button-group > div {\n  display: grid;\n}\n.icure-button-group > div > div {\n  display: flex;\n  align-items: center;\n}\n.icure-button-group > div > div > .icure-button-group-label {\n  z-index: 1;\n  line-height: 1.4em;\n  cursor: text;\n  font-size: 12px;\n  top: calc(1.4em + 5px);\n  left: 9px;\n  transition: transform 0.2s ease-out, color 0.2s ease-out;\n  color: #084B83;\n  display: flex;\n  align-items: center;\n  height: 28px;\n  max-width: 85%;\n  min-width: 0;\n}\n.icure-button-group > div > div > .icure-button-group-label > span {\n  display: block;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  overflow: hidden;\n  padding-right: 8px;\n}\n.icure-button-group > .icure-input {\n  flex: 1 1 auto;\n  width: auto;\n}\n.icure-button-group > .icure-label {\n  transform: translate(0, 0) scale(1);\n}\n.icure-button-group > .icure-label.above, .icure-button-group.has-content > .icure-label, .icure-button-group:focus > .icure-label, .icure-button-group:focus-within > .icure-label {\n  font-weight: 500;\n  height: 1.4em;\n}` \n\nexport class IcureLabel extends LitElement {\n\t@property() label?: string\n\t@property() labelPosition?: string\n\t@property() visible = true\n\n\tstatic get styles() {\n\t\treturn [baseCss]\n\t}\n\n\trender() {\n\t\tif (!this.visible) {\n\t\t\treturn html``\n\t\t}\n\t\treturn html`${generateLabel(this.label ?? '', this.labelPosition ?? 'float', 'en')}`\n\t}\n}\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../tmp/components/icure-label/index.ts"],"names":[],"mappings":";;;;;;;;;;;;AAAA,6BAAsC;AACtC,2CAA+C;AAC/C,qDAA4C;AAC5C,aAAa;AACb,6BAA0B;AAC1B,MAAM,OAAO,GAAG,IAAA,SAAG,EAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAogCjB,CAAA;AAEF,MAAa,UAAW,SAAQ,gBAAU;IAA1C;;QAGa,YAAO,GAAG,IAAI,CAAA;IAY3B,CAAC;IAVA,MAAM,KAAK,MAAM;QAChB,OAAO,CAAC,OAAO,CAAC,CAAA;IACjB,CAAC;IAED,MAAM;;QACL,IAAI,CAAC,IAAI,CAAC,OAAO,EAAE,CAAC;YACnB,OAAO,IAAA,UAAI,EAAA,EAAE,CAAA;QACd,CAAC;QACD,OAAO,IAAA,UAAI,EAAA,GAAG,IAAA,qBAAa,EAAC,MAAA,IAAI,CAAC,KAAK,mCAAI,EAAE,EAAE,MAAA,IAAI,CAAC,aAAa,mCAAI,OAAO,EAAE,IAAI,CAAC,EAAE,CAAA;IACrF,CAAC;CACD;AAfD,gCAeC;AAdY;IAAX,IAAA,wBAAQ,GAAE;;yCAAe;AACd;IAAX,IAAA,wBAAQ,GAAE;;iDAAuB;AACtB;IAAX,IAAA,wBAAQ,GAAE;;2CAAe","sourcesContent":["import { html, LitElement } from 'lit'\nimport { generateLabel } from '../common/utils'\nimport { property } from 'lit/decorators.js'\n// @ts-ignore\nimport { css } from 'lit';\nconst baseCss = css`@charset \"UTF-8\";\n:host {\n  --bg-color-1: #f44336;\n}\n\n.ProseMirror {\n  position: relative;\n}\n\n.ProseMirror {\n  width: 100%;\n  word-wrap: break-word;\n  white-space: pre-wrap;\n  -webkit-font-variant-ligatures: none;\n  font-variant-ligatures: none;\n  font-feature-settings: \"liga\" 0; /* the above doesn't seem to work in Edge */\n}\n\n.ProseMirror pre {\n  white-space: pre-wrap;\n}\n\n.ProseMirror li {\n  position: relative;\n}\n\n.ProseMirror-hideselection *::selection {\n  background: transparent;\n}\n\n.ProseMirror-hideselection *::-moz-selection {\n  background: transparent;\n}\n\n.ProseMirror-hideselection {\n  caret-color: transparent;\n}\n\n.ProseMirror-selectednode {\n  outline: 2px solid #8cf;\n}\n\n/* Make sure li selections wrap around markers */\nli.ProseMirror-selectednode {\n  outline: none;\n}\n\nli.ProseMirror-selectednode:after {\n  content: \"\";\n  position: absolute;\n  left: -32px;\n  right: -2px;\n  top: -2px;\n  bottom: -2px;\n  border: 2px solid #8cf;\n  pointer-events: none;\n}\n\n.ProseMirror-gapcursor {\n  display: none;\n  pointer-events: none;\n  position: absolute;\n}\n\n.ProseMirror-gapcursor:after {\n  content: \"\";\n  display: block;\n  position: absolute;\n  top: -2px;\n  width: 20px;\n  border-top: 1px solid black;\n  animation: ProseMirror-cursor-blink 1.1s steps(2, start) infinite;\n}\n\n@keyframes ProseMirror-cursor-blink {\n  to {\n    visibility: hidden;\n  }\n}\n.ProseMirror-focused .ProseMirror-gapcursor {\n  display: block;\n}\n\n/* Add space around the hr to make clicking it easier */\n.ProseMirror-example-setup-style hr {\n  padding: 2px 10px;\n  border: none;\n  margin: 1em 0;\n}\n\n.ProseMirror-example-setup-style hr:after {\n  content: \"\";\n  display: block;\n  height: 1px;\n  background: silver;\n  line-height: 2px;\n}\n\n.ProseMirror ul,\n.ProseMirror ol {\n  padding-left: 30px;\n}\n\n.ProseMirror blockquote {\n  padding-left: 1em;\n  border-left: 3px solid #eee;\n  margin-left: 0;\n  margin-right: 0;\n}\n\n.ProseMirror-example-setup-style img {\n  cursor: default;\n}\n\n.ProseMirror-prompt {\n  background: white;\n  padding: 5px 10px 5px 15px;\n  border: 1px solid silver;\n  position: fixed;\n  border-radius: 3px;\n  z-index: 11;\n  box-shadow: -0.5px 2px 5px rgba(0, 0, 0, 0.2);\n}\n\n.ProseMirror-prompt h5 {\n  margin: 0;\n  font-weight: normal;\n  font-size: 100%;\n  color: #444;\n}\n\n.ProseMirror-prompt input[type=text],\n.ProseMirror-prompt textarea {\n  background: #eee;\n  border: none;\n  outline: none;\n}\n\n.ProseMirror-prompt input[type=text] {\n  padding: 0 4px;\n}\n\n.ProseMirror-prompt-close {\n  position: absolute;\n  left: 2px;\n  top: 1px;\n  color: #666;\n  border: none;\n  background: transparent;\n  padding: 0;\n}\n\n.ProseMirror-prompt-close:after {\n  content: \"✕\";\n  font-size: 12px;\n}\n\n.ProseMirror-invalid {\n  background: #ffc;\n  border: 1px solid #cc7;\n  border-radius: 4px;\n  padding: 5px 10px;\n  position: absolute;\n  min-width: 10em;\n}\n\n.ProseMirror-prompt-buttons {\n  margin-top: 5px;\n  display: none;\n}\n\n#editor,\n.editor {\n  color: rgb(101, 101, 101);\n  background-clip: padding-box;\n  border-radius: 4px;\n  border: 2px solid rgba(0, 0, 0, 0.2);\n  padding: 5px 0;\n  display: flex;\n  align-items: flex-end;\n}\n\n.ProseMirror p:last-child,\n.ProseMirror h1:last-child,\n.ProseMirror h2:last-child,\n.ProseMirror h3:last-child,\n.ProseMirror h4:last-child,\n.ProseMirror h5:last-child,\n.ProseMirror h6:last-child {\n  margin-bottom: 2px;\n}\n\n.ProseMirror {\n  padding: 6px 8px 2px 8px;\n  line-height: 1.2;\n  color: #274768;\n  font-size: 14px;\n  font-weight: 400;\n  outline: none;\n}\n\n.ProseMirror p {\n  margin-bottom: 1em;\n}\n\n.icure-input {\n  background: #edf2f7;\n  border-radius: 8px;\n  border: none;\n  min-height: 28px;\n  height: auto;\n  display: flex;\n  flex-flow: row nowrap;\n  align-items: flex-start;\n  justify-content: space-between;\n}\n\n#editor {\n  background: transparent;\n  border: none;\n  padding: 0;\n  flex-grow: 1;\n  display: flex;\n  align-items: stretch;\n}\n#editor.tokens-list .ProseMirror, #editor.styled-tokens-list .ProseMirror {\n  display: flex;\n  flex-direction: row;\n  flex-wrap: wrap;\n  align-items: flex-start;\n}\n#editor.tokens-list .ProseMirror li, #editor.styled-tokens-list .ProseMirror li {\n  display: inline-block;\n  border-radius: 8px;\n  padding: 2px 4px;\n  margin-right: 2px;\n  background-color: #dadada;\n  border-color: rgba(42, 61, 108, 0.44);\n}\n#editor.tokens-list .ProseMirror li span, #editor.styled-tokens-list .ProseMirror li span {\n  min-width: 26px;\n  display: inline-block;\n}\n#editor.tokens-list .ProseMirror li span br, #editor.styled-tokens-list .ProseMirror li span br {\n  display: none;\n}\n#editor.tokens-list .ProseMirror li span:after:hover, #editor.styled-tokens-list .ProseMirror li span:after:hover {\n  background: transparent url(\"data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB4bWxu cz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGlkPSJPdXRsaW5lIiB2aWV3 Qm94PSIwIDAgMjQgMjQiIHN0cm9rZT0iIzAwMDAwMCIgZmlsbD0iIzAwMDAwMCIg d2lkdGg9IjUxMiIgaGVpZ2h0PSI1MTIiPjxwYXRoIGQ9Ik0xNiw4YTEsMSwwLDAs MC0xLjQxNCwwTDEyLDEwLjU4Niw5LjQxNCw4QTEsMSwwLDAsMCw4LDkuNDE0TDEw LjU4NiwxMiw4LDE0LjU4NkExLDEsMCwwLDAsOS40MTQsMTZMMTIsMTMuNDE0LDE0 LjU4NiwxNkExLDEsMCwwLDAsMTYsMTQuNTg2TDEzLjQxNCwxMiwxNiw5LjQxNEEx LDEsMCwwLDAsMTYsOFoiLz48cGF0aCBkPSJNMTIsMEExMiwxMiwwLDEsMCwyNCwx MiwxMi4wMTMsMTIuMDEzLDAsMCwwLDEyLDBabTAsMjJBMTAsMTAsMCwxLDEsMjIs MTIsMTAuMDExLDEwLjAxMSwwLDAsMSwxMiwyMloiLz48L3N2Zz4K\") no-repeat center/16px;\n}\n#editor.tokens-list .ProseMirror li span:after, #editor.styled-tokens-list .ProseMirror li span:after {\n  content: \" \";\n  min-width: 22px;\n  background: transparent url(\"data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB4bWxu cz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGlkPSJPdXRsaW5lIiB2aWV3 Qm94PSIwIDAgMjQgMjQiIHN0cm9rZT0iIzg4ODg4OCIgZmlsbD0iIzg4ODg4OCIg d2lkdGg9IjUxMiIgaGVpZ2h0PSI1MTIiPjxwYXRoIGQ9Ik0xNiw4YTEsMSwwLDAs MC0xLjQxNCwwTDEyLDEwLjU4Niw5LjQxNCw4QTEsMSwwLDAsMCw4LDkuNDE0TDEw LjU4NiwxMiw4LDE0LjU4NkExLDEsMCwwLDAsOS40MTQsMTZMMTIsMTMuNDE0LDE0 LjU4NiwxNkExLDEsMCwwLDAsMTYsMTQuNTg2TDEzLjQxNCwxMiwxNiw5LjQxNEEx LDEsMCwwLDAsMTYsOFoiLz48cGF0aCBkPSJNMTIsMEExMiwxMiwwLDEsMCwyNCwx MiwxMi4wMTMsMTIuMDEzLDAsMCwwLDEyLDBabTAsMjJBMTAsMTAsMCwxLDEsMjIs MTIsMTAuMDExLDEwLjAxMSwwLDAsMSwxMiwyMloiLz48L3N2Zz4K\") no-repeat center/16px;\n  display: inline-block;\n}\n#editor.items-list .ProseMirror {\n  display: flex;\n  flex-direction: column;\n  flex-wrap: nowrap;\n  align-items: flex-start;\n  gap: 6px;\n}\n#editor.items-list .ProseMirror li {\n  list-style-type: none;\n  width: 100%;\n  padding-bottom: 4px;\n  border-bottom: 1px dotted rgba(128, 128, 128, 0.5098039216);\n}\n#editor.items-list .ProseMirror li:last-child {\n  border-bottom: none;\n}\n\n#content {\n  position: relative;\n  padding: 0;\n}\n\n* {\n  font-family: \"Roboto\", Helvetica, sans-serif;\n}\n\np {\n  margin-top: 0;\n}\n\nh3 {\n  color: #274768;\n  margin-top: 0;\n}\n\n.extra {\n  flex-shrink: 0;\n  display: flex;\n  flex-flow: row nowrap;\n  align-items: center;\n  padding: 0 8px;\n  transition: all 0.24s cubic-bezier(0.42, 0.01, 1, 0.62);\n}\n\n.extra > .info {\n  color: #809ab4;\n  font-size: 12px;\n  width: 100%;\n  height: auto;\n  overflow: hidden;\n  pointer-events: none;\n  text-align: right;\n}\n\n.extra > .info > span {\n  font-weight: 700;\n}\n\n.extra .buttons-container {\n  position: relative;\n  display: flex;\n  height: 100%;\n  flex-flow: row nowrap;\n  align-items: center;\n  justify-content: flex-end;\n  width: 0;\n  transition: all 0.24s cubic-bezier(0.14, 0.69, 0.87, 0.54);\n}\n\n.extra:hover .buttons-container .menu-container .btn {\n  animation: slideIn 0.24s ease-in forwards;\n  pointer-events: none;\n  display: unset !important;\n}\n\n.extra.forced:hover .buttons-container .menu-container .btn {\n  animation: none;\n  pointer-events: all;\n}\n\n.extra.forced .buttons-container .btn {\n  opacity: 1 !important;\n  display: unset !important;\n}\n\n.extra .buttons-container .btn.forced {\n  opacity: 1 !important;\n  display: unset !important;\n}\n\n.extra.forced .info, .extra .info.hidden {\n  opacity: 0 !important;\n  z-index: 0 !important;\n}\n\n.extra .buttons-container .btn {\n  border: none;\n  background: transparent;\n  position: relative;\n  top: 0;\n  display: none;\n  opacity: 0;\n  cursor: pointer;\n  height: 20px;\n  width: 10px;\n  margin-left: 4px;\n  margin-right: 4px;\n  padding: 0;\n}\n\n.extra .buttons-container .menu-container:last-child .btn {\n  margin-right: 0;\n}\n\n.extra .buttons-container .btn svg path {\n  fill: #809ab4;\n}\n\n.extra .buttons-container .btn.forced svg path {\n  fill: crimson !important;\n}\n\n.extra .buttons-container .btn:hover svg path {\n  fill: #274768;\n}\n\n.extra .buttons-container .menu-container .btn:hover::after {\n  content: attr(data-content);\n  position: absolute;\n  top: -22px;\n  height: 16px;\n  left: 50%;\n  transform: translateX(-50%);\n  border-radius: 8px;\n  background: #274768;\n  color: white;\n  display: flex;\n  flex-flow: row wrap;\n  align-items: center;\n  text-transform: capitalize;\n  white-space: nowrap;\n  padding: 0 12px;\n  font-size: 12px;\n  line-height: 0;\n}\n\n.extra .buttons-container .btn:focus,\n.extra .buttons-container .btn:focus-within {\n  border: none;\n  outline: none;\n}\n\n.extra .buttons-container .menu-container .btn:hover::before {\n  content: \"\";\n  display: block;\n  border-color: #274768 transparent transparent transparent;\n  border-style: solid;\n  border-width: 4px;\n  position: absolute;\n  top: -6px;\n}\n\n@keyframes slideIn {\n  0% {\n    top: 0;\n    opacity: 0;\n    pointer-events: none;\n  }\n  100% {\n    top: 0;\n    opacity: 1;\n    pointer-events: all;\n  }\n}\n.menu-container {\n  display: flex;\n  align-items: center;\n  height: fit-content;\n}\n\n.value-date-menu {\n  width: unset !important;\n}\n\n.menu {\n  display: block;\n  position: absolute;\n  top: 20px;\n  right: 0;\n  z-index: 2;\n  background: #fff;\n  box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.25);\n  border-radius: 8px;\n  padding: 8px;\n  width: 220px;\n  min-height: 120px;\n  max-height: 320px;\n  overflow-y: scroll;\n}\n.menu .input-container {\n  background: #edf2f7;\n  border-radius: 4px;\n  display: flex;\n  flex-flow: row nowrap;\n  align-items: center;\n  justify-content: flex-start;\n  height: 32px;\n  margin-bottom: 4px;\n  padding: 0 4px;\n}\n.menu .input-container:hover {\n  box-shadow: 0 0 0 3px rgba(40, 151, 255, 0.2);\n}\n.menu .input-container:focus-within {\n  box-shadow: 0 0 0 3px rgba(40, 151, 255, 0.2), 0 0 0 1px rgb(40, 151, 255);\n}\n.menu .input-container input {\n  background: transparent;\n  border: none;\n  flex-grow: 1;\n  height: 100%;\n}\n.menu .input-container input:focus {\n  background: transparent;\n  border: none;\n  outline: none;\n}\n\n.menu-trigger:focus .menu {\n  display: block;\n}\n\n.menu-container .item {\n  height: 22px;\n  width: 100%;\n  background: transparent;\n  border-radius: 4px;\n  font-size: 14px;\n  color: #274768;\n  display: flex;\n  flex-flow: row nowrap;\n  align-items: center;\n  justify-content: flex-start;\n  box-shadow: none;\n  border: none;\n  white-space: nowrap;\n  overflow-x: hidden;\n  text-overflow: ellipsis;\n}\n\n.menu-container .item:hover {\n  background: #f5f9fd;\n  font-weight: 500;\n  border-radius: 4px;\n}\n\nspan {\n  position: relative;\n  z-index: 1;\n}\n\nspan.date {\n  margin-right: 1px;\n}\n\nspan.time {\n  margin-left: 1px;\n}\n\nspan.measure {\n  display: inline-block;\n  margin-right: 1px;\n}\n\nspan.unit {\n  margin-left: 1px;\n  display: inline-block;\n}\n\nspan[data-content]:hover::after {\n  position: absolute;\n  content: attr(data-content);\n  background: #274768;\n  color: #ffffff;\n  font-size: 9px;\n  line-height: 12px;\n  top: -12px;\n  left: 0px;\n  padding: 0px 2px;\n}\n\nspan[data-content]::before {\n  position: absolute;\n  content: \"\";\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  z-index: -1;\n  opacity: 0.3;\n}\n\n.masked {\n  display: none;\n}\n\n.companion {\n  position: absolute;\n  width: 15px;\n  background-color: hsl(194, 100%, 50%);\n  color: white;\n  z-index: 20;\n  padding: 0;\n  text-align: center;\n  font-size: 14px;\n  font-weight: 500;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  border-radius: 0 2px 2px 0;\n}\n\n.companion:hover {\n  font-weight: 700;\n  background: hsl(202, 100%, 50%);\n}\n\n*::selection {\n  background-color: hsla(194, 100%, 50%, 0.2);\n}\n\n.suggestion-palette {\n  position: absolute;\n  z-index: 20;\n  max-width: 380px;\n  font-size: 11px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  padding: 4px;\n  border: none;\n  border-radius: 8px;\n  background: white;\n  box-shadow: 0 1.1px 1.1px rgba(0, 0, 0, 0.022), 0 2.7px 2.7px rgba(0, 0, 0, 0.032), 0 5px 5px rgba(0, 0, 0, 0.04), 0 8.9px 8.9px rgba(0, 0, 0, 0.048), 0 16.7px 16.7px rgba(0, 0, 0, 0.058), 0 40px 40px rgba(0, 0, 0, 0.08);\n}\n\n.suggestion-palette ul {\n  white-space: nowrap;\n  list-style-type: none;\n  margin: 0;\n  padding: 0;\n}\n\n.suggestion-palette ul li {\n  padding: 0 8px;\n  font-size: 11px;\n  height: 20px;\n  box-sizing: border-box;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  border-radius: 4px;\n  color: rgb(39, 71, 104);\n}\n.suggestion-palette ul li svg {\n  height: 12px;\n  width: 12px;\n  border-radius: 4px;\n  transform-origin: center center;\n}\n.suggestion-palette ul li svg path {\n  fill: rgb(128, 154, 180);\n}\n\n.suggestion-palette ul li:not(:first-child) svg.tab-icn,\n.suggestion-palette ul li:not(.focused) svg.return-icn,\n.suggestion-palette ul.focused li:first-child svg.tab-icn {\n  height: 0;\n  width: 0;\n  transform: scale(0);\n  opacity: 0;\n}\n\n.suggestion-palette ul li.focused {\n  background-color: rgb(237, 242, 247);\n}\n\n.suggestion-palette ul li.focused svg.return-icn {\n  animation: growIn 0.24s ease-in forwards;\n}\n\n@keyframes growIn {\n  0% {\n    transform: scale(0.5);\n  }\n  90% {\n    transform: scale(1.1);\n  }\n  100% {\n    transform: scale(1);\n  }\n}\nspan.code-count-1::after,\nspan.code-count-1::before {\n  background: var(--bg-code-color-1);\n  color: var(--text-code-color-1);\n}\n\nspan.code-count-2::after,\nspan.code-count-2::before {\n  background: var(--bg-code-color-1);\n  color: var(--text-code-color-1);\n  /* STRIPES */\n  /*background: repeating-linear-gradient(*/\n  /*\t45deg,*/\n  /*\tvar(--bg-code-color-1),*/\n  /*\tvar(--bg-code-color-1) 10px,*/\n  /*\tvar(--bg-code-color-2) 10px,*/\n  /*\tvar(--bg-code-color-2) 20px*/\n  /*);*/\n  /* PAS STRIPES */\n  background: linear-gradient(90deg, var(--bg-code-color-1) 0%, var(--bg-code-color-2) 100%);\n}\n\nspan.code-count-3::after,\nspan.code-count-3::before {\n  background: var(--bg-code-color-1);\n  color: var(--text-code-color-1);\n  /* STRIPES */\n  background: repeating-linear-gradient(45deg, var(--bg-code-color-1), var(--bg-code-color-1) 10px, var(--bg-code-color-2) 10px, var(--bg-code-color-2) 20px);\n  /* PAS STRIPES */\n  /* background: linear-gradient(90deg, var(--bg-code-color-1) 0%, var(--bg-code-color-2) 100%);*/\n}\n\n.selected-option {\n  padding: 2px;\n  margin-right: 5px;\n}\n\n.options {\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  position: absolute;\n  top: 30px;\n  left: 0;\n  z-index: 2;\n  background: #fff;\n  box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.25);\n  width: auto;\n  min-width: 100%;\n  overflow-y: auto;\n  max-height: 280px;\n}\n\n.date-picker {\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  position: absolute;\n  top: 30px;\n  right: 0;\n  z-index: 2;\n  background: #fff;\n  box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.25);\n  width: 260px;\n  overflow-y: auto;\n  max-height: 280px;\n  left: 0px;\n}\n\napp-date-picker {\n  --app-primary: #084B83;\n  --app-hover: #5b7da2;\n  --app-selected-hover: #5b7da2;\n}\n\n.option {\n  height: 28px;\n  min-height: 28px;\n  width: 100%;\n  background: transparent;\n  border-radius: 4px;\n  font-size: 14px;\n  color: #545454;\n  display: flex;\n  flex-flow: row nowrap;\n  align-items: center;\n  justify-content: flex-start;\n  box-shadow: none;\n  border: none;\n  white-space: nowrap;\n  overflow-x: hidden;\n  text-overflow: ellipsis;\n  padding: 4px 8px;\n  -webkit-user-select: none; /* Safari */\n  -ms-user-select: none; /* IE 10 and IE 11 */\n  user-select: none; /* Standard syntax */\n}\n\n.option:hover {\n  color: #656565;\n  background-color: #ededed;\n}\n\n.select-arrow {\n  border: none;\n  background: 0px 0px;\n  position: relative;\n  top: 0px;\n  opacity: 0.5;\n  cursor: pointer;\n  height: 20px;\n  width: 10px;\n  margin-left: 4px;\n  margin-right: 4px;\n  padding: 0px;\n}\n\n.hidden {\n  display: none;\n}\n\n.container {\n  position: relative;\n}\n\n.icure-form {\n  background-color: rgba(0, 0, 0, 0);\n  display: grid;\n  gap: 0 6px;\n  grid-template-columns: repeat(24, 1fr);\n}\n\n.group {\n  align-items: end;\n  display: grid;\n}\n\n.subform {\n  align-items: end;\n  display: grid;\n  position: relative;\n  margin: 8px -8px 8px;\n  padding: 0 8px 0;\n  min-height: 64px;\n  background-color: #e7f0fd;\n}\n\n.icure-form hr {\n  display: block;\n  margin-top: 20px;\n  border-top: 1px solid rgba(8, 75, 131, 0.13);\n  margin-bottom: 20px;\n}\n.icure-form h2 {\n  font-size: 14.4px;\n  font-weight: 700;\n  color: #084B83;\n  padding: 2px;\n}\n.icure-form h3 {\n  font-size: 13.2px;\n  font-weight: 500;\n  color: #084B83;\n  padding: 6px;\n}\n.icure-form .group.bordered {\n  background: #f6f6f6;\n  border-radius: 12px;\n}\n.icure-form .float-right-btn {\n  position: absolute;\n  right: 10px;\n  cursor: pointer;\n}\n.icure-form .float-right-btn.top {\n  top: 6px;\n}\n.icure-form .float-right-btn.bottom {\n  bottom: -8px;\n}\n\n.icure-form-field {\n  align-items: end;\n  display: grid;\n}\n\n.error {\n  color: red;\n  font-size: 12px;\n}\n\n.icure-text-field > .icure-label, .icure-button-group > .icure-label {\n  z-index: 1;\n  pointer-events: none;\n  line-height: 1.4em;\n  cursor: text;\n  font-size: 12px;\n  left: 9px;\n  color: #084B83;\n  align-items: center;\n  height: 28px;\n  max-width: 85%;\n  min-width: 0;\n}\n.icure-text-field > .icure-label.float, .icure-button-group > .icure-label.float {\n  display: inline-block;\n  height: 1.4em;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  overflow: hidden;\n}\n\n.icure-text-field {\n  position: relative;\n  width: 100%;\n  flex-direction: row;\n  justify-content: stretch;\n  align-items: center;\n}\n.icure-text-field > .icure-label {\n  transition: transform 0.2s ease-out, color 0.2s ease-out;\n}\n.icure-text-field > .icure-input {\n  flex: 1 1 auto;\n  width: auto;\n}\n.icure-text-field > .icure-label.side {\n  position: relative;\n}\n.icure-text-field > .icure-label.side.left {\n  order: -1;\n  margin-right: 1em;\n}\n.icure-text-field > .icure-label.side.right {\n  order: 1;\n  margin-left: 1em;\n}\n.icure-text-field .icure-input,\n.icure-text-field .input-container {\n  border-radius: 2px;\n  padding: 0 8px;\n  width: 100%;\n  box-sizing: border-box;\n  border-width: 1px;\n  border-style: solid;\n  outline: 0;\n  font: inherit;\n  font-size: 14px;\n  line-height: 1.4em;\n  display: flex;\n  align-items: center;\n  vertical-align: middle;\n  position: relative;\n  -webkit-appearance: none;\n  background-color: #ffffff;\n  border-color: red;\n  color: #000000;\n  box-sizing: border-box;\n}\n.icure-text-field .icure-input:focus, .icure-text-field .icure-input:focus-within,\n.icure-text-field .input-container:focus,\n.icure-text-field .input-container:focus-within {\n  box-shadow: 0 2px 2px 1px rgba(0, 0, 0, 0.06);\n}\n.icure-text-field .icure-input:hover,\n.icure-text-field .input-container:hover {\n  border-color: rgba(0, 0, 0, 0.15);\n  box-shadow: none;\n}\n.icure-text-field .icure-input:hover:focus, .icure-text-field .icure-input:hover:focus-within,\n.icure-text-field .input-container:hover:focus,\n.icure-text-field .input-container:hover:focus-within {\n  box-shadow: 0 2px 2px 1px rgba(0, 0, 0, 0.06);\n}\n.icure-text-field .icure-input .ProseMirror,\n.icure-text-field .input-container .ProseMirror {\n  padding: 0;\n  font-size: 14px;\n  line-height: 1.4em;\n  color: #000000;\n}\n.icure-text-field .icure-input .ProseMirror .date,\n.icure-text-field .input-container .ProseMirror .date {\n  padding: 1px;\n}\n.icure-text-field .icure-input .ProseMirror .time,\n.icure-text-field .input-container .ProseMirror .time {\n  padding: 1px;\n}\n.icure-text-field .icure-input .ProseMirror:focus .focused,\n.icure-text-field .input-container .ProseMirror:focus .focused {\n  background-color: rgba(0, 0, 0, 0.05);\n  border-radius: 3px;\n  border-color: rgba(0, 0, 0, 0.1);\n}\n.icure-text-field .icure-input > svg,\n.icure-text-field .input-container > svg {\n  opacity: 0.5;\n}\n.icure-text-field .icure-input > svg path,\n.icure-text-field .input-container > svg path {\n  fill: #656565;\n}\n.icure-text-field .icure-input .extra,\n.icure-text-field .input-container .extra {\n  height: 20px;\n}\n.icure-text-field .icure-input .extra > .info,\n.icure-text-field .input-container .extra > .info {\n  color: #656565;\n  opacity: 0.5;\n}\n.icure-text-field .icure-input .extra .buttons-container .btn svg path,\n.icure-text-field .input-container .extra .buttons-container .btn svg path {\n  fill: #656565;\n  opacity: 0.5;\n}\n.icure-text-field .icure-input .extra .buttons-container .btn svg path:hover,\n.icure-text-field .input-container .extra .buttons-container .btn svg path:hover {\n  fill: #656565;\n  opacity: 1;\n}\n\ninput[type=radio] {\n  margin-top: -1px;\n  vertical-align: middle;\n}\n\n.icure-checkbox:checked {\n  accent-color: #06a070;\n}\n\n.icure-button-group > div {\n  display: grid;\n}\n.icure-button-group > div > div {\n  display: flex;\n  align-items: center;\n}\n.icure-button-group > div > div > .icure-button-group-label {\n  z-index: 1;\n  line-height: 1.4em;\n  cursor: text;\n  font-size: 12px;\n  top: calc(1.4em + 1px);\n  left: 9px;\n  transition: transform 0.2s ease-out, color 0.2s ease-out;\n  color: #084B83;\n  display: flex;\n  align-items: center;\n  height: 28px;\n  max-width: 85%;\n  min-width: 0;\n}\n.icure-button-group > div > div > .icure-button-group-label > span {\n  display: block;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  overflow: hidden;\n  padding-right: 8px;\n}\n.icure-button-group > .icure-input {\n  flex: 1 1 auto;\n  width: auto;\n}\n.icure-button-group > .icure-label {\n  transform: translate(0, 0) scale(1);\n}\n.icure-button-group > .icure-label.above, .icure-button-group.has-content > .icure-label, .icure-button-group:focus > .icure-label, .icure-button-group:focus-within > .icure-label {\n  font-weight: 500;\n  height: 1.4em;\n}` \n\nexport class IcureLabel extends LitElement {\n\t@property() label?: string\n\t@property() labelPosition?: string\n\t@property() visible = true\n\n\tstatic get styles() {\n\t\treturn [baseCss]\n\t}\n\n\trender() {\n\t\tif (!this.visible) {\n\t\t\treturn html``\n\t\t}\n\t\treturn html`${generateLabel(this.label ?? '', this.labelPosition ?? 'float', 'en')}`\n\t}\n}\n"]}

package/components/icure-text-field/index.d.ts

@@ -22,16 +22,6 @@ export declare class IcureTextField extends Field {
         code: string;
     }[]) => string;
     schema: IcureTextFieldSchema;
-    protected displayOwnersMenu: boolean;
-    protected ownerInputValue: string;
-    protected availableOwners: Suggestion[];
-    protected loadedOwners: {
-        [id: string]: Suggestion;
-    };
-    protected displayLanguagesMenu: boolean;
-    protected languageInputValue: string;
-    protected displayVersionsMenu: boolean;
-    protected availableLanguages: (string | undefined)[];
     private proseMirrorSchema?;
     private parser?;
     private serializer;
@@ -39,6 +29,7 @@ export declare class IcureTextField extends Field {
     private primitiveTypesExtractor;
     private codesExtractor;
     private view?;
+    selectedLanguage?: string;
     private container?;
     private readonly windowListeners;
     private suggestionPalette?;
@@ -52,10 +43,6 @@ export declare class IcureTextField extends Field {
     private isMultivalued;
     private updateValue;
     render(): import("lit-html").TemplateResult<1>;
-    toggleOwnerMenu(ownerId?: string): void;
-    searchOwner(e: InputEvent): void;
-    handleOwnerButtonClicked(id: string): void;
-    toggleLanguageMenu(): void;
     mouseDown(): void;
     mouseUp(): void;
     firstUpdated(): void;

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

@@ -338,7 +338,6 @@ h3 {
 
 .extra {
   flex-shrink: 0;
-  height: 28px;
   display: flex;
   flex-flow: row nowrap;
   align-items: center;
@@ -361,6 +360,7 @@ h3 {
 }
 
 .extra .buttons-container {
+  position: relative;
   display: flex;
   height: 100%;
   flex-flow: row nowrap;
@@ -373,14 +373,7 @@ h3 {
 .extra:hover .buttons-container .menu-container .btn {
   animation: slideIn 0.24s ease-in forwards;
   pointer-events: none;
-}
-
-.extra:hover .buttons-container .menu-container .btn {
-  animation-delay: 0.24s;
-}
-
-.extra:hover .buttons-container .menu-container:hover .btn {
-  animation-delay: 0.04s;
+  display: unset !important;
 }
 
 .extra.forced:hover .buttons-container .menu-container .btn {
@@ -390,13 +383,15 @@ h3 {
 
 .extra.forced .buttons-container .btn {
   opacity: 1 !important;
+  display: unset !important;
 }
 
-.extra.forced .info {
-  opacity: 0 !important;
+.extra .buttons-container .btn.forced {
+  opacity: 1 !important;
+  display: unset !important;
 }
 
-.extra:hover .info {
+.extra.forced .info, .extra .info.hidden {
   opacity: 0 !important;
   z-index: 0 !important;
 }
@@ -406,6 +401,7 @@ h3 {
   background: transparent;
   position: relative;
   top: 0;
+  display: none;
   opacity: 0;
   cursor: pointer;
   height: 20px;
@@ -423,6 +419,10 @@ h3 {
   fill: #809ab4;
 }
 
+.extra .buttons-container .btn.forced svg path {
+  fill: crimson !important;
+}
+
 .extra .buttons-container .btn:hover svg path {
   fill: #274768;
 }
@@ -465,7 +465,8 @@ h3 {
 
 @keyframes slideIn {
   0% {
-    top: 12px;
+    top: 0;
+    opacity: 0;
     pointer-events: none;
   }
   100% {
@@ -475,10 +476,13 @@ h3 {
   }
 }
 .menu-container {
-  position: relative;
   display: flex;
   align-items: center;
-  height: 100%;
+  height: fit-content;
+}
+
+.value-date-menu {
+  width: unset !important;
 }
 
 .menu {
@@ -496,7 +500,6 @@ h3 {
   max-height: 320px;
   overflow-y: scroll;
 }
-
 .menu .input-container {
   background: #edf2f7;
   border-radius: 4px;
@@ -508,22 +511,18 @@ h3 {
   margin-bottom: 4px;
   padding: 0 4px;
 }
-
 .menu .input-container:hover {
   box-shadow: 0 0 0 3px rgba(40, 151, 255, 0.2);
 }
-
 .menu .input-container:focus-within {
   box-shadow: 0 0 0 3px rgba(40, 151, 255, 0.2), 0 0 0 1px rgb(40, 151, 255);
 }
-
 .menu .input-container input {
   background: transparent;
   border: none;
   flex-grow: 1;
   height: 100%;
 }
-
 .menu .input-container input:focus {
   background: transparent;
   border: none;
@@ -944,7 +943,7 @@ app-date-picker {
 .icure-text-field .icure-input,
 .icure-text-field .input-container {
   border-radius: 2px;
-  padding: 4px 8px;
+  padding: 0 8px;
   width: 100%;
   box-sizing: border-box;
   border-width: 1px;
@@ -1048,7 +1047,7 @@ input[type=radio] {
   line-height: 1.4em;
   cursor: text;
   font-size: 12px;
-  top: calc(1.4em + 5px);
+  top: calc(1.4em + 1px);
   left: 9px;
   transition: transform 0.2s ease-out, color 0.2s ease-out;
   color: #084B83;
@@ -1080,8 +1079,6 @@ const utils_2 = require("../icure-form/fields/utils");
 const markdown_1 = require("../../utils/markdown");
 const measure_schema_1 = require("./schema/measure-schema");
 const dates_1 = require("../../utils/dates");
-const paths_1 = require("../common/styles/paths");
-const languages_1 = require("../../utils/languages");
 // Extend the LitElement base class
 class IcureTextField extends common_1.Field {
     constructor() {
@@ -1100,14 +1097,6 @@ class IcureTextField extends common_1.Field {
         this.linkColorProvider = () => 'cat1';
         this.codeContentProvider = (codes) => codes.map((c) => c.code).join(',');
         this.schema = 'styled-text-with-codes';
-        this.displayOwnersMenu = false;
-        this.ownerInputValue = '';
-        this.availableOwners = [];
-        this.loadedOwners = {};
-        this.displayLanguagesMenu = false;
-        this.languageInputValue = '';
-        this.displayVersionsMenu = false;
-        this.availableLanguages = [this.defaultLanguage];
         this.serializer = {
             serialize: (content) => content.textBetween(0, content.nodeSize - 2, ' '),
         };
@@ -1120,9 +1109,6 @@ class IcureTextField extends common_1.Field {
     }
     _handleClickOutside(event) {
         if (!event.composedPath().includes(this)) {
-            this.displayVersionsMenu = false;
-            this.displayLanguagesMenu = false;
-            this.displayOwnersMenu = false;
             event.stopPropagation();
         }
     }
@@ -1200,7 +1186,7 @@ class IcureTextField extends common_1.Field {
         }
     }
     render() {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u;
         let metadata;
         let rev;
         let revDate;
@@ -1222,12 +1208,6 @@ class IcureTextField extends common_1.Field {
                     id && rev !== undefined
                         ? (_r = (_q = (_p = (_o = this.metadataProvider) === null || _o === void 0 ? void 0 : _o.call(this, id, versions === null || versions === void 0 ? void 0 : versions.map((v) => v.revision))) === null || _p === void 0 ? void 0 : _p[id]) === null || _q === void 0 ? void 0 : _q.find((m) => m.revision === rev)) === null || _r === void 0 ? void 0 : _r.value
                         : undefined;
-                const owner = metadata === null || metadata === void 0 ? void 0 : metadata.owner;
-                if (owner && !this.loadedOwners[owner] && this.displayMetadata) {
-                    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)));
-                }
             }
             if (parsedDoc) {
                 const selection = this.view.state.selection;
@@ -1259,95 +1239,25 @@ class IcureTextField extends common_1.Field {
 				${this.displayedLabels ? (0, utils_1.generateLabels)(this.displayedLabels, this.language(), this.translate ? this.translationProvider : undefined) : lit_1.nothing}
 				<div class="icure-input">
 					<div id="editor" class="${this.schema}" style="min-height: calc( ${this.lines}rem + 5px )"></div>
-					${this.displayMetadata
-            ? (0, lit_1.html) ` <div id="extra" class=${'extra' + (this.displayOwnersMenu ? ' forced' : '')}>
-								<div class="info">•</div>
-								<div class="buttons-container">
-									<div class="menu-container">
-										<button
-											data-content="${(_t = ((metadata === null || metadata === void 0 ? void 0 : metadata.owner) ? (_s = this.loadedOwners[metadata === null || metadata === void 0 ? void 0 : metadata.owner]) === null || _s === void 0 ? void 0 : _s.text : '')) !== null && _t !== void 0 ? _t : ''}"
-											@click="${() => this.toggleOwnerMenu(metadata === null || metadata === void 0 ? void 0 : metadata.owner)}"
-											class="btn menu-trigger author"
-										>
-											${paths_1.ownerPicto}
-										</button>
-										${this.displayOwnersMenu
-                ? (0, lit_1.html) `
-													<div id="menu" class="menu">
-														<div class="input-container">${paths_1.searchPicto} <input id="ownerSearch" @input="${this.searchOwner}" /></div>
-														${(_v = (((_u = this.availableOwners) === null || _u === void 0 ? void 0 : _u.length) ? this.availableOwners : Object.values(this.loadedOwners))) === null || _v === void 0 ? void 0 : _v.map((x) => (0, 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="${(metadata === null || metadata === void 0 ? void 0 : metadata.valueDate) ? (0, date_fns_1.format)((0, dates_1.anyDateToDate)(metadata.valueDate), 'yyyy-MM-dd HH:mm:ss') : ''}" class="btn date">${paths_1.datePicto}</button>
-									</div>
-									<div class="menu-container">
-										<button
-											data-content="${rev === null ? 'latest' : rev ? `${rev.split('-')[0]} ${revDate ? `(${(0, date_fns_1.format)(new Date(revDate), 'yyyy-MM-dd')})` : ''}` : ''}"
-											class="btn version"
-										>
-											${paths_1.versionPicto}
-										</button>
-									</div>
-									<div class="menu-container">
-										<button data-content="${this.displayedLanguage}" @click="${this.toggleLanguageMenu}" class="btn menu-trigger language">${paths_1.i18nPicto}</button>
-										${this.displayLanguagesMenu
-                ? (0, lit_1.html) `
-													<div id="menu" class="menu">
-														<div class="input-container">${paths_1.searchPicto} <input /></div>
-														${(_w = this.availableLanguages) === null || _w === void 0 ? void 0 : _w.map((x) => (0, lit_1.html) `<button id="${x}" class="item">${x ? (0, languages_1.languageName)(x) : ''}</button>`)}
-													</div>
-											  `
-                : ''}
-									</div>
-								</div>
-						  </div>`
+					${this.displayMetadata && metadata
+            ? (0, lit_1.html) `<icure-metadata-buttons-bar
+								.metadata="${metadata}"
+								.revision="${rev}"
+								.revisionDate="${revDate}"
+								.valueId="${(_t = (0, utils_2.extractSingleValue)((_s = this.valueProvider) === null || _s === void 0 ? void 0 : _s.call(this))) === null || _t === void 0 ? void 0 : _t[0]}"
+								.defaultLanguage="${this.defaultLanguage}"
+								.selectedLanguage="${this.selectedLanguage}"
+								.languages="${this.languages}"
+								.handleMetadataChanged="${this.handleMetadataChanged}"
+								.handleLanguageSelected="${(iso) => (this.selectedLanguage = iso)}"
+								.ownersProvider="${this.ownersProvider}"
+						  />`
             : ''}
 				</div>
-				<div class="error">${(_x = this.validationErrorsProvider) === null || _x === void 0 ? void 0 : _x.call(this).map(([, error]) => { var _a; return (0, lit_1.html) `<div>${(_a = this.translationProvider) === null || _a === void 0 ? void 0 : _a.call(this, this.language(), error)}</div>`; })}</div>
+				<div class="error">${(_u = this.validationErrorsProvider) === null || _u === void 0 ? void 0 : _u.call(this).map(([, error]) => { var _a; return (0, lit_1.html) `<div>${(_a = this.translationProvider) === null || _a === void 0 ? void 0 : _a.call(this, this.language(), error)}</div>`; })}</div>
 			</div>
 		`;
     }
-    toggleOwnerMenu(ownerId) {
-        this.displayOwnersMenu = !this.displayOwnersMenu;
-        if (this.displayOwnersMenu) {
-            this.displayLanguagesMenu = false;
-            this.displayVersionsMenu = false;
-            setTimeout(() => {
-                var _a;
-                ;
-                (_a = this.renderRoot.querySelector('#ownerSearch')) === null || _a === void 0 ? void 0 : _a.focus();
-            }, 0);
-        }
-    }
-    searchOwner(e) {
-        const text = e.target.value;
-        setTimeout(() => __awaiter(this, void 0, void 0, function* () {
-            var _a;
-            if (((_a = this.renderRoot.querySelector('#ownerSearch')) === null || _a === void 0 ? void 0 : _a.value) === text) {
-                if (this.ownersProvider) {
-                    const availableOwners = yield this.ownersProvider(text.split(' '));
-                    console.log(availableOwners);
-                    this.availableOwners = availableOwners;
-                }
-            }
-        }), 300);
-    }
-    handleOwnerButtonClicked(id) {
-        var _a;
-        const [valueId] = (0, utils_2.extractSingleValue)((_a = this.valueProvider) === null || _a === void 0 ? void 0 : _a.call(this));
-        this.handleMetadataChanged && valueId && this.handleMetadataChanged(valueId, { label: this.label, owner: id });
-        this.displayOwnersMenu = false;
-    }
-    toggleLanguageMenu() {
-        this.displayLanguagesMenu = !this.displayLanguagesMenu;
-        if (this.displayLanguagesMenu) {
-            this.displayOwnersMenu = false;
-            this.displayVersionsMenu = false;
-        }
-    }
     mouseDown() {
         this.mouseCount++;
     }
@@ -1636,13 +1546,13 @@ class IcureTextField extends common_1.Field {
             ? (doc) => {
                 var _a, _b, _c, _d;
                 const unit = ((_a = doc === null || doc === void 0 ? void 0 : doc.childCount) !== null && _a !== void 0 ? _a : 0) > 1 ? (_b = doc === null || doc === void 0 ? void 0 : doc.child(1)) === null || _b === void 0 ? void 0 : _b.textContent : undefined;
-                return unit ? [{ id: `CD-UNIT|${unit}|1`, label: { [(_d = (_c = this.displayedLanguage) !== null && _c !== void 0 ? _c : this.defaultLanguage) !== null && _d !== void 0 ? _d : 'en']: unit } }] : [];
+                return unit ? [{ id: `CD-UNIT|${unit}|1`, label: { [(_d = (_c = this.selectedLanguage) !== null && _c !== void 0 ? _c : this.defaultLanguage) !== null && _d !== void 0 ? _d : 'en']: unit } }] : [];
             }
             : schemaName === 'measure'
                 ? (doc) => {
                     var _a, _b, _c;
                     const unit = (_a = doc === null || doc === void 0 ? void 0 : doc.child(1)) === null || _a === void 0 ? void 0 : _a.textContent;
-                    return unit ? [{ id: `CD-UNIT|${unit}|1`, label: { [(_c = (_b = this.displayedLanguage) !== null && _b !== void 0 ? _b : this.defaultLanguage) !== null && _c !== void 0 ? _c : 'en']: unit } }] : [];
+                    return unit ? [{ id: `CD-UNIT|${unit}|1`, label: { [(_c = (_b = this.selectedLanguage) !== null && _b !== void 0 ? _b : this.defaultLanguage) !== null && _c !== void 0 ? _c : 'en']: unit } }] : [];
                 }
                 : () => [];
     }
@@ -1766,41 +1676,13 @@ __decorate([
     (0, decorators_js_1.property)(),
     __metadata("design:type", String)
 ], IcureTextField.prototype, "schema", void 0);
-__decorate([
-    (0, decorators_js_1.state)(),
-    __metadata("design:type", Object)
-], IcureTextField.prototype, "displayOwnersMenu", void 0);
-__decorate([
-    (0, decorators_js_1.state)(),
-    __metadata("design:type", Object)
-], IcureTextField.prototype, "ownerInputValue", void 0);
-__decorate([
-    (0, decorators_js_1.state)(),
-    __metadata("design:type", Array)
-], IcureTextField.prototype, "availableOwners", void 0);
-__decorate([
-    (0, decorators_js_1.state)(),
-    __metadata("design:type", Object)
-], IcureTextField.prototype, "loadedOwners", void 0);
-__decorate([
-    (0, decorators_js_1.state)(),
-    __metadata("design:type", Object)
-], IcureTextField.prototype, "displayLanguagesMenu", void 0);
-__decorate([
-    (0, decorators_js_1.state)(),
-    __metadata("design:type", Object)
-], IcureTextField.prototype, "languageInputValue", void 0);
-__decorate([
-    (0, decorators_js_1.state)(),
-    __metadata("design:type", Object)
-], IcureTextField.prototype, "displayVersionsMenu", void 0);
-__decorate([
-    (0, decorators_js_1.state)(),
-    __metadata("design:type", Object)
-], IcureTextField.prototype, "availableLanguages", void 0);
 __decorate([
     (0, decorators_js_1.state)(),
     __metadata("design:type", prosemirror_view_1.EditorView)
 ], IcureTextField.prototype, "view", void 0);
+__decorate([
+    (0, decorators_js_1.state)(),
+    __metadata("design:type", String)
+], IcureTextField.prototype, "selectedLanguage", void 0);
 // Register the new element with the browser.
 //# sourceMappingURL=index.js.map