hoist added as attribute for popup display

medblocks · Apr 20, 2024 · 1601cd8 · 1601cd8
1 parent 654fd4c
commit 1601cd8
Show file tree

Hide file tree

Showing 7 changed files with 20 additions and 7 deletions.
diff --git a/src/medblocks/codedtext/abstractSearch.ts b/src/medblocks/codedtext/abstractSearch.ts
@@ -87,6 +87,8 @@ export default abstract class MbSearchAbstract extends CodedTextElement {
 
   @property({ type: Boolean, reflect: true }) required = false;
 
+  @property({ type: Boolean, reflect: true }) hoist: boolean = true;
+
   @property({ type: Boolean, reflect: true }) fixfilters = false;
 
   @property({ type: Boolean, reflect: true }) disabled: boolean;
@@ -368,7 +370,7 @@ export default abstract class MbSearchAbstract extends CodedTextElement {
     return html`
       <mb-dropdown
         .containingElement=${this}
-        .hoist=${true}
+        .hoist=${this.hoist}
         .open=${true}
         .focusKeys=${['Enter']}
         .typeToSelect=${false}

diff --git a/src/medblocks/codedtext/select.ts b/src/medblocks/codedtext/select.ts
@@ -26,6 +26,8 @@ export default class MbSelect extends CodedTextElement {
 
   @property({ type: Boolean, reflect: true }) required: boolean = false;
 
+  @property({ type: Boolean, reflect: true }) hoist: boolean = true;
+
   @property({ type: Boolean, reflect: true }) disabled: boolean;
 
   @state() _options: MbOption[] = [];
@@ -134,7 +136,7 @@ export default class MbSelect extends CodedTextElement {
           this.data = undefined;
           this._mbInput.emit();
         }}
-        .hoist=${true}
+        .hoist=${this.hoist}
         .value=${this.getValue(this.data)}
       >
         ${this._options.map(

diff --git a/src/medblocks/proportion/MbProportion.ts b/src/medblocks/proportion/MbProportion.ts
@@ -48,6 +48,8 @@ export default abstract class MbProportion extends EhrElement {
 
   @property({ type: Boolean, reflect: true }) required: boolean = false;
 
+  @property({ type: Boolean, reflect: true }) hoist: boolean = true;
+
   @property({ type: String, reflect: true }) step: string;
 
   @property({ type: Boolean, reflect: true }) disabled: boolean;
@@ -125,7 +127,7 @@ export default abstract class MbProportion extends EhrElement {
         style="${this.hideunit ? 'display: none' : ''}"
         placeholder="Select units"
         class="no-icon"
-        .hoist=${true}
+        .hoist=${this.hoist}
         value="unit"
         .size=${this.variant === 'small' ? 'small' : 'medium'}
         disabled

diff --git a/src/medblocks/quantity/QuantityLike.ts b/src/medblocks/quantity/QuantityLike.ts
@@ -78,6 +78,8 @@ export default abstract class QuantityLike extends EhrElement {
   /** Hides the units. Make sure to set a default unit, or set it programatically. */
   @property({ type: Boolean, reflect: true }) hideunit: boolean = false;
 
+  @property({ type: Boolean, reflect: true }) hoist: boolean = true;
+
   @property({ type: Boolean, reflect: true }) disabled: boolean;
 
   @property({ type: Number, reflect: true }) step: number;
@@ -187,7 +189,7 @@ export default abstract class QuantityLike extends EhrElement {
         class="${this._disabled() || this.hideicon ? 'no-icon' : ''}"
         style="${this.hideunit ? 'display: none' : ''}"
         placeholder="Select units"
-        .hoist=${true}
+        .hoist=${this.hoist}
         .value=${this.displayUnit}
         .size=${this.variant === 'small' ? 'small' : 'medium'}
         @sl-change=${this.handleInput}

diff --git a/src/medblocks/quantity/quantity.ts b/src/medblocks/quantity/quantity.ts
@@ -76,6 +76,8 @@ export default class MbQuantity extends QuantityElement {
   /** Hides the units. Make sure to set a default unit, or set it programatically. */
   @property({ type: Boolean, reflect: true }) hideunit: boolean = false;
 
+  @property({ type: Boolean, reflect: true }) hoist: boolean = true;
+
   @property({ type: Boolean, reflect: true }) disabled: boolean;
 
   @property({ type: Number, reflect: true }) step: number;
@@ -185,7 +187,7 @@ export default class MbQuantity extends QuantityElement {
         class="${this._disabled() || this.hideicon ? 'no-icon' : ''}"
         style="${this.hideunit ? 'display: none' : ''}"
         placeholder="Select units"
-        .hoist=${true}
+        .hoist=${this.hoist}
         .value=${this.displayUnit}
         .size=${this.variant === 'small' ? 'small' : 'medium'}
         @sl-change=${this.handleInput}

diff --git a/src/medblocks/text/input-multiple.ts b/src/medblocks/text/input-multiple.ts
@@ -129,7 +129,7 @@ export default class MbInputMultiple extends EhrElement {
                 </sl-icon>`}
       </sl-input>
       <div>
-        ${this.data.map(
+        ${this.data?.map(
           (s, i) =>
             html`<sl-tag
               id=${`${this.id}_tag${i}`}

diff --git a/src/medblocks/text/text-select.ts b/src/medblocks/text/text-select.ts
@@ -23,6 +23,8 @@ export default class MbTextSelect extends EhrElement {
 
   @property({ type: Boolean, reflect: true }) required: boolean = false;
 
+  @property({ type: Boolean, reflect: true }) hoist: boolean = true;
+
   @property({ type: String, reflect: true }) placeholder: string;
 
   @property({ type: String, reflect: true }) id: string = 'text_select';
@@ -69,6 +71,7 @@ export default class MbTextSelect extends EhrElement {
       </div> `;
     }
     return html`
+      ${this.hoist}
       <sl-select
         id=${this.id}
         exportparts="menu"
@@ -84,7 +87,7 @@ export default class MbTextSelect extends EhrElement {
           this.data = undefined;
           this._mbInput.emit();
         }}
-        .hoist=${true}
+        .hoist=${this.hoist}
         .value=${this.data || ''}
       >
         ${this._options.map(