added id to all components

src/medblocks/boolean/checkbox.ts

@@ -8,6 +8,7 @@ export default class MbCheckBox extends EhrElement {
   @property({ type: Boolean }) data: boolean | undefined = undefined;
   @property({ type: Boolean, reflect: true }) disabled: boolean = false;
   @property({ type: Boolean, reflect: true }) required: boolean = false;
+  @property({ type: String, reflect: true }) id: string = 'checkbox';
 
   _handleChange(e: CustomEvent) {
     const checkbox = e.target as SlCheckbox;
@@ -27,6 +28,7 @@ export default class MbCheckBox extends EhrElement {
       </div>`;
     }
     return html`<sl-checkbox
+      id=${this.id}
       ?required=${this.required}
       ?disabled=${this.disabled}
       ?checked=${this.data}

src/medblocks/codedtext/abstractSearch.ts

@@ -73,6 +73,8 @@ export default abstract class MbSearchAbstract extends CodedTextElement {
 
   @property({ type: String, reflect: true }) placeholder = 'Type to search';
 
+  @property({ type: String, reflect: true }) id = 'search';
+
   @property({ type: String }) textFallbackLabel = 'Add custom';
 
   @property({ type: String }) filtersLabel = 'Filters';
@@ -251,9 +253,7 @@ export default abstract class MbSearchAbstract extends CodedTextElement {
   _textFallback() {
     return html`<sl-divider></sl-divider>
       <sl-menu-item .value=${{ text: this.searchTerm }}
-        ><span
-          slot="suffix"
-          style="font-size: small;"
+        ><span slot="suffix" style="font-size: small;"
           >${this.textFallbackLabel}</span
         >${this.searchTerm}</sl-menu-item
       >`;
@@ -368,6 +368,7 @@ export default abstract class MbSearchAbstract extends CodedTextElement {
         }}
       >
         <sl-input
+          id=${this.id}
           class=${classMap({ pointer: this._hasValue })}
           slot="trigger"
           ?required=${this.required}

src/medblocks/codedtext/buttons-multiple.ts

@@ -14,6 +14,7 @@ export default class CodedTextButtons extends CodedTextElement {
   @property({ type: Boolean, reflect: true }) required: boolean = false;
   @property({ type: Boolean, reflect: true }) disabled: boolean = false;
   @property({ type: Boolean, reflect: true }) multiple: boolean = true;
+  @property({ type: String, reflect: true }) id: string='buttons-multiple';
   /** @ignore */
   static styles = css`
     .buttons {
@@ -106,6 +107,7 @@ export default class CodedTextButtons extends CodedTextElement {
           ${this._options.map(
             option =>
               html` <sl-button
+                id=${`${this.id}-${option.label}`}
                 .size=${this.variant === 'small' ? 'small' : 'medium'}
                 ?disabled=${this.disabled}
                 @click=${() => this._handleInput(option)}

src/medblocks/codedtext/buttons.ts

@@ -13,6 +13,7 @@ import { property } from 'lit-element';
 export default class CodedTextButtons extends CodedTextElement {
   @property({ type: Boolean, reflect: true }) required: boolean = false;
   @property({ type: Boolean, reflect: true }) disabled: boolean = false;
+  @property({ type: String, reflect: true }) id: string ='buttons';
   /** @ignore */
   static styles = css`
     .buttons {
@@ -91,7 +92,7 @@ export default class CodedTextButtons extends CodedTextElement {
           ${this._options.map(
             option =>
               html` <sl-button
-                id=${option.value}
+                id=${`${this.id}-${option.label}`}
                 .size=${this.variant === 'small' ? 'small' : 'medium'}
                 ?disabled=${this.disabled}
                 @click=${() => this._handleInput(option)}

src/medblocks/codedtext/select.ts

@@ -16,7 +16,9 @@ export default class MbSelect extends CodedTextElement {
   @property({ type: String }) terminology: string;
   @property({ type: Object }) data: CodedText | CodedText[] | undefined;
 
-  @property({ type: String, reflect: true }) placeholder: string;
+  @property({ type: String, reflect: true }) placeholder: string = 'Please select';
+
+  @property({ type: String, reflect: true }) id: string = 'select';
 
   @property({ type: Boolean, reflect: true }) multiple: boolean = false;
 
@@ -115,6 +117,7 @@ export default class MbSelect extends CodedTextElement {
     }
     return html`
       <sl-select
+        id=${this.id}
         .size=${this.variant === 'small' ? 'small' : 'medium'}
         .disabled=${this.disabled}
         clearable
@@ -132,7 +135,7 @@ export default class MbSelect extends CodedTextElement {
       >
         ${this._options.map(
           option =>
-            html`<sl-menu-item .value=${option.value}>
+            html`<sl-menu-item .value=${option.value} id=${`${this.id}-${option.value}`}>
               ${option.label}
             </sl-menu-item>`
         )}

src/medblocks/count/count.ts

@@ -15,6 +15,10 @@ export default class MbCount extends EhrElement {
 
   @property({ type: String }) label: string = '';
 
+  @property({ type: String }) placeholder: string = '';
+
+  @property({ type: String }) id: string = 'count';
+
   @property({ type: Boolean, reflect: true }) required: boolean = false;
 
   @property({ type: Boolean, reflect: true }) disabled: boolean;
@@ -42,11 +46,12 @@ export default class MbCount extends EhrElement {
     if (this.variant === 'text') {
       return html`<div>
         ${this._label()}
-        <p>${this.data>=Number(this.min || 0) ? this.data : '-'}</p>
+        <p>${this.data >= Number(this.min || 0) ? this.data : '-'}</p>
       </div>`;
     }
     return html`
       <sl-input
+        id=${this.id}
         .disabled=${this.disabled}
         type="number"
         .size=${this.variant === 'small' ? 'small' : 'medium'}
@@ -55,7 +60,8 @@ export default class MbCount extends EhrElement {
         ?required=${this.required}
         label=${this.label}
         @sl-input=${this.handleInput}
-        value=${this.data>=Number(this.min || 0) ? this.data : ''}
+        value=${this.data >= Number(this.min || 0) ? this.data : ''}
+        placeholder=${this.placeholder}
       ></sl-input>
     `;
   }

src/medblocks/datetime/date.ts

@@ -12,7 +12,7 @@ export default class MbDateTime extends EhrElement {
       width: unset;
     }
     .placeholder::part(input) {
-      color: rgb(var(--sl-input-placeholder-color));
+      color: var(--sl-input-placeholder-color);
     }
   `;
   @property({ type: String }) data: string | undefined;
@@ -31,6 +31,9 @@ export default class MbDateTime extends EhrElement {
 
   @property({ type: Boolean, reflect: true }) disabled: boolean;
 
+  @property({ type: Boolean, reflect: true }) id: string = 'date';
+
+
   @event('mb-input') _mbInput: EventEmitter<any>;
 
   handleInput(e: CustomEvent) {
@@ -90,6 +93,7 @@ export default class MbDateTime extends EhrElement {
     }
     return html`
       <sl-input
+        id=${this.id}
         part="sl-input"
         class=${this.data ? '' : 'placeholder'}
         .size=${this.variant === 'small' ? 'small' : 'medium'}

src/medblocks/duration/duration.ts

@@ -52,6 +52,8 @@ export default class MbDuration extends EhrElement {
   @property({ type: Boolean, reflect: true }) hidelabel: boolean = false;
   @property({ type: String, reflect: true }) min = '1';
   @property({ type: String, reflect: true }) placeholder = '';
+  @property({ type: String, reflect: true }) id = 'duration';
+
 
   @state() _state: { [period: string]: string | undefined } = {};
 
@@ -142,7 +144,7 @@ export default class MbDuration extends EhrElement {
       a => html`<sl-input
         .disabled=${this.disabled}
         .size=${this.variant === 'small' ? 'small' : 'medium'}
-        id=${a}
+        id=${`${this.id}-${this.formatDuration(a)}`}
         type="number"
         .min=${this.min}
         ?required=${this.required}

src/medblocks/proportion/MbProportion.ts

@@ -5,7 +5,6 @@ import { ifDefined } from 'lit-html/directives/if-defined';
 
 export default abstract class MbProportion extends EhrElement {
   static styles = css`
-
     .no-icon::part(icon) {
       display: none;
     }
@@ -49,6 +48,10 @@ export default abstract class MbProportion extends EhrElement {
 
   @property({ type: Boolean, reflect: true }) disabled: boolean;
 
+  @property({ type: String, reflect: true }) placeholder = '';
+
+  @property({ type: String, reflect: true }) id = 'proportion';
+
   @property({ type: Boolean }) hideunit = false;
 
   _handleChange(e: CustomEvent) {
@@ -96,6 +99,7 @@ export default abstract class MbProportion extends EhrElement {
       </div>`;
     }
     return html`<sl-input
+        id=${`${this.id}-magnitude`}
         .required=${this.required}
         .min=${this.min}
         .max=${this.max}
@@ -107,9 +111,11 @@ export default abstract class MbProportion extends EhrElement {
         @sl-input=${this._handleChange}
         class=${this.hideunit ? '' : 'margin-xs'}
         .value=${this.data?.numerator?.toString() || ''}
+        placeholder=${this.placeholder}
       >
       </sl-input>
       <sl-select
+        id=${`${this.id}-unit`}
         style="${this.hideunit ? 'display: none' : ''}"
         placeholder="Select units"
         class="no-icon"

src/medblocks/quantity/QuantityLike.ts

@@ -1,11 +1,4 @@
-import {
-  css,
-
-  html,
-  property,
-  query,
-  state,
-} from 'lit-element';
+import { css, html, property, query, state } from 'lit-element';
 import MbUnit from './unit';
 import SlSelect from '@shoelace-style/shoelace/dist/components/select/select';
 import SlInput from '@shoelace-style/shoelace/dist/components/input/input';
@@ -90,6 +83,8 @@ export default abstract class QuantityLike extends EhrElement {
 
   @property({ type: String, reflect: true }) placeholder = '';
 
+  @property({ type: String, reflect: true }) id = '';
+
   @property({ type: Boolean }) hideicon = false;
 
   /** Automatically disables the unit if only a single unit is present */
@@ -170,6 +165,7 @@ export default abstract class QuantityLike extends EhrElement {
     }
     return html`
       <sl-input
+        id=${`${this.id}-magnitude`}
         class=${this.hideunit ? '' : 'margin-xs'}
         .size=${this.variant === 'small' ? 'small' : 'medium'}
         .disabled=${this.disabled}
@@ -184,6 +180,7 @@ export default abstract class QuantityLike extends EhrElement {
         placeholder=${this.placeholder}
       ></sl-input>
       <sl-select
+        id=${`${this.id}-unit`}
         .disabled=${this._disabled()}
         class="${this._disabled() || this.hideicon ? 'no-icon' : ''}"
         style="${this.hideunit ? 'display: none' : ''}"
@@ -197,6 +194,7 @@ export default abstract class QuantityLike extends EhrElement {
           unit =>
             html`<sl-menu-item
               value=${unit.unit}
+              id=${`${this.id}-unit-${unit.unit}`}
               max=${unit.max}
               min=${unit.min}
               >${unit.label}</sl-menu-item

src/medblocks/quantity/quantity.ts

@@ -82,6 +82,8 @@ export default class MbQuantity extends QuantityElement {
 
   @property({ type: String, reflect: true }) placeholder = '';
 
+  @property({ type: String, reflect: true }) id : string = 'quantity';
+
   @property({ type: Boolean }) hideicon = false;
 
   /** Automatically disables the unit if only a single unit is present */
@@ -162,6 +164,7 @@ export default class MbQuantity extends QuantityElement {
     }
     return html`
       <sl-input
+        id=${`${this.id}-magnitude`}
         class=${this.hideunit ? '' : 'margin-xs'}
         .size=${this.variant === 'small' ? 'small' : 'medium'}
         .disabled=${this.disabled}
@@ -176,6 +179,7 @@ export default class MbQuantity extends QuantityElement {
         placeholder=${this.placeholder}
       ></sl-input>
       <sl-select
+        id=${`${this.id}-unit`}
         exportparts="menu"
         .disabled=${this._disabled()}
         class="${this._disabled() || this.hideicon ? 'no-icon' : ''}"
@@ -190,6 +194,7 @@ export default class MbQuantity extends QuantityElement {
           unit =>
             html`<sl-menu-item
               value=${unit.unit}
+              id=${`${this.id}-unit-${unit.unit}`}
               max=${unit.max}
               min=${unit.min}
               >${unit.label}</sl-menu-item

src/medblocks/suggestionWrapper.ts

@@ -28,7 +28,7 @@ export default class SuggestWrapper extends LitElement {
     .label {
       font-weight: var(--sl-font-weight-light);
       font-size: var(--sl-input-help-text-font-size-medium);
-      color: rgb(var(--sl-input-help-text-color));
+      color: var(--sl-input-help-text-color);
     }
 
     .suggest-buttons {

src/medblocks/text/input-multiple.ts

@@ -48,6 +48,8 @@ export default class MbInputMultiple extends EhrElement {
 
   @property({ type: String, reflect: true }) placeholder: string = '';
 
+  @property({ type: String, reflect: true }) id: string = 'input_multiple';
+
   @property({ type: Boolean, reflect: true }) required: boolean = false;
 
   @property({ type: Boolean, reflect: true }) disabled: boolean;
@@ -100,6 +102,7 @@ export default class MbInputMultiple extends EhrElement {
     }
     return html`
       <sl-input
+        id=${this.id}
         .size=${this.variant === 'small' ? 'small' : 'medium'}
         .disabled=${this.disabled}
         ?required=${this.required}
@@ -119,6 +122,7 @@ export default class MbInputMultiple extends EhrElement {
         ${this.data.map(
           (s, i) =>
             html`<sl-tag
+              id=${`${this.id}_tag${i}`}
               variant="neutral"
               size=${this.variant === 'small' ? 'small' : 'medium'}
               @sl-remove=${() => this.handleClear(i)}

src/medblocks/text/input.ts

@@ -39,6 +39,8 @@ export default class MbInput extends EhrElement {
 
   @property({ type: String }) label: string = '';
 
+  @property({ type: String }) id: string = 'input';
+
   @property({ type: Boolean, reflect: true }) required: boolean = false;
 
   @property({ type: String, reflect: true }) type: string;
@@ -89,6 +91,7 @@ export default class MbInput extends EhrElement {
     return this.textarea
       ? html`
           <sl-textarea
+            id=${this.id}
             .size=${this.variant === 'small' ? 'small' : 'medium'}
             .disabled=${this.disabled}
             .maxlength=${this.maxlength}
@@ -105,6 +108,7 @@ export default class MbInput extends EhrElement {
         `
       : html`
           <sl-input
+            id=${this.id}
             .size=${this.variant === 'small' ? 'small' : 'medium'}
             .disabled=${this.disabled}
             .min=${this.min}

src/medblocks/text/text-select.ts

@@ -25,6 +25,8 @@ export default class MbTextSelect extends EhrElement {
 
   @property({ type: String, reflect: true }) placeholder: string;
 
+  @property({ type: String, reflect: true }) id: string = 'text_select';
+
   @state() _options: MbOption[] = [];
 
   get _optionElements(): NodeListOf<MbOption> {
@@ -67,6 +69,7 @@ export default class MbTextSelect extends EhrElement {
     }
     return html`
       <sl-select
+        id=${this.id}
         exportparts="menu"
         .size=${this.variant === 'small' ? 'small' : 'medium'}
         clearable
@@ -85,7 +88,7 @@ export default class MbTextSelect extends EhrElement {
       >
         ${this._options.map(
           option =>
-            html`<sl-menu-item .value=${option.value}
+            html`<sl-menu-item .value=${option.value} id=${`${this.id}-${option.label}`}
               >${option.label}
             </sl-menu-item>`
         )}