Deprecated - contains information about version 17 of the IDS librarySeedesign.if.eufor the latest documentation

CSS ComponentThe latest version of this package is: 17.0.30-alpha.8, Opens in new window

$ npm i @ids-core/@17.0.30-alpha.8
  • Norge
  • Sverige
  • Danmark
  • Finland
  • Estland
  • Latvia
  • Litauen
  • Storbritannia
  • Russland
  • Grønland
Please enter a valid phonenumber
Preview

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'
        >
            <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.

16.0.0 (2023-01-10)

⚠ BREAKING CHANGES

  • The input field component now has a border-radius - 6px.

"feature 686990"

  • Merged PR 98055: feat(input-fields): style update for input fields (205b85a), closes #686990

14.29.1 (2022-09-29)

Bug Fixes

  • phonenumber: add flags to built phonenumber styles (8d35f39)

14.22.2 (2022-05-03)

Miscellaneous chores

  • package locks: update package locks (813eac7)

14.20.1 (2022-04-19)

Miscellaneous chores

  • changelog: regenerate all CHANGELOG.md files (64ab385) , closes #586342
  • changelog: regenerate all changelogs after updating changelog generation (70789c9) , closes #587270

14.18.3 (2022-04-13)

Bug Fixes

  • changelog: generate new CHANGELOG.md files for root and packages (349fda4) , closes #586063 . We regenerate the files to include all relevant commits and to use conventional-commits at 100%

14.16.0 (2022-04-07)

Bug Fixes

  • 🐛 Add missing imports for global CSS Variables (fbf6f06) , closes #582437

14.9.0 (2022-03-03)

Miscellaneous chores

14.8.1 (2022-02-23)

Bug Fixes

  • 🐛 Add missing imports of typography CSS variables (e716c65) , closes #559412

reinstall (d425056)

bootstrap (9a713df)

merge (2b1c5f1)

reinstall (5221600)

reinstall (147df55)

  • use correct versions (f1b5deb)

  • Add engines for all packages (e95dfff)

reinstall (afce1f2)

reinstall (67f3140)

  • Add changelog.md to files (3338314)

Reinstall (a2abf51)

14.2.2 (2021-12-10)

Code Refactoring

  • 💡 Change focus styles, remove whatinput (75fd31b) , closes #505205

  • 💡 Use rems and variables (bf30a9a)

  • rebuild and reinstall (f9fb687)

reinstall (885c74b)

  • fix changelogs manually (b1232b4)

reinstall (545a069)

reinstall (e149c2c)

13.12.3 (2021-11-09)

⚠ 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

Documentation Updates

  • ✏️ Move position of the quick links (5cb0897)

  • ✏️ Remove unneeded margins for shortcuts (36c7e8d)

  • ✏️ Separate out CSS and Webcomponent documentation (ff3be17) , closes #467386

  • ✏️ Update links and change navigation structure (0bfd27d) , closes #490579

  • ✏️ Use correct js references in examples/dev/demo (f41c249)

Code Refactoring

  • 💡 Categorize components (9965266) , closes #490579

  • 💡 Reduce spacing tokens, use correct size tokens (97aa461)

  • 💡 Rename scope and repository (3ea5423)

  • 💡 Use new navigation structure for documentation (415aee5) , closes #490579

  • another change in the structure (38a0d2e)

Miscellaneous chores

bootstrap (6fc1ed8)

  • fix all old references to util (d57bf17)

  • prepare for merge (0184490)

reinstall (da80dba)

  • Rename scope and repo (257684e)

  • use correct version for utils (49e72d9)

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.7.0 (2021-09-22)

Documentation Updates

  • ✏️ Update linking layout and naming (15c383b)

13.6.3 (2021-09-17)

Bug Fixes

13.6.0 (2021-09-08)

Documentation Updates

  • Use default shortcut listing for demo links (a746602)

13.3.0 (2021-09-02)

Features

bootstrap (d23e139)

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