Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 3 commits into from
Oct 3, 2024
Merged
Show file tree
Hide file tree
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
Expand Up @@ -105,4 +105,12 @@ tui-dropdown-mobile._sheet {
touch-action: inherit;
visibility: inherit;
}

tui-root {
visibility: visible;

.t-root-content {
visibility: hidden;
}
}
}
5 changes: 4 additions & 1 deletion projects/cdk/classes/control.ts
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ import {tuiProvide, tuiPure} from '@taiga-ui/cdk/utils';
import {
delay,
distinctUntilChanged,
EMPTY,
filter,
map,
merge,
Expand Down Expand Up @@ -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) =>
waterplea marked this conversation as resolved.
Show resolved Hide resolved
merge(c.valueChanges, c.statusChanges, (c as any).events || EMPTY),
),
takeUntilDestroyed(),
)
.subscribe(() => this.update());
Expand Down
8 changes: 8 additions & 0 deletions projects/core/styles/mixins/mixins.less
Original file line number Diff line number Diff line change
Expand Up @@ -146,3 +146,11 @@
}
}
}

.text-truncate() {
.text-overflow();

flex: 1;
min-inline-size: 0;
max-inline-size: max-content;
}
7 changes: 7 additions & 0 deletions projects/core/styles/mixins/mixins.scss
Original file line number Diff line number Diff line change
Expand Up @@ -145,3 +145,10 @@
}
}
}

@mixin text-truncate() {
@include text-overflow();
flex: 1;
min-inline-size: 0;
max-inline-size: max-content;
}
Empty file.
Empty file.
Original file line number Diff line number Diff line change
@@ -0,0 +1,36 @@
<h3>Truncate</h3>
<tui-breadcrumbs>
<ng-container *ngFor="let item of items">
<button

Check failure on line 4 in projects/demo/src/modules/components/breadcrumbs/examples/3/index.html

View workflow job for this annotation

GitHub Actions / Lint

Type for <button> is missing
*tuiItem
splincode marked this conversation as resolved.
Show resolved Hide resolved
tuiLink
class="link"
>
{{ item }}
</button>
</ng-container>
</tui-breadcrumbs>
<h3>Fade</h3>
<tui-breadcrumbs>
<ng-container *ngFor="let item of items">
<button

Check failure on line 16 in projects/demo/src/modules/components/breadcrumbs/examples/3/index.html

View workflow job for this annotation

GitHub Actions / Lint

Type for <button> is missing
*tuiItem
tuiFade
tuiLink
class="link"
>
{{ item }}
</button>
</ng-container>
</tui-breadcrumbs>
<h3>Scroll</h3>
<tui-breadcrumbs tuiFade>
<ng-container *ngFor="let item of items">
<button

Check failure on line 29 in projects/demo/src/modules/components/breadcrumbs/examples/3/index.html

View workflow job for this annotation

GitHub Actions / Lint

Type for <button> is missing
*tuiItem
tuiLink
>
{{ item }}
</button>
</ng-container>
</tui-breadcrumbs>
Original file line number Diff line number Diff line change
@@ -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();
}
Original file line number Diff line number Diff line change
@@ -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 {TuiLink} from '@taiga-ui/core';
import {TuiBreadcrumbs, tuiBreadcrumbsOptionsProvider, TuiFade} from '@taiga-ui/kit';

@Component({
standalone: true,
imports: [TuiBreadcrumbs, TuiItem, TuiLink, NgForOf, TuiFade],
templateUrl: './index.html',
styleUrls: ['./index.less'],
providers: [tuiBreadcrumbsOptionsProvider({icon: '/'})],
encapsulation,
changeDetection,
})
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',
];
}
Original file line number Diff line number Diff line change
Expand Up @@ -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'},
];
}
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand All @@ -13,6 +13,5 @@

.t-icon {
margin: 0 0.25rem;
opacity: 0.4;
border: 0.25rem solid transparent;
}
13 changes: 8 additions & 5 deletions projects/kit/components/breadcrumbs/breadcrumbs.template.html
Original file line number Diff line number Diff line change
@@ -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>
7 changes: 6 additions & 1 deletion projects/legacy/classes/control.ts
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ import {tuiIsPresent, tuiProvide} from '@taiga-ui/cdk/utils/miscellaneous';
import {
delay,
distinctUntilChanged,
EMPTY,
filter,
map,
merge,
Expand Down Expand Up @@ -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),
)
Expand Down
Loading