ui

Classes

SmartCheckinPicker

Defined in: src/ui/picker-element.ts:124

The <smart-checkin-picker> element. Importing @smart-health-checkin/client/ui (or loading the hosted ui.js) registers it; the Wallet picker guide explains how to use it.

<script type="module" src="https://smart-health-checkin.org/client/lib/ui.js"></script>
<smart-checkin-picker registry="/wallets.json"></smart-checkin-picker>
<script type="module">
  const picker = document.querySelector("smart-checkin-picker");
  picker.request = { purpose: "Before your visit", items: [ ... ] };
  picker.addEventListener("smart-checkin-response", (e) => fill(e.detail.response));
</script>

Attributes

The properties request, wallets, checkinOptions, strings, and motion are listed under Accessors below.

Events

All bubble and cross shadow roots. SmartCheckinPickerEventMap gives each one's detail: smart-checkin-choose (fired inside the click), smart-checkin-response, smart-checkin-declined, and smart-checkin-error.

CSS custom properties

Set them on the element or any ancestor. Dark values apply with theme="dark".

Parts

For anything the custom properties don't cover, style these with ::part(): container, card, title, description, primary, list, row, more, icon, status, mark (the starburst beside a status), check (on the mark when shared), footer, and dialog.

Extends

• HTMLElementBase

Accessors

checkinOptions

Get Signature

get checkinOptions(): Omit<CheckinOptions, "wallet" | "signal" | "session">;

Defined in: src/ui/picker-element.ts:181

Passed to runCheckin: keys, healthCards, fetch.

Returns

Omit<CheckinOptions, "wallet" | "signal" | "session">

Set Signature

set checkinOptions(value): void;

Defined in: src/ui/picker-element.ts:184

Parameters

Returns

void

motion

Get Signature

get motion(): PickerMotion;

Defined in: src/ui/picker-element.ts:165

How much the picker moves: "subtle" (the default: short fades, and a sweep round the mark while it waits) or "none". Reflects the motion attribute. A reduced-motion preference on the device always means none.

Returns

PickerMotion

Set Signature

set motion(value): void;

Defined in: src/ui/picker-element.ts:168

Parameters

Returns

void

request

Get Signature

get request(): CheckinRequestInput | undefined;

Defined in: src/ui/picker-element.ts:173

What to ask the patient for. Required unless mode="pick".

Returns

CheckinRequestInput | undefined

Set Signature

set request(value): void;

Defined in: src/ui/picker-element.ts:176

Parameters

Returns

void

strings

Get Signature

get strings(): {
  blockedDetail: string;
  blockedTitle: string;
  cancel: string;
  chooseDifferent: string;
  close: string;
  declinedDetail: string;
  declinedTitle: string;
  description: string;
  doneDetail: string;
  doneTitle: string;
  errorDetail: string;
  errorTitle: string;
  footer: string;
  heading: string;
  loading: string;
  moreDetail: string;
  moreTitle: string;
  noMatches: string;
  noneDetail: string;
  noneTitle: string;
  onlyDetail: string;
  onlyTitle: string;
  platformDetail: string;
  platformDetailDesktop: string;
  platformTitle: string;
  platformTitleDesktop: string;
  rememberedDetail: string;
  search: string;
  selectorDetail: string;
  selectorTitle: string;
  shareAgain: string;
  tryAgain: string;
  useDifferent: string;
  waitingPlatformDetail: string;
  waitingPlatformTitle: string;
  waitingWebDetail: string;
  waitingWebTitle: string;
  webDivider: string;
};

Defined in: src/ui/picker-element.ts:189

Replace any of the picker's text. Missing keys keep their defaults.

Returns

