Fhir Quantity

<ahi-fhir-quantity> | AhiFhirQuantity

<ahi-fhir-quantity id="example-quantity" plural-suffix="es" comparator-display="text"></ahi-fhir-quantity>

<script>
  const fhirQuantity = document.getElementById('example-quantity');
  fhirQuantity.quantity = { value: 100, unit: 'inch', comparator:'<=', system: 'http://unitsofmeasure.org' };
</script>

Examples

Pluralizing the Unit

The component offers two different ways to pluralize the unit. plural-suffix will be appended to the end of the unit provided in the quantity. plural-form will display instead of the unit, for units whose plural form changes the word more significantly than just adding a suffix. Note that plural-form, if it is defined, will appear regardless of whether the quantity has a unit or not. If neither plural-suffix nor plural-form is defined, no pluralization will be applied and the quantity’s unit will be displayed as-is.

<ahi-fhir-quantity id="plural-suffix-quantity" plural-suffix="s"></ahi-fhir-quantity>
<br/>
<ahi-fhir-quantity id="plural-form-quantity" plural-form="degrees fahrenheit"></ahi-fhir-quantity>
<br/>
<ahi-fhir-quantity id="no-plural-quantity"></ahi-fhir-quantity>

<script>
  const pluralSuffixQuantity = document.getElementById('plural-suffix-quantity');
  const pluralFormQuantity = document.getElementById('plural-form-quantity');
  const noPluralQuantity = document.getElementById('no-plural-quantity');

  pluralSuffixQuantity.quantity = { value: 1.45, unit: 'year', system: 'http://unitsofmeasure.org' };
  pluralFormQuantity.quantity = { value: -33, unit: 'degree fahrenheit', system: 'http://unitsofmeasure.org' };
  noPluralQuantity.quantity = { value: 23, unit: 'kelvin', system: 'http://unitsofmeasure.org' };
</script>

Displaying the Comparator

The quantity.comparator can be shown as a symbol, as text, or not at all.

<ahi-fhir-quantity id="symbol-comparator-quantity" comparator-display="symbol"></ahi-fhir-quantity>
<br/>
<ahi-fhir-quantity id="text-comparator-quantity" comparator-display="text"></ahi-fhir-quantity>
<br/>
<ahi-fhir-quantity id="no-comparator-quantity" comparator-display="none"></ahi-fhir-quantity>

<script>
  const symbolComparatorQuantity = document.getElementById('symbol-comparator-quantity');
  const textComparatorQuantity = document.getElementById('text-comparator-quantity');
  const noComparatorQuantity = document.getElementById('no-comparator-quantity');

  symbolComparatorQuantity.quantity = { value: 3, comparator:' <', unit: 'mi', system: 'http://unitsofmeasure.org' };
  textComparatorQuantity.quantity = { value: 6, comparator: '>=', unit: 'mi', system: 'http://unitsofmeasure.org' };
  noComparatorQuantity.quantity = { value: 9, comparator: '>', unit: 'mi', system: 'http://unitsofmeasure.org' };
</script>

Importing

Script

Bundler

To import this component using a script tag:

<script type="module" src="/path/to/azalea-kit-ui/dist/components/fhir-quantity/fhir-quantity.js"></script>

To import this component using a bundler:

import '@azaleahealth/azalea-kit-ui/dist/components/fhir-quantity/fhir-quantity.js';

Properties

Name	Description	Type	Default
`quantity`	The quantity to be displayed	`Quantity`	-
`comparatorDisplay` `comparator-display`	How the comparator should be displayed	`'symbol' \| 'text' \| 'none'`	`'symbol'`
`pluralSuffix` `plural-suffix`	The plural suffix to be appended to the end of `quantity.unit` when the `quantity.value` is not equal to 1.	`string`	-
`pluralForm` `plural-form`	The plural form of the unit to be used when the `quantity.value` is not equal to 1. This takes precedence over `pluralSuffix`.	`string`	-
`updateComplete`	A read-only promise that resolves when the component has finished updating.

Learn more about properties and attributes.