We're hiring!Are you enthusiastic about software development and business requirements? And would you like to be part of a journey aiming at placing Tryg as the top insurance company in the Nordics?

Ads by Tryg Careers

Installation

npm i @tryg/ui-library

Usage

Individual only imports the desired component, and only needs to be included once within the application. Which is beneficial to keep the application size small.

Webcomponent

<script type="module">
  import { defineCustomElement } from '@tryg/ui-library/dist/components/anchor-phone';
  import { defaultCountriesForPhone } from '@tryg/ui-library';
  defineCustomElement();
  document.querySelector('anchor-phone').setAttribute('options', JSON.stringify(defaultCountriesForPhone));
</script>
<anchor-phone>Your phone number</anchor-phone>

Global only needs to be defined once in the application, but it will import all components even the ones that are not in use..

Webcomponent

<script type="module">
  import { defineCustomElements } from '@tryg/ui-library/dist/loader';
  import { defaultCountriesForPhone } from '@tryg/ui-library';
  defineCustomElements();
  document.querySelector('anchor-phone').setAttribute('options', JSON.stringify(defaultCountriesForPhone));
</script>
<anchor-phone>Your phone number</anchor-phone>

With value

  <anchor-phone value="12121212">Your phone number</anchor-phone>

Denmark first

  <script type="module">
    document.querySelector('anchor-phone').setAttribute('options', JSON.stringify(rearrangeArrayByCountrycode(defaultCountriesForPhone, 'dk')));
  </script>
  <anchor-phone value="12121212">Your phone number</anchor-phone>

Norway first

  <script type="module">
    document.querySelector('anchor-phone').setAttribute('options', JSON.stringify(rearrangeArrayByCountrycode(defaultCountriesForPhone, 'no')));
  </script>
  <anchor-phone value="12121212">Your phone number</anchor-phone>

Disabled

  <anchor-phone value="12121212" disabled>Your phone number</anchor-phone>

Filled

  <anchor-phone value="12121212" filled>Your phone number</anchor-phone>

Placeholder

  <anchor-phone placeholder="Write your magic numbers">Your phone number</anchor-phone>

Pattern

  <anchor-phone pattern="[A-Za-z]{3}"">Your phone number</anchor-phone>

With error

  <anchor-phone error="You didn't write your magic numbers">Your phone number</anchor-phone>

Help text

  <anchor-phone help-text="Write your magic numbers">Your phone number</anchor-phone>

Country list details

Introduction

To populate the Phone component with a list of countries to chose from, you need to provide the component with an array containing an object for each country. Remember to stringify the array

You can also use the default list of countries and their data that Anchor provides.

import { defaultCountriesForPhone } from '@tryg/ui-library';
document.querySelector('anchor-phone').setAttribute('options', JSON.stringify(defaultCountriesForPhone));

The array of countries needs to follow this format:

[
  {
    "name": string,
    "iso2": string,
    "dialCode": number,
    "priority": number,
    "areaCodes": [number]
  }
]

Manipulate country list

If you want to make sure that a certain country is the first choice without writing your own array of countries, you can do something like this:

function rearrangeArrayByCountrycode(array, country) {
  const newArray = [...array];
  const foundIndex = newArray.findIndex(obj => obj.iso2 === country);

  if (foundIndex > -1) {
    const removedArray = newArray.splice(foundIndex, 1)[0];
    newArray.unshift(removedArray);
  }

  return newArray;
}

The array in this example is the defaultCountriesForPhone array. The country is the iso2 code for a given country.

Pass the re-arranged array in as options for the Phone component like this:

<anchor-phone options={rearrangeArrayByCountrycode(defaultCountriesForPhone, 'dk')}></anchor-phone>

API

anchor-phone

Properties

