feat(kit): Breadcrumbs add itemsLimit option (#9370)

Co-authored-by: taiga-family-bot <taiga-family-bot@users.noreply.github.com>

projects/addon-commerce/components/input-card-group/input-card-group.style.less

@@ -177,7 +177,7 @@
 
 .t-icon {
     cursor: pointer;
-    border: 0.25rem solid transparent;
+    border-width: 0.25rem;
 }
 
 .t-label {

projects/addon-doc/components/navigation/navigation.style.less

@@ -13,7 +13,7 @@
     margin: 1.25rem;
 
     ::ng-deep tui-icon {
-        border: 0.25rem solid transparent;
+        border-width: 0.25rem;
     }
 }
 

projects/addon-table/components/reorder/reorder.style.less

@@ -46,7 +46,7 @@
 .t-icon {
     margin-right: 0.5rem;
     color: var(--tui-text-tertiary);
-    border: 0.25rem solid transparent;
+    border-width: 0.25rem;
 }
 
 .t-button {

projects/addon-table/components/table/th/th.style.less

@@ -156,5 +156,5 @@
 }
 
 .t-icon {
-    border: 0.25rem solid transparent;
+    border-width: 0.25rem;
 }

projects/cdk/constants/used-icons.ts

@@ -42,6 +42,7 @@ export const TUI_USED_ICONS = [
     '@tui.circle-help',
     '@tui.x',
     '@tui.chevron-right',
+    '@tui.ellipsis',
     '@tui.chevron-left',
     '@tui.minus',
     '@tui.file',

projects/core/tokens/common-icons.ts

@@ -1,12 +1,14 @@
 import type {Provider} from '@angular/core';
 import {tuiCreateToken, tuiProvideOptions} from '@taiga-ui/cdk/utils/miscellaneous';
 
+// TODO: Rename `ellipsis` to `more` in the next major version
 const COMMON_ICONS: TuiCommonIcons = {
     check: '@tui.check',
     close: '@tui.x',
     error: '@tui.circle-alert',
     more: '@tui.chevron-right',
     search: '@tui.search',
+    ellipsis: '@tui.ellipsis',
 };
 
 export interface TuiCommonIcons {
@@ -15,6 +17,7 @@ export interface TuiCommonIcons {
     readonly error: string;
     readonly more: string;
     readonly search: string;
+    readonly ellipsis: string;
 }
 
 export const TUI_COMMON_ICONS = tuiCreateToken(COMMON_ICONS);

projects/demo/src/modules/components/animations/examples/4/index.less

@@ -4,7 +4,5 @@ li {
 }
 
 tui-icon {
-    inline-size: 1.5rem;
-    block-size: 1.5rem;
-    border: 0.25rem solid transparent;
+    border-width: 0.25rem;
 }

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

@@ -1,45 +1,103 @@
-<tui-breadcrumbs [style.color]="'red'">
-    <button
-        *tuiItem
-        appearance="secondary"
-        iconStart="@tui.ellipsis"
-        size="xs"
-        tuiDropdownOpen
-        tuiIconButton
-        type="button"
-        [tuiDropdown]="content"
-    >
-        More
-    </button>
-    <ng-template #content>
-        <tui-data-list>
+<h3 tuiTitle>
+    <strong>Truncate</strong>
+    <span tuiSubtitle>
+        Using
+        <code>.text-truncate()</code>
+        mixin
+    </span>
+</h3>
+<tui-breadcrumbs>
+    <ng-container *ngFor="let item of items; let last = last">
+        <button
+            *tuiItem
+            tuiHintOverflow
+            tuiLink
+            type="button"
+            class="link"
+            [class.link_last]="last"
+        >
+            {{ item }}
+        </button>
+    </ng-container>
+</tui-breadcrumbs>
+<hr />
+<h3 tuiTitle>
+    <strong>Fade</strong>
+    <span tuiSubtitle>
+        Combining
+        <code>.text-truncate()</code>
+        mixin with
+        <code>
+            <a
+                tuiLink
+                [routerLink]="fade"
+            >
+                Fade
+            </a>
+        </code>
+        directive
+    </span>
+</h3>
+<tui-breadcrumbs>
+    <ng-container *ngFor="let item of items; let last = last">
+        <button
+            *tuiItem
+            tuiFade
+            tuiHintOverflow
+            tuiLink
+            type="button"
+            class="link"
+            [class.link_last]="last"
+        >
+            {{ item }}
+        </button>
+    </ng-container>
+</tui-breadcrumbs>
+<hr />
+<h3 tuiTitle>
+    <strong>Scroll</strong>
+    <span tuiSubtitle>
+        Putting
+        <code>
             <a
-                *tuiRepeatTimes="let index of items.length - max"
-                tuiOption
-                [href]="items[index]?.link"
+                tuiLink
+                [routerLink]="fade"
             >
-                {{ items[index]?.caption }}
+                Fade
             </a>
-        </tui-data-list>
-    </ng-template>
-    <ng-container *tuiRepeatTimes="let index of max">
-        <a
+        </code>
+        directive on entire component
+    </span>
+</h3>
+<tui-breadcrumbs tuiFade>
+    <ng-container *ngFor="let item of items; let last = last">
+        <button
+            *tuiItem
+            tuiLink
+            type="button"
+            [class.link_last]="last"
+        >
+            {{ item }}
+        </button>
+    </ng-container>
+</tui-breadcrumbs>
+<hr />
+<h3 tuiTitle>
+    <strong>Collapse</strong>
+    <span tuiSubtitle>
+        Using
+        <code>itemsLimit: number</code>
+    </span>
+</h3>
+<tui-breadcrumbs [itemsLimit]="10">
+    <ng-container *ngFor="let item of items; let last = last">
+        <button
             *tuiItem
-            appearance="link"
             tuiLink
-            [href]="items[index + items.length - max]?.link"
+            type="button"
+            [class.link_last]="last"
         >
-            {{ items[index + items.length - max]?.caption }}
-        </a>
+            {{ item }}
+        </button>
     </ng-container>
 </tui-breadcrumbs>
-<p>
-    <tui-input-number
-        [max]="4"
-        [min]="2"
-        [step]="1"
-        [(ngModel)]="max"
-    >
-        Max tabs
-    </tui-input-number>
-</p>

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

@@ -5,11 +5,16 @@
     max-inline-size: 30rem;
 }
 
-[tuiLink]:last-child {
-    font-weight: bold;
-    color: var(--tui-text-primary);
+hr,
+h3 {
+    margin: 1rem 0;
 }
 
 .link {
     .text-truncate();
+
+    &_last {
+        font-weight: bold;
+        color: var(--tui-text-primary);
+    }
 }

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

@@ -1,58 +1,37 @@
+import {NgForOf} from '@angular/common';
 import {Component} from '@angular/core';
-import {FormsModule} from '@angular/forms';
+import {RouterLink} from '@angular/router';
 import {changeDetection} from '@demo/emulate/change-detection';
 import {encapsulation} from '@demo/emulate/encapsulation';
-import {TuiItem, TuiRepeatTimes} from '@taiga-ui/cdk';
-import {TuiButton, TuiDataList, TuiDropdown, TuiLink} from '@taiga-ui/core';
-import {TuiBreadcrumbs, tuiBreadcrumbsOptionsProvider} from '@taiga-ui/kit';
-import {TuiInputNumberModule} from '@taiga-ui/legacy';
+import {DemoRoute} from '@demo/routes';
+import {TuiItem} from '@taiga-ui/cdk';
+import {TuiHint, TuiLink, TuiTitle} from '@taiga-ui/core';
+import {TuiBreadcrumbs, tuiBreadcrumbsOptionsProvider, TuiFade} from '@taiga-ui/kit';
 
 @Component({
     standalone: true,
     imports: [
-        FormsModule,
+        NgForOf,
+        RouterLink,
         TuiBreadcrumbs,
-        TuiButton,
-        TuiDataList,
-        TuiDropdown,
-        TuiInputNumberModule,
+        TuiFade,
+        TuiHint,
         TuiItem,
         TuiLink,
-        TuiRepeatTimes,
+        TuiTitle,
     ],
     templateUrl: './index.html',
+    styleUrls: ['./index.less'],
     encapsulation,
     changeDetection,
-    providers: [
-        tuiBreadcrumbsOptionsProvider({
-            icon: '@tui.arrow-right',
-            size: 'l',
-        }),
-    ],
+    providers: [tuiBreadcrumbsOptionsProvider({icon: '/'})],
 })
 export default class Example {
+    protected readonly fade = DemoRoute.Fade;
     protected readonly items = [
-        {
-            caption: 'Open Source',
-            link: 'https://github.com',
-        },
-        {
-            caption: 'Angular',
-            link: 'https://github.com/topics/angular',
-        },
-        {
-            caption: 'Taiga UI',
-            link: 'https://github.com/taiga-family/taiga-ui',
-        },
-        {
-            caption: 'Components',
-            link: 'https://taiga-ui.dev',
-        },
-        {
-            caption: 'Breadcrumbs',
-            link: 'https://taiga-ui.dev/navigation/breadcrumbs',
-        },
+        'First item',
+        'Very very long second item that must overflow',
+        'Third item',
+        'One last super long item that is never gonna fit',
     ];
-
-    protected max = 4;
 }