diff --git a/projects/addon-mobile/directives/dropdown-mobile/dropdown-mobile.style.less b/projects/addon-mobile/directives/dropdown-mobile/dropdown-mobile.style.less index 8dda62f417d3..2f42d36235e4 100644 --- a/projects/addon-mobile/directives/dropdown-mobile/dropdown-mobile.style.less +++ b/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; + } + } } diff --git a/projects/cdk/classes/control.ts b/projects/cdk/classes/control.ts index cfc8064c344c..8e4a9cdfae61 100644 --- a/projects/cdk/classes/control.ts +++ b/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 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()); diff --git a/projects/core/styles/mixins/mixins.less b/projects/core/styles/mixins/mixins.less index 12cc817bfe9d..8ac2b223eeec 100644 --- a/projects/core/styles/mixins/mixins.less +++ b/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; +} diff --git a/projects/core/styles/mixins/mixins.scss b/projects/core/styles/mixins/mixins.scss index 3acefce05b10..4f414f73da88 100644 --- a/projects/core/styles/mixins/mixins.scss +++ b/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; +} diff --git a/projects/demo/src/modules/components/breadcrumbs/examples/1/index.less b/projects/demo/src/modules/components/breadcrumbs/examples/1/index.less deleted file mode 100644 index e69de29bb2d1..000000000000 diff --git a/projects/demo/src/modules/components/breadcrumbs/examples/2/index.less b/projects/demo/src/modules/components/breadcrumbs/examples/2/index.less deleted file mode 100644 index e69de29bb2d1..000000000000 diff --git a/projects/demo/src/modules/components/breadcrumbs/examples/3/index.html b/projects/demo/src/modules/components/breadcrumbs/examples/3/index.html new file mode 100644 index 000000000000..876ce293abca --- /dev/null +++ b/projects/demo/src/modules/components/breadcrumbs/examples/3/index.html @@ -0,0 +1,41 @@ +

Truncate

+ + + + + +

Fade

+ + + + + +

Scroll

+ + + + + diff --git a/projects/demo/src/modules/components/breadcrumbs/examples/3/index.less b/projects/demo/src/modules/components/breadcrumbs/examples/3/index.less new file mode 100644 index 000000000000..059e3364d27c --- /dev/null +++ b/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(); +} diff --git a/projects/demo/src/modules/components/breadcrumbs/examples/3/index.ts b/projects/demo/src/modules/components/breadcrumbs/examples/3/index.ts new file mode 100644 index 000000000000..0286252a5912 --- /dev/null +++ b/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', + ]; +} diff --git a/projects/demo/src/modules/components/breadcrumbs/index.ts b/projects/demo/src/modules/components/breadcrumbs/index.ts index 9e3c4963028d..518746a24b64 100644 --- a/projects/demo/src/modules/components/breadcrumbs/index.ts +++ b/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'}, ]; } diff --git a/projects/kit/components/breadcrumbs/breadcrumbs.component.ts b/projects/kit/components/breadcrumbs/breadcrumbs.component.ts index 8155f9a4944b..d195b07675ca 100644 --- a/projects/kit/components/breadcrumbs/breadcrumbs.component.ts +++ b/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', }, diff --git a/projects/kit/components/breadcrumbs/breadcrumbs.style.less b/projects/kit/components/breadcrumbs/breadcrumbs.style.less index 4c505ad60f7e..82ceb6dfcdee 100644 --- a/projects/kit/components/breadcrumbs/breadcrumbs.style.less +++ b/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; } diff --git a/projects/kit/components/breadcrumbs/breadcrumbs.template.html b/projects/kit/components/breadcrumbs/breadcrumbs.template.html index 772ee4812718..b569b164efa5 100644 --- a/projects/kit/components/breadcrumbs/breadcrumbs.template.html +++ b/projects/kit/components/breadcrumbs/breadcrumbs.template.html @@ -1,9 +1,12 @@ - + + +  {{ options.icon }}  + diff --git a/projects/legacy/classes/control.ts b/projects/legacy/classes/control.ts index 5928fddb7ee4..63c74417f01d 100644 --- a/projects/legacy/classes/control.ts +++ b/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 filter(tuiIsPresent), distinctUntilChanged(), switchMap((control) => - merge(control.valueChanges, control.statusChanges), + merge( + control.valueChanges, + control.statusChanges, + (control as any).events || EMPTY, + ), ), takeUntilDestroyed(this.destroyRef), )