CSS ComponentThe latest version of this package is: 17.0.30-alpha.0, Opens in new window
$ npm i @ids-core/@17.0.30-alpha.0Table of Contents
Edit this section, Opens in new windowUsage
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>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"
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-commitsat 100%
14.16.0 (2022-04-07)
Bug Fixes
14.9.0 (2022-03-03)
Miscellaneous chores
- 🤖 Bootstrap (6822f5b)
14.8.1 (2022-02-23)
Bug Fixes
reinstall (d425056)
bootstrap (9a713df)
merge (2b1c5f1)
reinstall (5221600)
reinstall (147df55)
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-systemto@ids-core. We have also renamed the repository fromif-design-systemtoids-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
-
💡 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)
reinstall (da80dba)
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)