@icure/form 1.1.0 → 1.1.10

package/lib/components/iqr-radio-button-group/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../tmp/components/iqr-radio-button-group/index.ts"],"names":[],"mappings":"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","sourcesContent":["import { CSSResultGroup, html, TemplateResult } from 'lit'\nimport { property, state } 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  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, .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, .editor {\n  color: black;\n  background-clip: padding-box;\n  border-radius: 4px;\n  border: 2px solid rgba(0, 0, 0, 0.2);\n  padding: 5px 0;\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.iqr-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}\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, .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, .suggestion-palette ul li:not(.focused) svg.return-icn, .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, span.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, span.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, span.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// @ts-ignore\nconst kendoCss = css`input[type=radio] {\n  margin-top: -1px;\n  vertical-align: middle;\n}\n\n.iqr-checkbox:checked {\n  accent-color: #06a070;\n}\n\n.iqr-text-field {\n  position: relative;\n  padding-top: 1.4em;\n  display: flex;\n  flex-wrap: wrap;\n  justify-content: stretch;\n}\n.iqr-text-field > .iqr-label {\n  z-index: 1;\n  pointer-events: none;\n  position: absolute;\n  line-height: 1.4em;\n  cursor: text;\n  font-size: 14px;\n  top: calc( 1.4em + 5px );\n  left: 9px;\n  transition: transform 0.2s ease-out, color 0.2s ease-out;\n  color: #656565;\n  display: flex;\n  align-items: center;\n  height: 28px;\n  max-width: 55%;\n  min-width: 0;\n}\n.iqr-text-field > .iqr-label > span {\n  display: block;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  overflow: hidden;\n  padding-right: 8px;\n}\n.iqr-text-field > div {\n  display: flex;\n  align-items: center;\n}\n.iqr-text-field > div > .iqr-radio-button-label {\n  z-index: 1;\n  pointer-events: none;\n  line-height: 1.4em;\n  cursor: text;\n  font-size: 14px;\n  top: calc( 1.4em + 5px );\n  left: 9px;\n  transition: transform 0.2s ease-out, color 0.2s ease-out;\n  color: #656565;\n  display: flex;\n  align-items: center;\n  height: 28px;\n  max-width: 100%;\n  min-width: 0;\n}\n.iqr-text-field > div > .iqr-radio-button-label > span {\n  display: block;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  overflow: hidden;\n  padding-right: 8px;\n}\n.iqr-text-field > .iqr-input {\n  flex: 1 1 auto;\n  width: auto;\n}\n.iqr-text-field > .iqr-label {\n  transform: translate(0, 0) scale(1);\n}\n.iqr-text-field > .iqr-label.above, .iqr-text-field.has-content > .iqr-label, .iqr-text-field:focus > .iqr-label, .iqr-text-field:focus-within > .iqr-label {\n  transform: translate(-8px, -4px) translate(-1px, -1.4em) translate(0%, 0%) scale(1);\n  font-weight: 500;\n  height: 1.4em;\n  max-width: 100%;\n}` \nimport { VersionedValue } from '../iqr-text-field'\nimport { CodeStub, Content } from '@icure/api'\nimport { generateLabel } from '../iqr-label/utils'\nimport { OptionsField } from '../common/optionsField'\n\nclass IqrRadioButtonGroup extends OptionsField<string, VersionedValue> {\n\t@property() type: 'radio' | 'checkbox' = 'radio'\n\t@state() protected inputValues: string[] = []\n\n\t//override\n\tstatic get styles(): CSSResultGroup[] {\n\t\treturn [baseCss, kendoCss]\n\t}\n\n\tprivate VALUES_SEPARATOR = '|'\n\tpublic checkboxChange() {\n\t\tif (this.handleValueChanged) {\n\t\t\tconst inputs = Array.from(this.shadowRoot?.querySelectorAll('input') || []).filter((input) => input.checked)\n\t\t\tconst value = inputs.map((i) => Array.from(i.labels || []).map((label) => label.textContent)).join(this.VALUES_SEPARATOR)\n\t\t\tthis.handleValueChanged?.(\n\t\t\t\tthis.displayedLanguage || this.defaultLanguage || 'en',\n\t\t\t\t{\n\t\t\t\t\tasString: value,\n\t\t\t\t\tcontent: new Content({\n\t\t\t\t\t\tstringValue: value,\n\t\t\t\t\t}),\n\t\t\t\t},\n\t\t\t\tundefined,\n\t\t\t\t[\n\t\t\t\t\t...(this.options || [])\n\t\t\t\t\t\t.filter((option) => inputs.find((i) => i.id === option.id))\n\t\t\t\t\t\t.map((option) =>\n\t\t\t\t\t\t\t!(option instanceof CodeStub) ? new CodeStub({ id: 'CUSTOM_OPTION|' + option.id + '|1', type: 'CUSTOM_OPTION', code: option.id, version: '1' }) : option,\n\t\t\t\t\t\t),\n\t\t\t\t],\n\t\t\t)\n\t\t}\n\t}\n\trender(): TemplateResult {\n\t\treturn html`\n\t\t\t<div class=\"iqr-text-field\">\n\t\t\t\t${generateLabel(this.label ?? '', this.labelPosition ?? 'float', this.translationProvider)}\n\t\t\t\t${this.options?.map((x) => {\n\t\t\t\t\tconst text = !(x instanceof CodeStub) ? this.translateText(x.text) || '' : this.translateText(x?.label?.[this.displayedLanguage || this.defaultLanguage || 'en'] || '')\n\t\t\t\t\treturn html`<div>\n\t\t\t\t\t\t<input\n\t\t\t\t\t\t\tclass=\"iqr-checkbox\"\n\t\t\t\t\t\t\ttype=\"${this.type}\"\n\t\t\t\t\t\t\tid=\"${x.id}\"\n\t\t\t\t\t\t\tname=\"${this.label}\"\n\t\t\t\t\t\t\tvalue=\"${!(x instanceof CodeStub) ? x.id : x.code}\"\n\t\t\t\t\t\t\t.checked=${this.inputValues.includes(text)}\n\t\t\t\t\t\t\t@change=${this.checkboxChange}\n\t\t\t\t\t\t\ttext=\"${text}\"\n\t\t\t\t\t\t/><label class=\"iqr-radio-button-label\" for=\"${x.id}\"><span>${text}</span></label>\n\t\t\t\t\t</div>`\n\t\t\t\t})}\n\t\t\t</div>\n\t\t`\n\t}\n\tpublic firstUpdated(): void {\n\t\tconst providedValue = this.valueProvider && this.valueProvider()\n\t\tconst displayedVersionedValue = providedValue?.versions?.find((version) => version.value)?.value\n\t\tif (displayedVersionedValue && Object.keys(displayedVersionedValue)?.length) {\n\t\t\tthis.inputValues = displayedVersionedValue[Object.keys(displayedVersionedValue)[0]].split(this.VALUES_SEPARATOR)\n\t\t} else if (this.value) this.inputValues = this.value.split(this.VALUES_SEPARATOR)\n\t}\n}\n\ncustomElements.define('iqr-radio-button', IqrRadioButtonGroup)\n"]}

package/{components → lib/components}/iqr-text-field/index.d.ts

@@ -24,3 +24,13 @@ export interface VersionedValue {
     id: string;
     versions: Version[];
 }
+export declare enum LabelPosition {
+    float = "float",
+    sideRight = "sideRight",
+    sideLeft = "sideLeft",
+    above = "above",
+    hidden = "hidden"
+}
+export interface Labels {
+    [position: string]: string;
+}