diff --git a/projects/core/styles/theme/appearance/textfield.less b/projects/core/styles/theme/appearance/textfield.less index 1d1ccbfc2ab9..7c6f7bc60178 100644 --- a/projects/core/styles/theme/appearance/textfield.less +++ b/projects/core/styles/theme/appearance/textfield.less @@ -12,8 +12,9 @@ outline-offset: -1px; border: none; - &::before, - &::after { + // TODO: Remove tuiWrapper hack in v5 + &:not([tuiWrapper])::before, + &:not([tuiWrapper])::after { .transition(color); color: var(--tui-text-tertiary); @@ -22,8 +23,8 @@ .appearance-hover({ --t-shadow: 0 0.125rem 0.3125rem rgba(0, 0, 0, 0.16); - &:before, - &:after { + &:not([tuiWrapper]):before, + &:not([tuiWrapper]):after { color: var(--tui-text-secondary); } }); diff --git a/projects/experimental/components/input-phone-international/input-phone-international.component.ts b/projects/experimental/components/input-phone-international/input-phone-international.component.ts index fe826a70f3b6..0fc41ff39129 100644 --- a/projects/experimental/components/input-phone-international/input-phone-international.component.ts +++ b/projects/experimental/components/input-phone-international/input-phone-international.component.ts @@ -17,7 +17,7 @@ import { import {takeUntilDestroyed, toObservable, toSignal} from '@angular/core/rxjs-interop'; import {FormsModule} from '@angular/forms'; import {MaskitoDirective} from '@maskito/angular'; -import type {MaskitoOptions} from '@maskito/core'; +import {type MaskitoOptions, maskitoTransform} from '@maskito/core'; import {maskitoInitialCalibrationPlugin} from '@maskito/core'; import {maskitoGetCountryFromNumber, maskitoPhoneOptionsGenerator} from '@maskito/phone'; import {tuiAsControl, TuiControl} from '@taiga-ui/cdk/classes'; @@ -92,7 +92,7 @@ const NOT_FORM_CONTROL_SYMBOLS = /[^+\d]/g; '[attr.inputmode]': 'open() ? "none" : "numeric"', '[attr.readonly]': 'readOnly() || null', '[disabled]': 'disabled()', - '[value]': 'value() || el.value', + '[value]': 'masked()', '(blur)': 'onTouched()', '(input)': 'onInput()', '(click)': 'open.set(false)', @@ -120,6 +120,11 @@ export class TuiInputPhoneInternational extends TuiControl { computed(() => this.computeMask(this.code(), this.metadata())), ); + protected readonly masked = computed( + () => + maskitoTransform(this.value(), this.mask() || {mask: /.*/}) || this.el.value, + ); + protected readonly filtered = computed(() => this.countries() .map((iso) => ({ diff --git a/projects/experimental/components/input-phone-international/input-phone-international.style.less b/projects/experimental/components/input-phone-international/input-phone-international.style.less index 21d75af16a4d..c2de87e9914a 100644 --- a/projects/experimental/components/input-phone-international/input-phone-international.style.less +++ b/projects/experimental/components/input-phone-international/input-phone-international.style.less @@ -68,6 +68,10 @@ tui-textfield[data-size='l'] { z-index: 1; background: var(--tui-background-elevation-3); padding: 0.375rem 0.375rem 0; + + input { + .tui-prevent-ios-scroll(); + } } tui-dropdown-mobile {