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/vue-ui-library

Usage

Install the component library as a Vue plugin. This globally registers all Anchor components.

main.js

import { createApp } from 'vue';
import { ComponentLibrary } from '@tryg/vue-ui-library';
import App from './App.vue';

const app = createApp(App);
app.use(ComponentLibrary);
app.mount('#app');

YourComponent.vue

<template>
  <anchor-phone label="Your phone number"></anchor-phone>
</template>

Import only the components you need for optimal bundle size.

YourComponent.vue

<script setup>
import { AnchorPhone } from '@tryg/vue-ui-library';
</script>
<template>
  <anchor-phone label="Your phone number"></anchor-phone>
</template>

With value

Denmark first

Norway first

Disabled

Filled

Placeholder

Pattern

With error

Help text

Country list details

Introduction

To populate the Phone component with a list of countries to choose 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.

<script setup>
import { defaultCountriesForPhone } from '@tryg/vue-ui-library';

const options = JSON.stringify(defaultCountriesForPhone);
</script>
<template>
  <anchor-phone :options="options" label="Your phone number"></anchor-phone>
</template>

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:

<script setup>
import { AnchorPhone, defaultCountriesForPhone } from '@tryg/vue-ui-library';

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;
}

const options = JSON.stringify(rearrangeArrayByCountrycode(defaultCountriesForPhone, 'dk'));
</script>
<template>
  <anchor-phone :options="options"></anchor-phone>
</template>

Accessibility

Built on a native input element, providing standard keyboard navigation and form control behavior out of the box.
The country select uses role="combobox" with aria-haspopup="listbox" and aria-expanded to communicate the dropdown state to assistive technology.
Error state is communicated using aria-invalid, ensuring screen readers announce validation errors.
The label prop provides an accessible label for the input, and aria-country-select-label customizes the country selector label.
Screen reader-only text support via the sr-only utility class ensures assistive context without visual clutter.

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

graph TD;
  anchor-phone --> anchor-input
  anchor-phone --> anchor-icon
  anchor-phone --> anchor-select-item
  anchor-phone --> anchor-country-code
  anchor-input --> anchor-form-field
  anchor-input --> anchor-icon
  anchor-input --> anchor-tooltip
  anchor-form-field --> anchor-icon
  anchor-select-item --> anchor-icon
  style anchor-phone fill:#f9f,stroke:#333,stroke-width:4px

Built with StencilJS

Phone3.0