feat(experimental): InputPhoneInternational refactor to new textfield approach

[waterplea]

Fixes #

[lumberjack-bot]

Pull request was closed ✔️

All saved screenshots (for current PR) were deleted 🗑️

[codecov]

Codecov Report

Attention: Patch coverage is 4.12371% with 93 lines in your changes missing coverage. Please review.

Project coverage is 65.77%. Comparing base (ffb8b25) to head (c0a4b11).
Report is 24 commits behind head on main.

Files with missing lines	Patch %	Lines
...ternational/input-phone-international.component.ts	0.00%	87 Missing ⚠️
...ore/directives/dropdown/dropdown-open.directive.ts	0.00%	2 Missing ⚠️
...s/core/components/textfield/textfield.directive.ts	50.00%	1 Missing ⚠️
projects/experimental/components/index.ts	0.00%	1 Missing ⚠️
...ntal/components/input-phone-international/index.ts	0.00%	1 Missing ⚠️
projects/experimental/index.ts	0.00%	1 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff            @@
##           main    #9976       +/-   ##
=========================================
+ Coverage      0   65.77%   +65.77%     
=========================================
  Files         0     1219     +1219     
  Lines         0    15811    +15811     
  Branches      0     2337     +2337     
=========================================
+ Hits          0    10400    +10400     
- Misses        0     5059     +5059     
- Partials      0      352      +352     

Flag	Coverage Δ
summary	65.77% <4.12%> (?)

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[github-actions]

Visit the preview URL for this PR (updated for commit c0a4b11):

https://taiga-previews-demo--pr9976-input-phone-international-6lw0j9ex.web.app

_{(expires Fri, 20 Dec 2024 12:53:22 GMT)}

_{🔥 via Firebase Hosting GitHub Action 🌎}

_{Sign: 73dddc3c665194f3e11f18c16aeb71af4c289c37}

[bundlemon]

BundleMon

Files updated (3)

Status	Path	Size	Limits
✅	demo/browser/main.(hash).js	304.54KB (+250B +0.08%)	+10%
✅	demo/browser/styles.(hash).css	20.2KB (+139B +0.68%)	+10%
✅	demo/browser/runtime.(hash).js	44.03KB (+77B +0.17%)	+10%

Unchanged files (2)

Status	Path	Size	Limits
✅	demo/browser/vendor.(hash).js	260.25KB	+10%
✅	demo/browser/polyfills.(hash).js	11.18KB	+10%

Total files change +466B +0.07%

Groups updated (1)