{
  blockedDetail: string;
  blockedTitle: string;
  cancel: string;
  chooseDifferent: string;
  close: string;
  declinedDetail: string;
  declinedTitle: string;
  description: string;
  doneDetail: string;
  doneTitle: string;
  errorDetail: string;
  errorTitle: string;
  footer: string;
  heading: string;
  loading: string;
  moreDetail: string;
  moreTitle: string;
  noMatches: string;
  noneDetail: string;
  noneTitle: string;
  onlyDetail: string;
  onlyTitle: string;
  platformDetail: string;
  platformDetailDesktop: string;
  platformTitle: string;
  platformTitleDesktop: string;
  rememberedDetail: string;
  search: string;
  selectorDetail: string;
  selectorTitle: string;
  shareAgain: string;
  tryAgain: string;
  useDifferent: string;
  waitingPlatformDetail: string;
  waitingPlatformTitle: string;
  waitingWebDetail: string;
  waitingWebTitle: string;
  webDivider: string;
}

blockedDetail

blockedDetail: string = "Allow pop-ups for this site, then try again.";

blockedTitle

blockedTitle: string = "Your browser blocked the new tab";

cancel

cancel: string = "Cancel";

chooseDifferent

chooseDifferent: string = "Choose a different app";

close

close: string = "Close";

declinedDetail

declinedDetail: string = "You closed {name} before sharing. You can try again or fill in the form yourself.";

declinedTitle

declinedTitle: string = "Nothing was shared";

description

description: string = "Fill in this form from a health app you already use.";

doneDetail

doneDetail: string = "Your information was added to this page.";

doneTitle

doneTitle: string = "Shared from {name}";

errorDetail

errorDetail: string = "{message}";

errorTitle

errorTitle: string = "Something went wrong";

footer

footer: string = "SMART Health Check-in";

heading

heading: string = "Share your health information";

loading

loading: string = "Looking for health apps…";

moreDetail

moreDetail: string = "{count} more, and a search box";

moreTitle

moreTitle: string = "More health apps";

noMatches

noMatches: string = "No apps match “{query}”.";

noneDetail

noneDetail: string = "You can fill in the form yourself, or open this page on a phone with a health app.";

noneTitle

noneTitle: string = "No health apps can connect from this browser";

onlyDetail

onlyDetail: string = "Opens in a new tab";

onlyTitle

onlyTitle: string = "Continue with {name}";

platformDetail

platformDetail: string = "Your phone shows the health apps you have";

platformDetailDesktop

platformDetailDesktop: string = "Scan a code with your phone's camera";

platformTitle

platformTitle: string = "Use an app on this phone";

platformTitleDesktop

platformTitleDesktop: string = "Use an app on your phone";

rememberedDetail

rememberedDetail: string = "You used this last time";

search

search: string = "Find your app";

selectorDetail

selectorDetail: string = "{count} apps can fill in this form.";

selectorTitle

selectorTitle: string = "Choose a health app";

shareAgain

shareAgain: string = "Share again or use a different app";

tryAgain

tryAgain: string = "Try again";

useDifferent

useDifferent: string = "Use a different app";

waitingPlatformDetail

waitingPlatformDetail: string = "Your phone is asking which health app to use and what to share.";

waitingPlatformTitle

waitingPlatformTitle: string = "Finish on your phone";

waitingWebDetail

waitingWebDetail: string = "It opened in a new tab. Choose what to share there, and you'll come back here.";

waitingWebTitle

waitingWebTitle: string = "Finish in {name}";

webDivider

webDivider: string = "or a health app on the web";

Set Signature

set strings(value): void;

Defined in: src/ui/picker-element.ts:192

Parameters

Returns

void

wallets

Get Signature

get wallets(): Wallet[] | undefined;

Defined in: src/ui/picker-element.ts:198

The wallets to offer (from wallets()), instead of the registry / platform / mock attributes.

Returns

Wallet[] | undefined

Set Signature

set wallets(value): void;

Defined in: src/ui/picker-element.ts:201

Parameters

Returns

void

Methods

reset()

reset(): void;

Defined in: src/ui/picker-element.ts:242

Back to the list of wallets, cancelling anything in progress.

Returns

void

setOutcome()

setOutcome(outcome): void;

Defined in: src/ui/picker-element.ts:230

