CSS ComponentThe latest version of this package is: 14.1.0, Opens in new window

$ npm i @ids-core/@14.1.0

  • Norge
  • Sverige
  • Danmark
  • Finland
  • Estland
  • Latvia
  • Litauen
  • Storbritannia
  • Russland
  • Grønland
Please enter a valid phonenumber

Table of Contents

Edit this section, Opens in new window

Usage

Markup

<html class="if" lang="en"><form class="if" autocomplete="off" _lpchecked="1">
    <div class="if input-wrapper">
      <div class="if backdrop" role="presentation" id="ids-phonenumber-backdrop-_9ocp204q9"></div>
      <div class="if phonenumber-container" id="ids-phonenumber-container-_9ocp204q9" aria-labelledby="ids-phonenumber-label-_9ocp204q9" style="top: 40px;" data-whatintent="mouse" data-whatinput="keyboard">
        <button title="" aria-activedescendant="" type="button" role="combobox" aria-owns="ids-phonenumber-suggestions-_9ocp204q9" aria-controls""="" aria-expanded="false" class="if country-select" aria-controls="ids-phonenumber-suggestions-_9ocp204q9">
          <span class="if flag-indicator icon flag ee" role="presentation"></span>
          <span class="if country-code" role="presentation">+372</span>
        </button>
        <ul class="if countries" role="listbox" aria-label="List of countries" tabindex="-1" style="top: 47px;">
          <li data-rel="47" data-country-iso="NO" role="option" aria-setsize="245" aria-posinset="1" tabindex="-1" aria-selected="false" class="if">
            <span class="if flag-indicator flag icon no">
            </span>
            <span class="if country-name">Norge</span>
          </li>
          <li data-rel="46" data-country-iso="SE" role="option" aria-setsize="245" aria-posinset="2" tabindex="-1" aria-selected="false" class="if">
            <span class="if flag-indicator flag icon se">
            </span>
            <span class="if country-name">Sverige</span>
          </li>
          <li data-rel="45" data-country-iso="DK" role="option" aria-setsize="245" aria-posinset="3" tabindex="-1" aria-selected="false" class="if">
            <span class="if flag-indicator flag icon dk">
            </span>
            <span class="if country-name">Danmark</span>
          </li>
          <li data-rel="358" data-country-iso="FI" role="option" aria-setsize="245" aria-posinset="4" tabindex="-1" aria-selected="false" class="if">
            <span class="if flag-indicator flag icon fi">
            </span>
            <span class="if country-name">Finland</span>
          </li>
          <li data-rel="372" data-country-iso="EE" role="option" aria-setsize="245" aria-posinset="5" tabindex="-1" aria-selected="true" class="if is-selected">
            <span class="if flag-indicator flag icon ee">
            </span>
            <span class="if country-name">Estland</span>
          </li>
          <li data-rel="371" data-country-iso="LV" role="option" aria-setsize="245" aria-posinset="6" tabindex="-1" aria-selected="false" class="if">
            <span class="if flag-indicator flag icon lv">
            </span>
            <span class="if country-name">Latvia</span>
          </li>
          <li data-rel="370" data-country-iso="LT" role="option" aria-setsize="245" aria-posinset="7" tabindex="-1" aria-selected="false" class="if">
            <span class="if flag-indicator flag icon lt">
            </span>
            <span class="if country-name">Litauen</span>
          </li>
          <li data-rel="44" data-country-iso="GB" role="option" aria-setsize="245" aria-posinset="8" tabindex="-1" aria-selected="false" class="if">
            <span class="if flag-indicator flag icon gb">
            </span>
            <span class="if country-name">Storbritannia</span>
          </li>
          <li data-rel="7" data-country-iso="RU" role="option" aria-setsize="245" aria-posinset="9" tabindex="-1" aria-selected="false" class="if">
            <span class="if flag-indicator flag icon ru">
            </span>
            <span class="if country-name">Russland</span>
          </li>
          <li data-rel="299" data-country-iso="GL" role="option" aria-setsize="245" aria-posinset="10" tabindex="-1" aria-selected="false" class="if">
            <span class="if flag-indicator flag icon gl">
            </span>
            <span class="if country-name">Grønland</span>
          </li></ul>
      </div>
      <input type="tel" class="if input-field phonenumber is-optional" data-lpignore="true">
      <label class="if input-label" id="ids-phonenumber-label-_9ocp204q9">Default</label>
      <div class="if input-error">Please enter a valid phonenumber</div>
    </div>
    <button type="submit" class="if primary button">Submit</button>
  </form></html>
Edit this section, Opens in new window

Changelog

Change Log

All notable changes to this project will be documented in this file. See Conventional Commits for commit guidelines.

14.0.0 (2021-11-09)

chore

  • 🤖 Rename util to utils (f78721f)

Code Refactoring

  • 💡 Rename scope and repository (3ea5423)
  • 💡 Use new navigation structure for documentation (415aee5), closes #490579

Documentation

  • ✏️ Separate out CSS and Webcomponent documentation (ff3be17), closes #467386
  • ✏️ Update links and change navigation structure (0bfd27d), closes #490579

BREAKING CHANGES

  • 🧨 The scope for If Design System npm packages has now changed from

@if-design-system to @ids-core. We have also renamed the repository from if-design-system to ids-core

  • 🧨 Util is now renamed to Utils
  • 🧨 We have now changed the navigation structure for the documentation site.

Please update any saved links!

  • 🧨 Navigation structure has now changed. Please see release notes!
  • 🧨 The Phonenumber Webcomponent is now moved to a separate scope:

@ids-wc/phonenumber

13.11.0 (2021-10-19)

Features

  • 🎸 Input field hot reload (eac76b7)

13.9.2 (2021-09-30)

Bug Fixes

  • 🐛 Complete the pseudo-element fix (1dcee2c)

13.6.3 (2021-09-17)

Bug Fixes

13.3.0 (2021-09-02)

Features

Edit this section, Opens in new window
Contact us, Opens in new window