Status	Path	Size	Limits
✅	demo/browser/*..js	7.39MB (+1.42KB +0.02%)	-

Final result: ✅

View report in BundleMon website ➡️

---

Current branch size history | Target branch size history

[github-actions]

Playwright test results

 33 failed
 1855 passed
 1 flaky
 85 skipped

Details

 Open report ↗︎
 1974 tests across 69 suites
 35 minutes, 11 seconds
 c0a4b11

Failed tests

chromium › tests/addon-commerce/input-card-group.pw.spec.ts › InputCardGroup › Examples › input card grouped with saved cards
chromium › tests/demo/demo.pw.spec.ts › Demo › /components/input-number
chromium › tests/demo/demo.pw.spec.ts › Demo › /components/input-phone-international
webkit › tests/demo/demo.pw.spec.ts › Demo › /components/input-number
webkit › tests/demo/demo.pw.spec.ts › Demo › /components/input-phone-international
chromium › tests/demo/demo.pw.spec.ts › Demo › /charts/arc-chart
chromium › tests/demo/demo.pw.spec.ts › Demo › /navigation/tabs
webkit › tests/demo/demo.pw.spec.ts › Demo › /charts/arc-chart
webkit › tests/demo/demo.pw.spec.ts › Demo › /navigation/tabs
chromium › tests/kit/dropdown-context/dropdown-context.pw.spec.ts › DropdownContext › opens dropdown on right click
chromium › tests/kit/dropdown-context/dropdown-context.pw.spec.ts › DropdownContext › closes previous dropdown after new one is opened
chromium › tests/kit/dropdown-context/dropdown-context.pw.spec.ts › DropdownContext › does not close dropdown when nested dropdown is clicked
webkit › tests/kit/dropdown-context/dropdown-context.pw.spec.ts › DropdownContext › opens dropdown on right click
webkit › tests/kit/dropdown-context/dropdown-context.pw.spec.ts › DropdownContext › closes previous dropdown after new one is opened
webkit › tests/kit/dropdown-context/dropdown-context.pw.spec.ts › DropdownContext › does not close dropdown when nested dropdown is clicked
chromium › tests/kit/tabs/tabs.pw.spec.ts › Tabs › Examples › complex › shows only a single dropdown for the nested item (with [tuiDropdown]) inside more section
chromium › tests/legacy/input-date/input-date.pw.spec.ts › InputDate › Examples › with input[tuiTextfieldLegacy] inside › filler has no change detection problems
webkit › tests/legacy/input-date/input-date.pw.spec.ts › InputDate › Examples › with input[tuiTextfieldLegacy] inside › filler has no change detection problems
chromium › tests/legacy/input-date/input-date.pw.spec.ts › InputDate › API › Invalid date cases › does not accept day > 31
chromium › tests/legacy/input-date/input-date.pw.spec.ts › InputDate › API › Invalid date cases › does not accept month > 12
chromium › tests/legacy/input-date/input-date.pw.spec.ts › InputDate › API › Invalid date cases › Type 999999 => 09.09.9999
webkit › tests/legacy/input-date/input-date.pw.spec.ts › InputDate › API › Invalid date cases › does not accept day > 31
webkit › tests/legacy/input-date/input-date.pw.spec.ts › InputDate › API › Invalid date cases › does not accept month > 12
webkit › tests/legacy/input-date/input-date.pw.spec.ts › InputDate › API › Invalid date cases › Type 999999 => 09.09.9999
chromium › tests/legacy/input-date/input-date.pw.spec.ts › InputDate › API › Press backspace to remove Until today, textfield is empty
webkit › tests/legacy/input-date/input-date.pw.spec.ts › InputDate › API › Press backspace to remove Until today, textfield is empty
chromium › tests/legacy/input-date-range/input-date-range.pw.spec.ts › InputDateRange › API › Press backspace to remove item, textfield is empty
chromium › tests/legacy/input-date-range/input-date-range.pw.spec.ts › InputDateRange › Examples › with input[tuiTextfieldLegacy] inside › filler has no change detection problems
webkit › tests/legacy/input-date-range/input-date-range.pw.spec.ts › InputDateRange › Examples › with input[tuiTextfieldLegacy] inside › filler has no change detection problems
chromium › tests/legacy/input-date-time/input-date-time.pw.spec.ts › InputDateTime › Examples › with input[tuiTextfieldLegacy] inside › filler has no change detection problems
webkit › tests/legacy/input-date-time/input-date-time.pw.spec.ts › InputDateTime › Examples › with input[tuiTextfieldLegacy] inside › filler has no change detection problems
chromium › tests/legacy/input-phone-international/input-phone-international.pw.spec.ts › InputPhoneInternational › API page › Open dropdown if readonly=false
webkit › tests/legacy/input-phone-international/input-phone-international.pw.spec.ts › InputPhoneInternational › API page › Open dropdown if readonly=false

Flaky tests

chromium › tests/legacy/multi-select/multi-select.pw.spec.ts › MultiSelect › Examples › Multiselect inside dialog with different textfield sizes › multiselect inside dialog with tuiTextfieldSize=l

Skipped tests

webkit › tests/addon-commerce/input-card-group.pw.spec.ts › InputCardGroup › Examples › input card grouped with validation
webkit › tests/addon-commerce/input-card-group.pw.spec.ts › InputCardGroup › Examples › input card grouped with saved cards
webkit › tests/addon-commerce/input-card-group.pw.spec.ts › InputCardGroup › Examples › expired field should be clickable after reset of prefilled value
webkit › tests/addon-doc/navigation.pw.spec.ts › Navigation › anchor links navigation works › scroll to "tui-doc-example"
webkit › tests/addon-doc/navigation.pw.spec.ts › Navigation › anchor links navigation works › scroll to "tui-doc-code"
webkit › tests/addon-doc/navigation.pw.spec.ts › Navigation › anchor links navigation works › scroll after click on link with anchor
webkit › tests/addon-doc/navigation.pw.spec.ts › Navigation › getting started / [light mode]
webkit › tests/addon-doc/navigation.pw.spec.ts › Navigation › getting started / [dark mode]
webkit › tests/core/data-list/data-list.pw.spec.ts › DataList › Submenu
webkit › tests/core/data-list/data-list.pw.spec.ts › DataList › Form control
webkit › tests/core/data-list/data-list.pw.spec.ts › DataList › Complex
webkit › tests/core/dialogs/dialogs.pw.spec.ts › Dialogs › 320x480 › Dialog with confirmation works › Prompt
webkit › tests/core/dialogs/dialogs.pw.spec.ts › Dialogs › 320x480 › Dialog with confirmation works › Pristine form does not show confirmation
webkit › tests/core/dialogs/dialogs.pw.spec.ts › Dialogs › 320x480 › Dialog with confirmation works › Dirty form shows confirmation
webkit › tests/core/dialogs/dialogs.pw.spec.ts › Dialogs › 320x480 › Dialog with confirmation works › Form is reset to pristine
webkit › tests/core/dialogs/dialogs.pw.spec.ts › Dialogs › 320x480 › A dialog and a nested dialog are open correctly
webkit › tests/core/dialogs/dialogs.pw.spec.ts › Dialogs › 320x480 › Mobile dialog works
webkit › tests/core/dialogs/dialogs.pw.spec.ts › Dialogs › 320x480 › Dialog with directive works
webkit › tests/core/dialogs/dialogs.pw.spec.ts › Dialogs › 320x480 › Show simple
webkit › tests/core/dialogs/dialogs.pw.spec.ts › Dialogs › 320x480 › Show simple + custom button
webkit › tests/core/dialogs/dialogs.pw.spec.ts › Dialogs › 720x900 › Dialog with confirmation works › Prompt
webkit › tests/core/dialogs/dialogs.pw.spec.ts › Dialogs › 720x900 › Dialog with confirmation works › Pristine form does not show confirmation
webkit › tests/core/dialogs/dialogs.pw.spec.ts › Dialogs › 720x900 › Dialog with confirmation works › Dirty form shows confirmation
webkit › tests/core/dialogs/dialogs.pw.spec.ts › Dialogs › 720x900 › Dialog with confirmation works › Form is reset to pristine
webkit › tests/core/dialogs/dialogs.pw.spec.ts › Dialogs › 720x900 › A dialog and a nested dialog are open correctly
webkit › tests/core/dialogs/dialogs.pw.spec.ts › Dialogs › 720x900 › Mobile dialog works
webkit › tests/core/dialogs/dialogs.pw.spec.ts › Dialogs › 720x900 › Dialog with directive works
webkit › tests/core/dialogs/dialogs.pw.spec.ts › Dialogs › 720x900 › Show simple
webkit › tests/core/dialogs/dialogs.pw.spec.ts › Dialogs › 720x900 › Show simple + custom button
webkit › tests/core/dialogs/dialogs.pw.spec.ts › Dialogs › 1024x900 › Dialog with confirmation works › Prompt
webkit › tests/core/dialogs/dialogs.pw.spec.ts › Dialogs › 1024x900 › Dialog with confirmation works › Pristine form does not show confirmation
webkit › tests/core/dialogs/dialogs.pw.spec.ts › Dialogs › 1024x900 › Dialog with confirmation works › Dirty form shows confirmation
webkit › tests/core/dialogs/dialogs.pw.spec.ts › Dialogs › 1024x900 › Dialog with confirmation works › Form is reset to pristine
webkit › tests/core/dialogs/dialogs.pw.spec.ts › Dialogs › 1024x900 › A dialog and a nested dialog are open correctly
webkit › tests/core/dialogs/dialogs.pw.spec.ts › Dialogs › 1024x900 › Mobile dialog works
webkit › tests/core/dialogs/dialogs.pw.spec.ts › Dialogs › 1024x900 › Dialog with directive works
webkit › tests/core/dialogs/dialogs.pw.spec.ts › Dialogs › 1024x900 › Show simple
webkit › tests/core/dialogs/dialogs.pw.spec.ts › Dialogs › 1024x900 › Show simple + custom button
webkit › tests/core/dialogs/dialogs.pw.spec.ts › Dialogs › 1620x1024 › Dialog with confirmation works › Prompt
webkit › tests/core/dialogs/dialogs.pw.spec.ts › Dialogs › 1620x1024 › Dialog with confirmation works › Pristine form does not show confirmation
webkit › tests/core/dialogs/dialogs.pw.spec.ts › Dialogs › 1620x1024 › Dialog with confirmation works › Dirty form shows confirmation
webkit › tests/core/dialogs/dialogs.pw.spec.ts › Dialogs › 1620x1024 › Dialog with confirmation works › Form is reset to pristine
webkit › tests/core/dialogs/dialogs.pw.spec.ts › Dialogs › 1620x1024 › A dialog and a nested dialog are open correctly
webkit › tests/core/dialogs/dialogs.pw.spec.ts › Dialogs › 1620x1024 › Mobile dialog works
webkit › tests/core/dialogs/dialogs.pw.spec.ts › Dialogs › 1620x1024 › Dialog with directive works
webkit › tests/core/dialogs/dialogs.pw.spec.ts › Dialogs › 1620x1024 › Show simple
webkit › tests/core/dialogs/dialogs.pw.spec.ts › Dialogs › 1620x1024 › Show simple + custom button
webkit › tests/core/dialogs/dialogs.pw.spec.ts › Dialogs › Prompt - 320x480
webkit › tests/core/dialogs/dialogs.pw.spec.ts › Dialogs › Prompt - 720x900
webkit › tests/core/dialogs/dialogs.pw.spec.ts › Dialogs › Prompt - 1024x900
webkit › tests/core/dialogs/dialogs.pw.spec.ts › Dialogs › Prompt - 1620x1024
webkit › tests/core/surface/surface.pw.spec.ts › Surface › Layers
webkit › tests/kit/carousel/carousel.pw.spec.ts › Carousel › should show next item after drag
webkit › tests/kit/dropdown-hover/dropdown-hover.pw.spec.ts › DropdownHover › Examples › With DropdownMobile › Closes dropdown on click on overlay
webkit › tests/kit/dropdown-hover/dropdown-hover.pw.spec.ts › DropdownHover › Examples › With DropdownMobile › Opens mobile version of dropdown on the 2nd time click
webkit › tests/kit/range/range.pw.spec.ts › TuiRange › examples page › change selected range on click › click on the beginning of the track changes only nearest (left) slider
webkit › tests/kit/range/range.pw.spec.ts › TuiRange › examples page › change selected range on click › click on the end of the track changes only nearest (right) slider
webkit › tests/kit/range/range.pw.spec.ts › TuiRange › examples page › change selected range on click › click between two thumbs triggers only nearest thumb
webkit › tests/kit/range/range.pw.spec.ts › TuiRange › examples page › keyboard interactions › basic range (from 0 to 1000 with 250 steps). Initial value [0, 250] › pressing of Arrow Right increases by one step (after focus on right slider)
webkit › tests/kit/range/range.pw.spec.ts › TuiRange › examples page › keyboard interactions › basic range (from 0 to 1000 with 250 steps). Initial value [0, 250] › pressing of Arrow Right increases by one step (after focus on left slider)
webkit › tests/kit/range/range.pw.spec.ts › TuiRange › examples page › keyboard interactions › basic range (from 0 to 1000 with 250 steps). Initial value [0, 250] › pressing of Arrow Left decreases by one step (after setting right thumb active via click)
webkit › tests/kit/range/range.pw.spec.ts › TuiRange › examples page › keyboard interactions › basic range (from 0 to 1000 with 250 steps). Initial value [0, 250] › cannot set left thumb more than right thumb (by Arrow Right)
webkit › tests/kit/range/range.pw.spec.ts › TuiRange › examples page › keyboard interactions › basic range (from 0 to 1000 with 250 steps). Initial value [0, 250] › cannot set right thumb less than left thumb (by ArrowLeft)
webkit › tests/kit/range/range.pw.spec.ts › TuiRange › examples page › keyboard interactions › range with keySteps (from 0 to 1M) with 8 steps. Initial value [0, 100_000] › ArrowUp increases value of the focused slider
webkit › tests/kit/range/range.pw.spec.ts › TuiRange › examples page › keyboard interactions › range with keySteps (from 0 to 1M) with 8 steps. Initial value [0, 100_000] › ArrowDown decreases value of the focused slider
webkit › tests/kit/range/range.pw.spec.ts › TuiRange › examples page › keyboard interactions › range with keySteps (from 0 to 1M) with 8 steps. Initial value [0, 100_000] › cannot set position of the LEFT slider MORE THAN position of the RIGHT slider (by ArrowUp)
webkit › tests/kit/range/range.pw.spec.ts › TuiRange › examples page › keyboard interactions › range with keySteps (from 0 to 1M) with 8 steps. Initial value [0, 100_000] › cannot set position of the RIGHT slider LESS THAN position of the LEFT slider (by ArrowDown)
webkit › tests/kit/slider/slider.pw.spec.ts › Slider › programmatically change value › ngModel › decrease value by 1 step
webkit › tests/kit/slider/slider.pw.spec.ts › Slider › programmatically change value › ngModel › increase value by 1 step
webkit › tests/kit/slider/slider.pw.spec.ts › Slider › programmatically change value › ngModel › increase value by 2 steps
webkit › tests/kit/tabs/tabs.pw.spec.ts › Tabs › Examples › complex › no extra margin after the last tab
webkit › tests/kit/tabs/tabs.pw.spec.ts › Tabs › Examples › complex › shows only a single dropdown for the nested item (with [tuiDropdown]) inside more section
webkit › tests/layout/navigation.pw.spec.ts › Navigation › Show settings in aside
webkit › tests/layout/navigation.pw.spec.ts › Navigation › Show hint in aside
webkit › tests/layout/navigation.pw.spec.ts › Navigation › A12y
webkit › tests/legacy/input-time/input-time.pw.spec.ts › InputTime › API › items are passed › the dropdown is visible when the input is focused
webkit › tests/legacy/input-time/input-time.pw.spec.ts › InputTime › API › items are passed › the dropdown is configured for s size
webkit › tests/legacy/input-time/input-time.pw.spec.ts › InputTime › API › items are passed › the dropdown is configured for m size
webkit › tests/legacy/input-time/input-time.pw.spec.ts › InputTime › API › items are passed › the dropdown is configured for l size
webkit › tests/legacy/multi-select/multi-select.pw.spec.ts › MultiSelect › Examples › Multiselect inside dialog with different textfield sizes › multiselect inside dialog with tuiTextfieldSize=s
webkit › tests/legacy/multi-select/multi-select.pw.spec.ts › MultiSelect › Examples › Multiselect inside dialog with different textfield sizes › multiselect inside dialog with tuiTextfieldSize=m
webkit › tests/legacy/multi-select/multi-select.pw.spec.ts › MultiSelect › Examples › Multiselect inside dialog with different textfield sizes › multiselect inside dialog with tuiTextfieldSize=l
webkit › tests/legacy/multi-select/multi-select.pw.spec.ts › MultiSelect › Examples › does not overflow arrow icon by many tags
webkit › tests/legacy/multi-select/multi-select.pw.spec.ts › MultiSelect › Examples › multi-select with data list with label
webkit › tests/legacy/multi-select/multi-select.pw.spec.ts › MultiSelect › Examples › multi-select with data list without label