Fhir Address

<ahi-fhir-address> | AhiFhirAddress

The text property will be displayed if it is present. If not, the line, city, state, country, and postalCode properties will be displayed.

If the state property is the name or abbreviation of a state in the United States of America, it will be displayed as an abbreviation with the full name of the state as metadata.

<ahi-fhir-address id="home-address-1"></ahi-fhir-address>
<ahi-fhir-address id="work-address-1"></ahi-fhir-address>

<script>
  document.getElementById('home-address-1').address = {
    line: ['321 Red St.'],
    state: 'New York',
    country: 'United States',
    postalCode: '09876',
    city: 'New York City',
    use: 'home'
  };

  document.getElementById('work-address-1').address = {
    line: ['123 Blue St.'],
    state: 'Georgia',
    country: 'United States',
    postalCode: '12345',
    city: 'Atlanta',
    text: '123 Blue Street\nATL GA 12345, USA',
    use: 'work'
  };
</script>

Examples

Controlling which properties are shown

To control which properties are shown, set the line, city, district, state, country, postal-code, and/or use properties to "hide" or "show" depending on the desired functionality.

In addition, ignore-text can be used to ignore the Address’s text property in favor of its component parts and show-raw-state can be used to not abbreviate the state.

Only shows the line: Shows all properties: Does not abbreviate the state: Even if visibility settings are provided, the text property will still take precedent:

Only shows the line:
<ahi-fhir-address
  ignore-text
  line="show"
  city="hide"
  state="hide"
  country="hide"
  postal-code="hide"
  class="controlling-properties"
></ahi-fhir-address>

Shows all properties:
<ahi-fhir-address ignore-text use="show" district="show" class="controlling-properties"></ahi-fhir-address>

Does not abbreviate the state:
<ahi-fhir-address ignore-text show-raw-state class="controlling-properties"></ahi-fhir-address>

Even if visibility settings are provided, the text property will still take precedent:
<ahi-fhir-address
  state="hide"
  country="hide"
  postal-code="hide"
  use="show"
  class="controlling-properties"
></ahi-fhir-address>

<script>
  const addressElements = document.getElementsByClassName('controlling-properties');
  for (const element of addressElements) {
    element.address = {
      line: ['321 Red St.'],
      state: 'New York',
      country: 'United States',
      postalCode: '09876',
      city: 'New York City',
      use: 'home',
      district: 'The Bronx',
      text: '321 Red\nNY NYC USA'
    };
  }
</script>

Importing

Script

Bundler

To import this component using a script tag:

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

To import this component using a bundler:

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

Properties

Name	Description	Type	Default
`address`	The address to be displayed	`Address`	-
`ignoreText` `ignore-text`	If false the address’s text value will be preferred over displaying its parts. If true the address’s text value will be ignored in favor if its parts.	`boolean`	`false`
`line`	Whether to show the address’s line value	`hideOrShow`	`'show'`
`city`	Whether to show the address’s city value	`hideOrShow`	`'show'`
`district`	Whether to show the address’s district value	`hideOrShow`	`'hide'`
`state`	Whether to show the address’s state value	`hideOrShow`	`'show'`
`country`	Whether to show the address’s country value	`hideOrShow`	`'show'`
`postalCode` `postal-code`	Whether to show the address’s postalCode value	`hideOrShow`	`'show'`
`use`	Whether to show the address’s use value	`hideOrShow`	`'hide'`
`showRawState` `show-raw-state`	If true, US states will not be converted from a state name to an abbreviation or vice-versa.	`boolean`	`false`
`updateComplete`	A read-only promise that resolves when the component has finished updating.

Learn more about properties and attributes.