Property	Attribute	Description	Type	Default
`ariaCountrySelectLabel`	`aria-country-select-label`	Text to be displayed if when value is missing an native form validation is used	`string`	`'Select country'`
`disabled`	`disabled`	Disable the number field	`boolean`	`false`
`error`	`error`	Show an error message	`string`	`''`
`filled`	`filled`	Show a checkmark icon when the input field has been succesfully filled	`boolean`	`false`
`helpText`	`help-text`	Show a help text	`string`	`''`
`label`	`label`	Show the label (you can't currently disable the label)	`boolean`	`true`
`labelPlacement`	`label-placement`	Placement of the label	`"left" \| "top"`	`'top'`
`maxLength`	`max-length`	Set a max width in characters for the number field.	`number`	`undefined`
`name`	`name`	The name of the number field	`string`	`''`
`options`	`options`	Pass an array of countries to the phone field	`Country[] \| string`	`undefined`
`pattern`	`pattern`		`string`	`null`
`placeholder`	`placeholder`	Placeholder text is shown until the user interacts with the number field	`string`	`''`
`readonly`	`readonly`	Set the field to be read only	`boolean`	`false`
`required`	`required`	Mark the field as required	`boolean`	`false`
`selectedCountry`	`selected-country`		`number`	`0`
`size`	`size`	Set a fixed width in characters for the number field.	`number`	`null`
`spinners`	`spinners`		`"big" \| "none" \| "small"`	`'none'`
`tooltipText`	`tooltip-text`	Add an info icon with a tooltip to the right of the label	`string`	`''`
`uuid`	`uuid`	Give this instance of phone a custom ID, or keep the default.	`string`	`uuidv4()`
`validityMissingValueText`	`validity-missing-value-text`	Text to be displayed if when value is missing an native form validation is used	`string`	`undefined`
`value`	`value`	The value in the number field. Use this to set a value	`string`	`''`
`warning`	`warning`	Show a warning message	`string`	`''`

Events

Event	Description	Type
`blurevent`	Event emitted when the user blurs the input field	`CustomEvent<any>`
`clearevent`	Event emitted when the user clears the input field	`CustomEvent<any>`
`countrySelected`	Event emitted when a country is selected	`CustomEvent<any>`
`focusevent`	Event emitted when the user is focusing the input field	`CustomEvent<any>`
`inputChange`	Event emitted when user inputs something into the field	`CustomEvent<EventDetail>`
`inputevent`	Event emitted when the user is inputting something into the input field	`CustomEvent<EventDetail>`
`phoneNumberInvalid`	Event emitted when the input does not match the pattern	`CustomEvent<any>`
`phoneNumberValid`	Event emitted when the input matches the pattern	`CustomEvent<boolean>`

Methods

`checkValidPhoneNumber(value: any) => Promise<CustomEvent<any>>`

Parameters

Name	Type	Description
`value`	`any`

Returns

Type: Promise<CustomEvent<any>>

CSS Custom Properties

Name	Description
`--phone-input-border-color`	Set the border color of the phone input.
`--phone-input-border-color-error`	Set the border color of the phone input for error states.
`--phone-input-border-color-hover`	Set the border color of the phone input on hover.
`--phone-input-border-width`	Set the border width of the phone input.
`--phone-input-line-height`	Set the line height of the phone input.
`--phone-input-list-countries-length`	Set the number of countries shown in the list when it is open.
`--phone-input-list-height`	Set the height of the list in the phone input.
`--phone-input-margin-bottom`	Set the bottom margin of the phone input.
`--phone-input-margin-left`	Set the left margin of the phone input.
`--phone-input-margin-right`	Set the right margin of the phone input.
`--phone-input-margin-top`	Set the top margin of the phone input.
`--phone-input-max-width`	Set the max width of the phone input.
`--phone-input-padding-bottom`	Set the bottom padding of the phone input.
`--phone-input-padding-left`	Set the left padding of the phone input.
`--phone-input-padding-right`	Set the right padding of the phone input.
`--phone-input-padding-top`	Set the top padding of the phone input.
`--phone-input-width`	Set the width of the phone input.
`--room-for-select`	Give the Input extra padding to make room for the Select.

Dependencies

Depends on

Graph

Built with StencilJS

Phone3.0