diff --git a/projects/demo/src/modules/components/input-inline/examples/4/index.html b/projects/demo/src/modules/components/input-inline/examples/4/index.html new file mode 100644 index 000000000000..becb4097722e --- /dev/null +++ b/projects/demo/src/modules/components/input-inline/examples/4/index.html @@ -0,0 +1,47 @@ + + +
+

+ Writing practice +
+ Learning to + write + type underscore and hyphen +

+ +
+ ___ + ___ + + ------ + ------ + +
+
diff --git a/projects/demo/src/modules/components/input-inline/examples/4/index.less b/projects/demo/src/modules/components/input-inline/examples/4/index.less new file mode 100644 index 000000000000..ea81110bc85c --- /dev/null +++ b/projects/demo/src/modules/components/input-inline/examples/4/index.less @@ -0,0 +1,8 @@ +.task:first-child tui-input-inline { + text-decoration: underline; + text-align: center; +} + +.placeholder { + color: var(--tui-text-03); +} diff --git a/projects/demo/src/modules/components/input-inline/examples/4/index.ts b/projects/demo/src/modules/components/input-inline/examples/4/index.ts new file mode 100644 index 000000000000..35cddc856b53 --- /dev/null +++ b/projects/demo/src/modules/components/input-inline/examples/4/index.ts @@ -0,0 +1,12 @@ +import {Component} from '@angular/core'; +import {changeDetection} from '@demo/emulate/change-detection'; +import {encapsulation} from '@demo/emulate/encapsulation'; + +@Component({ + selector: 'tui-input-inline-example-4', + templateUrl: './index.html', + styleUrls: ['./index.less'], + encapsulation, + changeDetection, +}) +export default class TuiInputInlineExample4 {} diff --git a/projects/demo/src/modules/components/input-inline/input-inline.component.ts b/projects/demo/src/modules/components/input-inline/input-inline.component.ts index bd3327f9fc31..e53f76d4f6b2 100644 --- a/projects/demo/src/modules/components/input-inline/input-inline.component.ts +++ b/projects/demo/src/modules/components/input-inline/input-inline.component.ts @@ -33,6 +33,12 @@ export class ExampleTuiInputInlineComponent extends AbstractExampleTuiControl { LESS: import('./examples/3/style.less?raw'), }; + readonly example4: TuiDocExample = { + HTML: import('./examples/4/index.html?raw'), + LESS: import('./examples/4/index.less?raw'), + TypeScript: import('./examples/4/index.ts?raw'), + }; + control = new FormControl('111', Validators.required); override readonly maxLengthVariants: readonly number[] = [10]; diff --git a/projects/demo/src/modules/components/input-inline/input-inline.module.ts b/projects/demo/src/modules/components/input-inline/input-inline.module.ts index 1b52a4e1a81b..1ca16cfd8019 100644 --- a/projects/demo/src/modules/components/input-inline/input-inline.module.ts +++ b/projects/demo/src/modules/components/input-inline/input-inline.module.ts @@ -10,6 +10,7 @@ import {TuiInputInlineModule} from '@taiga-ui/kit'; import {TuiInputInlineExample1} from './examples/1/component'; import {TuiInputInlineExample2} from './examples/2/component'; import {TuiInputInlineExample3} from './examples/3/component'; +import TuiInputInlineExample4 from './examples/4'; import {ExampleTuiInputInlineComponent} from './input-inline.component'; @NgModule({ @@ -28,6 +29,7 @@ import {ExampleTuiInputInlineComponent} from './input-inline.component'; TuiInputInlineExample1, TuiInputInlineExample2, TuiInputInlineExample3, + TuiInputInlineExample4, ], exports: [ExampleTuiInputInlineComponent], }) diff --git a/projects/demo/src/modules/components/input-inline/input-inline.template.html b/projects/demo/src/modules/components/input-inline/input-inline.template.html index c283cf30b909..43a0d7ee104e 100644 --- a/projects/demo/src/modules/components/input-inline/input-inline.template.html +++ b/projects/demo/src/modules/components/input-inline/input-inline.template.html @@ -29,6 +29,14 @@ > + + + + diff --git a/projects/kit/components/input-inline/input-inline.component.ts b/projects/kit/components/input-inline/input-inline.component.ts index cb77d95f46f4..010d2862c71b 100644 --- a/projects/kit/components/input-inline/input-inline.component.ts +++ b/projects/kit/components/input-inline/input-inline.component.ts @@ -36,14 +36,9 @@ export class TuiInputInlineComponent @ViewChild('native') private readonly native?: ElementRef; - @ViewChild('text') - private readonly text?: ElementRef; - @Input() maxLength: number | null = null; - indent = -1; - constructor( @Optional() @Self() @@ -62,18 +57,7 @@ export class TuiInputInlineComponent return tuiIsNativeFocused(this.nativeFocusableElement); } - get hasValue(): boolean { - return this.value !== ''; - } - onValueChange(value: string): void { - if (!this.text) { - return; - } - - // Sync update so width is calculated immediately - this.text.nativeElement.textContent = value; - this.text.nativeElement.style.textIndent = ''; this.value = value; } @@ -81,13 +65,6 @@ export class TuiInputInlineComponent this.updateFocused(focused); } - onScroll(): void { - const indent = this.native?.nativeElement.scrollLeft || 0; - - // -1 for Safari (see styles) - this.indent = -1 - indent; - } - protected getFallbackValue(): string { return ''; } diff --git a/projects/kit/components/input-inline/input-inline.style.less b/projects/kit/components/input-inline/input-inline.style.less index f333e45b1909..f8c238f42971 100644 --- a/projects/kit/components/input-inline/input-inline.style.less +++ b/projects/kit/components/input-inline/input-inline.style.less @@ -1,27 +1,25 @@ @import '@taiga-ui/core/styles/taiga-ui-local'; +@safari-safe-space: 1px; + :host { position: relative; display: inline-block; - overflow: hidden; white-space: nowrap; box-sizing: border-box; } -::spelling-error { - color: transparent; -} - .t-before { - display: block; padding-right: 0.02em; // to prevent caret shaking - margin-left: 1px; // to prevent hiding characters in safari + margin-left: @safari-safe-space; // to prevent hiding characters in safari white-space: pre; + visibility: hidden; } .t-placeholder { display: inline-block; min-width: 1px; + margin-left: -@safari-safe-space; } .t-native { @@ -31,7 +29,7 @@ background-color: transparent; padding: inherit; font: inherit; - -webkit-text-fill-color: transparent; + color: inherit; box-sizing: border-box; width: 100%; height: 100%; @@ -40,5 +38,6 @@ letter-spacing: inherit; text-indent: inherit; text-transform: inherit; + text-decoration: inherit; outline: none; } diff --git a/projects/kit/components/input-inline/input-inline.template.html b/projects/kit/components/input-inline/input-inline.template.html index fbef1700f850..3684373c548f 100644 --- a/projects/kit/components/input-inline/input-inline.template.html +++ b/projects/kit/components/input-inline/input-inline.template.html @@ -1,12 +1,10 @@ @@ -26,6 +24,5 @@ [readOnly]="readOnly" [tuiFocusable]="focusable" (ngModelChange)="onValueChange($event)" - (scroll)="onScroll()" (tuiFocusedChange)="onFocused($event)" />