In mode="pick", tell the picker how the check-in ended so it can say so.

Parameters

Returns

void

Type Aliases

PickerMotion

type PickerMotion = "subtle" | "none";

Defined in: src/ui/picker-element.ts:53

The motion attribute's values.

PickerOutcome

type PickerOutcome = 
  | {
  status: "completed";
}
  | {
  status: "declined";
}
  | {
  code?: CheckinErrorCode;
  message: string;
  status: "failed";
};

Defined in: src/ui/picker-element.ts:28

In pick mode, how the page's check-in ended.

PickerStrings

type PickerStrings = typeof DEFAULT_STRINGS;

Defined in: src/ui/strings.ts:53

SmartCheckinPickerEventMap

type SmartCheckinPickerEventMap = {
  smart-checkin-choose: CustomEvent<{
     session?: WalletSession;
     wallet: Wallet;
  }>;
  smart-checkin-declined: CustomEvent<{
     result?: CheckinResult;
     wallet: Wallet;
  }>;
  smart-checkin-error: CustomEvent<{
     code?: CheckinErrorCode;
     message: string;
     result?: CheckinResult;
     wallet?: Wallet;
  }>;
  smart-checkin-response: CustomEvent<{
     response?: CheckinResponse;
     result: CheckinResult;
     wallet: Wallet;
  }>;
};

Defined in: src/ui/picker-element.ts:45

The element's events and what each carries in detail.

Properties

smart-checkin-choose

smart-checkin-choose: CustomEvent<{
  session?: WalletSession;
  wallet: Wallet;
}>;

Defined in: src/ui/picker-element.ts:46

smart-checkin-declined

smart-checkin-declined: CustomEvent<{
  result?: CheckinResult;
  wallet: Wallet;
}>;

Defined in: src/ui/picker-element.ts:48

smart-checkin-error

smart-checkin-error: CustomEvent<{
  code?: CheckinErrorCode;
  message: string;
  result?: CheckinResult;
  wallet?: Wallet;
}>;

Defined in: src/ui/picker-element.ts:49

smart-checkin-response

smart-checkin-response: CustomEvent<{
  response?: CheckinResponse;
  result: CheckinResult;
  wallet: Wallet;
}>;

Defined in: src/ui/picker-element.ts:47

Variables

DEFAULT_STRINGS

const DEFAULT_STRINGS: {
  blockedDetail: string;
  blockedTitle: string;
  cancel: string;
  chooseDifferent: string;
  close: string;
  declinedDetail: string;
  declinedTitle: string;
  description: string;
  doneDetail: string;
  doneTitle: string;
  errorDetail: string;
  errorTitle: string;
  footer: string;
  heading: string;
  loading: string;
  moreDetail: string;
  moreTitle: string;
  noMatches: string;
  noneDetail: string;
  noneTitle: string;
  onlyDetail: string;
  onlyTitle: string;
  platformDetail: string;
  platformDetailDesktop: string;
  platformTitle: string;
  platformTitleDesktop: string;
  rememberedDetail: string;
  search: string;
  selectorDetail: string;
  selectorTitle: string;
  shareAgain: string;
  tryAgain: string;
  useDifferent: string;
  waitingPlatformDetail: string;
  waitingPlatformTitle: string;
  waitingWebDetail: string;
  waitingWebTitle: string;
  webDivider: string;
};

Defined in: src/ui/strings.ts:6

Every piece of text the picker shows. Override any of them (for wording or translation) with the element's strings property. {name}, {count}, {query}, and {message} are filled in where they appear.

Type Declaration

blockedDetail

blockedDetail: string = "Allow pop-ups for this site, then try again.";

blockedTitle

blockedTitle: string = "Your browser blocked the new tab";

cancel

cancel: string = "Cancel";

chooseDifferent

chooseDifferent: string = "Choose a different app";

close

close: string = "Close";

declinedDetail

declinedDetail: string = "You closed {name} before sharing. You can try again or fill in the form yourself.";

declinedTitle

declinedTitle: string = "Nothing was shared";

