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..5747aa03029f --- /dev/null +++ b/projects/demo/src/modules/components/input-inline/examples/4/index.html @@ -0,0 +1,56 @@ + + +
+

+ 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..ce5664c2d04d --- /dev/null +++ b/projects/demo/src/modules/components/input-inline/examples/4/index.less @@ -0,0 +1,13 @@ +.task:first-child input:not(:placeholder-shown) { + text-decoration: underline; + text-align: center; +} + +tui-input-inline._empty, +tui-input-inline:has(input:placeholder-shown) { + color: var(--tui-text-tertiary); +} + +tui-input-inline:has(input[placeholder]) { + min-inline-size: 3ch; +} 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..cad562178d9b --- /dev/null +++ b/projects/demo/src/modules/components/input-inline/examples/4/index.ts @@ -0,0 +1,17 @@ +import {Component} from '@angular/core'; +import {FormsModule} from '@angular/forms'; +import {changeDetection} from '@demo/emulate/change-detection'; +import {encapsulation} from '@demo/emulate/encapsulation'; +import {TuiInputInline} from '@taiga-ui/kit'; + +@Component({ + standalone: true, + imports: [FormsModule, TuiInputInline], + templateUrl: './index.html', + styleUrls: ['./index.less'], + encapsulation, + changeDetection, +}) +export default class Example { + protected answer = ''; +} diff --git a/projects/demo/src/modules/components/input-inline/index.ts b/projects/demo/src/modules/components/input-inline/index.ts index 7ddaac8befa7..91a6ce7a649f 100644 --- a/projects/demo/src/modules/components/input-inline/index.ts +++ b/projects/demo/src/modules/components/input-inline/index.ts @@ -9,5 +9,5 @@ import {TuiDemo} from '@demo/utils'; changeDetection, }) export default class Page { - protected readonly examples = ['Basic', 'Heading', 'External update']; + protected readonly examples = ['Basic', 'Heading', 'External update', 'Inside text']; } diff --git a/projects/kit/components/input-inline/input-inline.component.ts b/projects/kit/components/input-inline/input-inline.component.ts index 7704418f3676..af17f12cf669 100644 --- a/projects/kit/components/input-inline/input-inline.component.ts +++ b/projects/kit/components/input-inline/input-inline.component.ts @@ -8,7 +8,6 @@ import { import {NgControl} from '@angular/forms'; import {TuiLet} from '@taiga-ui/cdk/directives/let'; import {tuiControlValue} from '@taiga-ui/cdk/observables'; -import {tuiIsElement, tuiIsInput} from '@taiga-ui/cdk/utils/dom'; import {defer} from 'rxjs'; @Component({ @@ -19,21 +18,10 @@ import {defer} from 'rxjs'; styleUrls: ['./input-inline.style.less'], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, - host: { - '(scroll.capture)': 'onScroll($event.target)', - }, }) export class TuiInputInline { @ContentChild(NgControl) private readonly control?: NgControl; protected readonly value$ = defer(() => tuiControlValue(this.control!)); - - protected indent = -1; - - protected onScroll(target: EventTarget | null): void { - if (tuiIsElement(target) && tuiIsInput(target)) { - this.indent = -target.scrollLeft - 1; // -1 for Safari (see styles) - } - } } diff --git a/projects/kit/components/input-inline/input-inline.style.less b/projects/kit/components/input-inline/input-inline.style.less index cf90a6ab6563..992299d498e0 100644 --- a/projects/kit/components/input-inline/input-inline.style.less +++ b/projects/kit/components/input-inline/input-inline.style.less @@ -1,26 +1,24 @@ @import '@taiga-ui/core/styles/taiga-ui-local'; +@safari-safe-space: 1px; + tui-input-inline { 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-inline-size: 1px; + margin-left: -@safari-safe-space; } > input { @@ -30,7 +28,7 @@ tui-input-inline { background-color: transparent; padding: inherit; font: inherit; - -webkit-text-fill-color: transparent; + color: inherit; box-sizing: border-box; inline-size: 100%; block-size: 100%; diff --git a/projects/kit/components/input-inline/input-inline.template.html b/projects/kit/components/input-inline/input-inline.template.html index 754b69173b19..7f8ad4bbd8b6 100644 --- a/projects/kit/components/input-inline/input-inline.template.html +++ b/projects/kit/components/input-inline/input-inline.template.html @@ -1,7 +1,6 @@