fix(cdk): Control react to markAsTouched on Angular 18+ (#9330)

Co-authored-by: taiga-family-bot <[email protected]>

projects/addon-mobile/directives/dropdown-mobile/dropdown-mobile.style.less

@@ -105,4 +105,12 @@ tui-dropdown-mobile._sheet {
         touch-action: inherit;
         visibility: inherit;
     }
+
+    tui-root {
+        visibility: visible;
+
+        .t-root-content {
+            visibility: hidden;
+        }
+    }
 }

projects/cdk/classes/control.ts

@@ -16,6 +16,7 @@ import {tuiProvide, tuiPure} from '@taiga-ui/cdk/utils';
 import {
     delay,
     distinctUntilChanged,
+    EMPTY,
     filter,
     map,
     merge,
@@ -71,7 +72,9 @@ export abstract class TuiControl<T> implements ControlValueAccessor {
                 map(() => this.control.control),
                 filter(Boolean),
                 distinctUntilChanged(),
-                switchMap((c) => merge(c.valueChanges, c.statusChanges)),
+                switchMap((c) =>
+                    merge(c.valueChanges, c.statusChanges, (c as any).events || EMPTY),
+                ),
                 takeUntilDestroyed(),
             )
             .subscribe(() => this.update());

projects/core/styles/mixins/mixins.less

@@ -146,3 +146,11 @@
         }
     }
 }
+
+.text-truncate() {
+    .text-overflow();
+
+    flex: 1;
+    min-inline-size: 0;
+    max-inline-size: max-content;
+}

projects/core/styles/mixins/mixins.scss

@@ -145,3 +145,10 @@
         }
     }
 }
+
+@mixin text-truncate() {
+    @include text-overflow();
+    flex: 1;
+    min-inline-size: 0;
+    max-inline-size: max-content;
+}

projects/demo/src/modules/components/breadcrumbs/examples/3/index.html

@@ -0,0 +1,41 @@
+<h3>Truncate</h3>
+<tui-breadcrumbs>
+    <ng-container *ngFor="let item of items">
+        <button
+            *tuiItem
+            tuiHintOverflow
+            tuiLink
+            type="button"
+            class="link"
+        >
+            {{ item }}
+        </button>
+    </ng-container>
+</tui-breadcrumbs>
+<h3>Fade</h3>
+<tui-breadcrumbs>
+    <ng-container *ngFor="let item of items">
+        <button
+            *tuiItem
+            tuiFade
+            tuiHintOverflow
+            tuiLink
+            type="button"
+            class="link"
+        >
+            {{ item }}
+        </button>
+    </ng-container>
+</tui-breadcrumbs>
+<h3>Scroll</h3>
+<tui-breadcrumbs tuiFade>
+    <ng-container *ngFor="let item of items">
+        <button
+            *tuiItem
+            tuiLink
+            type="button"
+        >
+            {{ item }}
+        </button>
+    </ng-container>
+</tui-breadcrumbs>

projects/demo/src/modules/components/breadcrumbs/examples/3/index.less

@@ -0,0 +1,15 @@
+@import '@taiga-ui/core/styles/taiga-ui-local';
+
+:host {
+    display: block;
+    max-inline-size: 30rem;
+}
+
+[tuiLink]:last-child {
+    font-weight: bold;
+    color: var(--tui-text-primary);
+}
+
+.link {
+    .text-truncate();
+}

projects/demo/src/modules/components/breadcrumbs/examples/3/index.ts

@@ -0,0 +1,25 @@
+import {NgForOf} from '@angular/common';
+import {Component} from '@angular/core';
+import {changeDetection} from '@demo/emulate/change-detection';
+import {encapsulation} from '@demo/emulate/encapsulation';
+import {TuiItem} from '@taiga-ui/cdk';
+import {TuiHint, TuiLink} from '@taiga-ui/core';
+import {TuiBreadcrumbs, tuiBreadcrumbsOptionsProvider, TuiFade} from '@taiga-ui/kit';
+
+@Component({
+    standalone: true,
+    imports: [NgForOf, TuiBreadcrumbs, TuiFade, TuiHint, TuiItem, TuiLink],
+    templateUrl: './index.html',
+    styleUrls: ['./index.less'],
+    encapsulation,
+    changeDetection,
+    providers: [tuiBreadcrumbsOptionsProvider({icon: '/'})],
+})
+export default class Example {
+    protected readonly items = [
+        'Short item',
+        'Very very long item that must overflow',
+        'Another item',
+        'One more super long item that is never gonna fit',
+    ];
+}