description

description: string = "Fill in this form from a health app you already use.";

doneDetail

doneDetail: string = "Your information was added to this page.";

doneTitle

doneTitle: string = "Shared from {name}";

errorDetail

errorDetail: string = "{message}";

errorTitle

errorTitle: string = "Something went wrong";

footer

footer: string = "SMART Health Check-in";

heading

heading: string = "Share your health information";

loading

loading: string = "Looking for health apps…";

moreDetail

moreDetail: string = "{count} more, and a search box";

moreTitle

moreTitle: string = "More health apps";

noMatches

noMatches: string = "No apps match “{query}”.";

noneDetail

noneDetail: string = "You can fill in the form yourself, or open this page on a phone with a health app.";

noneTitle

noneTitle: string = "No health apps can connect from this browser";

onlyDetail

onlyDetail: string = "Opens in a new tab";

onlyTitle

onlyTitle: string = "Continue with {name}";

platformDetail

platformDetail: string = "Your phone shows the health apps you have";

platformDetailDesktop

platformDetailDesktop: string = "Scan a code with your phone's camera";

platformTitle

platformTitle: string = "Use an app on this phone";

platformTitleDesktop

platformTitleDesktop: string = "Use an app on your phone";

rememberedDetail

rememberedDetail: string = "You used this last time";

search

search: string = "Find your app";

selectorDetail

selectorDetail: string = "{count} apps can fill in this form.";

selectorTitle

selectorTitle: string = "Choose a health app";

shareAgain

shareAgain: string = "Share again or use a different app";

tryAgain

tryAgain: string = "Try again";

useDifferent

useDifferent: string = "Use a different app";

waitingPlatformDetail

waitingPlatformDetail: string = "Your phone is asking which health app to use and what to share.";

waitingPlatformTitle

waitingPlatformTitle: string = "Finish on your phone";

waitingWebDetail

waitingWebDetail: string = "It opened in a new tab. Choose what to share there, and you'll come back here.";

waitingWebTitle

waitingWebTitle: string = "Finish in {name}";

webDivider

webDivider: string = "or a health app on the web";

PICKER_CSS

const PICKER_CSS: string;

Defined in: src/ui/styles.ts:20

STARBURST_ICON_URL

const STARBURST_ICON_URL: string;

Defined in: src/ui/icons.ts:25

The starburst on white, as a data: URL suitable for a wallet registry's iconUrl.

STARBURST_SVG

const STARBURST_SVG: "<svg viewBox=\"57.0752 -11.1948 95.1696 95.1696\" aria-hidden=\"true\" focusable=\"false\"><polygon class=\"petal-purple\" fill=\"#722772\" points=\"83.91 0 93.42 0 104.56 18.47 116.03 0 125.28 0 104.58 33.96\"/><polygon fill=\"#e24a31\" points=\"60.61 35.72 65.37 28.16 87.76 28.16 76.67 9.49 81.3 1.87 101.89 35.72\"/><polygon fill=\"#e77d26\" points=\"128 1.73 132.76 9.55 121.5 28.16 144.06 28.16 148.69 35.72 107.4 35.72\"/><polygon fill=\"#89bf44\" points=\"148.72 38.78 143.97 46.33 121.57 46.33 132.66 65.16 128.03 72.78 107.44 38.78\"/><polygon fill=\"#f1b42a\" points=\"81.28 72.77 76.53 64.94 87.78 46.33 65.23 46.33 60.6 38.78 101.89 38.78\"/><polygon fill=\"#64aed0\" points=\"125.46 73.22 115.89 73.22 104.68 54.63 93.14 73.22 83.82 73.22 104.66 39.04\"/></svg>";

Defined in: src/ui/icons.ts:14

The SMART starburst, square viewBox, for inline use.

Functions

defineCheckinPicker()

function defineCheckinPicker(tagName?): void;

Defined in: src/ui/picker-element.ts:557

Register <smart-checkin-picker> (safe to call more than once).

Parameters

Returns

void