projects/demo/src/modules/components/breadcrumbs/index.ts

@@ -43,5 +43,6 @@ export default class Example {
     protected readonly examples = [
         {name: 'Basic'},
         {name: 'More button', description: 'Plus using DI options'},
+        {name: 'Overflow', description: 'Different overflow strategies'},
     ];
 }

projects/kit/components/breadcrumbs/breadcrumbs.component.ts

@@ -12,6 +12,7 @@ import {EMPTY_QUERY} from '@taiga-ui/cdk/constants';
 import {TuiItem} from '@taiga-ui/cdk/directives/item';
 import {TuiIcon} from '@taiga-ui/core/components/icon';
 import {tuiLinkOptionsProvider} from '@taiga-ui/core/components/link';
+import {tuiHintOptionsProvider} from '@taiga-ui/core/directives/hint';
 
 import type {TuiBreadcrumbsOptions} from './breadcrumbs.options';
 import {TUI_BREADCRUMBS_OPTIONS} from './breadcrumbs.options';
@@ -23,7 +24,10 @@ import {TUI_BREADCRUMBS_OPTIONS} from './breadcrumbs.options';
     templateUrl: './breadcrumbs.template.html',
     styleUrls: ['./breadcrumbs.style.less'],
     changeDetection: ChangeDetectionStrategy.OnPush,
-    providers: [tuiLinkOptionsProvider({appearance: 'icon'})],
+    providers: [
+        tuiLinkOptionsProvider({appearance: 'icon'}),
+        tuiHintOptionsProvider({direction: 'bottom'}),
+    ],
     host: {
         '[attr.data-size]': 'size',
     },

projects/kit/components/breadcrumbs/breadcrumbs.style.less

@@ -4,7 +4,7 @@
     block-size: 2.5rem;
     white-space: nowrap;
     font: var(--tui-font-text-s);
-    color: var(--tui-text-primary);
+    color: var(--tui-text-secondary);
 
     &[data-size='l'] {
         font: var(--tui-font-text-m);
@@ -13,6 +13,5 @@
 
 .t-icon {
     margin: 0 0.25rem;
-    opacity: 0.4;
     border: 0.25rem solid transparent;
 }

projects/kit/components/breadcrumbs/breadcrumbs.template.html

@@ -1,9 +1,12 @@
 <ng-container *ngIf="items.changes | async" />
 <ng-container *ngFor="let item of items; let last = last">
     <ng-container [ngTemplateOutlet]="item" />
-    <tui-icon
-        *ngIf="!last"
-        class="t-icon"
-        [icon]="options.icon"
-    />
+    <ng-container *ngIf="!last">
+        <tui-icon
+            *ngIf="options.icon.length > 1; else char"
+            class="t-icon"
+            [icon]="options.icon"
+        />
+        <ng-template #char>&nbsp;{{ options.icon }}&nbsp;</ng-template>
+    </ng-container>
 </ng-container>

projects/legacy/classes/control.ts

@@ -10,6 +10,7 @@ import {tuiIsPresent, tuiProvide} from '@taiga-ui/cdk/utils/miscellaneous';
 import {
     delay,
     distinctUntilChanged,
+    EMPTY,
     filter,
     map,
     merge,
@@ -138,7 +139,11 @@ export abstract class AbstractTuiControl<T>
                 filter(tuiIsPresent),
                 distinctUntilChanged(),
                 switchMap((control) =>
-                    merge(control.valueChanges, control.statusChanges),
+                    merge(
+                        control.valueChanges,
+                        control.statusChanges,
+                        (control as any).events || EMPTY,
+                    ),
                 ),
                 takeUntilDestroyed(this.destroyRef),
             )