feat(experimental): Segmented add new component (#6511)

Co-authored-by: taiga-family-bot <[email protected]>
taiga-family · Jan 22, 2024 · f982f5d · f982f5d
1 parent eef8e7d
commit f982f5d
Show file tree

Hide file tree

Showing 33 changed files with 744 additions and 52 deletions.
diff --git a/projects/addon-doc/components/example/example.component.ts b/projects/addon-doc/components/example/example.component.ts
@@ -1,5 +1,4 @@
 import {Clipboard} from '@angular/cdk/clipboard';
-import {Location as NgLocation} from '@angular/common';
 import {
     ChangeDetectionStrategy,
     Component,
@@ -8,7 +7,6 @@ import {
     Input,
     Optional,
 } from '@angular/core';
-import {ActivatedRoute, Router} from '@angular/router';
 import {LOCATION} from '@ng-web-apis/common';
 import {TuiCodeEditor, TuiDocExample} from '@taiga-ui/addon-doc/interfaces';
 import {
@@ -90,9 +88,6 @@ export class TuiDocExampleComponent {
         @Inject(TUI_IS_E2E) readonly isE2E: boolean,
         @Inject(TUI_DOC_CODE_ACTIONS)
         readonly codeActions: Array<PolymorpheusContent<TuiContextWithImplicit<string>>>,
-        @Inject(Router) private readonly router: Router,
-        @Inject(ActivatedRoute) private readonly route: ActivatedRoute,
-        @Inject(NgLocation) private readonly ngLocation: NgLocation,
         @Inject(TUI_DOC_EXAMPLE_OPTIONS) readonly options: TuiDocExampleOptions,
     ) {}
 
@@ -103,21 +98,10 @@ export class TuiDocExampleComponent {
         return this.options.tabTitles.get(fileName) || fileName;
     }
 
-    copyExampleLink(): void {
-        const hashPosition = this.location.href.indexOf('#');
-        const currentUrl =
-            hashPosition > -1
-                ? this.location.href.slice(0, Math.max(0, hashPosition))
-                : this.location.href;
-        const url = `${currentUrl}#${this.id}`;
-
-        this.setFragmentWithoutRedirect(this.id);
-        this.clipboard.copy(url);
+    copyExampleLink({href}: HTMLAnchorElement): void {
+        this.clipboard.copy(href);
         this.alerts
-            .open(this.texts[1], {
-                label: this.texts[2],
-                status: 'success',
-            })
+            .open(this.texts[1], {label: this.texts[2], status: 'success'})
             .subscribe();
     }
 
@@ -130,12 +114,4 @@ export class TuiDocExampleComponent {
             .then(() => this.loading$.next(false))
             .catch(() => this.loading$.next(false));
     }
-
-    private setFragmentWithoutRedirect(id: string | null): void {
-        const url = this.router
-            .createUrlTree([], {relativeTo: this.route, fragment: id || ''})
-            .toString();
-
-        this.ngLocation.go(url);
-    }
 }
diff --git a/projects/addon-doc/components/example/example.module.ts b/projects/addon-doc/components/example/example.module.ts
@@ -1,6 +1,7 @@
 import {ClipboardModule} from '@angular/cdk/clipboard';
 import {CommonModule} from '@angular/common';
 import {NgModule} from '@angular/core';
+import {RouterModule} from '@angular/router';
 import {TuiMapperPipeModule} from '@taiga-ui/cdk';
 import {TuiButtonModule, TuiLoaderModule} from '@taiga-ui/core';
 import {TuiTabsModule} from '@taiga-ui/kit';
@@ -22,6 +23,7 @@ import {TuiDocExampleGetTabsPipe} from './example-get-tabs.pipe';
         PolymorpheusModule,
         TuiMapperPipeModule,
         TuiLoaderModule,
+        RouterModule,
     ],
     declarations: [TuiDocExampleComponent, TuiDocExampleGetTabsPipe],
     exports: [TuiDocExampleComponent, TuiDocExampleGetTabsPipe],

diff --git a/projects/addon-doc/components/example/example.template.html b/projects/addon-doc/components/example/example.template.html
@@ -6,17 +6,19 @@
         *polymorpheusOutlet="heading as text"
         [textContent]="text"
     ></span>
-    <button
+    <a
         *ngIf="id"
         appearance="icon"
+        routerLink="."
         size="xs"
         tuiIconButton
         type="button"
         class="t-link-icon"
+        [fragment]="id"
         [icon]="options.linkIcon"
         [title]="copy$ | async"
-        (click)="copyExampleLink()"
-    ></button>
+        (click)="copyExampleLink($any($event.currentTarget))"
+    ></a>
 </h3>
 <h4
     *ngIf="description"

diff --git a/projects/cdk/utils/dom/element-checks.ts b/projects/cdk/utils/dom/element-checks.ts
@@ -18,9 +18,8 @@ export function tuiIsElement(
     return !!node && 'nodeType' in node && node.nodeType === Node.ELEMENT_NODE;
 }
 
-export function tuiIsHTMLElement(node: unknown): node is HTMLElement {
-    // TODO: iframe warning
-    return node instanceof HTMLElement;
+export function tuiIsHTMLElement(node: any): node is HTMLElement {
+    return !!node && node instanceof node.ownerDocument.defaultView.HTMLElement;
 }
 
 export function tuiIsTextNode(node: Node): node is Text {

diff --git a/projects/demo/src/modules/app/app.routes.ts b/projects/demo/src/modules/app/app.routes.ts
@@ -400,6 +400,15 @@ export const ROUTES: Routes = [
             title: 'Rating',
         },
     },
+    {
+        path: 'experimental/segmented',
+        loadChildren: async () =>
+            (await import('../experimental/segmented/segmented.module'))
+                .ExampleTuiSegmentedModule,
+        data: {
+            title: 'Segmented',
+        },
+    },
     {
         path: 'experimental/sensitive',
         loadChildren: async () =>

diff --git a/projects/demo/src/modules/app/pages.ts b/projects/demo/src/modules/app/pages.ts
@@ -936,18 +936,18 @@ export const pages: TuiDocPages = [
         keywords: 'overflow, ellipsis, gradient, clamp, line',
         route: '/experimental/fade',
     },
-    {
-        section: 'Experimental',
-        title: 'Header',
-        keywords: 'header, заголовок, item',
-        route: '/experimental/header',
-    },
     {
         section: 'Experimental',
         title: 'Icon',
         keywords: 'icons, image, картинка, свг, svg, графика, иконка',
         route: '/experimental/icon',
     },
+    {
+        section: 'Experimental',
+        title: 'Header',
+        keywords: 'header, заголовок, item',
+        route: '/experimental/header',
+    },
     {
         section: 'Experimental',
         title: 'ProgressSegmented ',
@@ -961,6 +961,12 @@ export const pages: TuiDocPages = [
         keywords: 'рейтинг, оценка, звезда, rating, star, rate',
         route: '/experimental/rating',
     },
+    {
+        section: 'Experimental',
+        title: 'Segmented',
+        keywords: 'tabs, control, radio, navigation, навигация, вкладки, таб',
+        route: '/experimental/segmented',
+    },
     {
         section: 'Experimental',
         title: 'Sensitive',

diff --git a/projects/demo/src/modules/experimental/segmented/examples/1/index.html b/projects/demo/src/modules/experimental/segmented/examples/1/index.html
@@ -0,0 +1,13 @@
+<tui-segmented
+    *ngFor="let size of sizes"
+    [size]="size"
+>
+    <button>
+        <tui-icon icon="tuiIconSun"></tui-icon>
+        All
+        <tui-badge-notification [size]="size">3</tui-badge-notification>
+        <tui-icon icon="tuiIconMoon"></tui-icon>
+    </button>
+    <button>Incoming</button>
+    <button>Outgoing</button>
+</tui-segmented>
diff --git a/projects/demo/src/modules/experimental/segmented/examples/1/index.less b/projects/demo/src/modules/experimental/segmented/examples/1/index.less
@@ -0,0 +1,6 @@
+:host {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 1rem;
+}
diff --git a/projects/demo/src/modules/experimental/segmented/examples/1/index.ts b/projects/demo/src/modules/experimental/segmented/examples/1/index.ts
@@ -0,0 +1,14 @@
+import {Component} from '@angular/core';
+import {changeDetection} from '@demo/emulate/change-detection';
+import {encapsulation} from '@demo/emulate/encapsulation';
+
+@Component({
+    selector: 'tui-segmented-example-1',
+    templateUrl: './index.html',
+    styleUrls: ['./index.less'],
+    encapsulation,
+    changeDetection,
+})
+export class TuiSegmentedExample1 {
+    readonly sizes = ['s', 'm', 'l'] as const;
+}
diff --git a/projects/demo/src/modules/experimental/segmented/examples/2/index.html b/projects/demo/src/modules/experimental/segmented/examples/2/index.html
@@ -0,0 +1,9 @@
+<tui-segmented>
+    <button>Dynamic width</button>
+    <button>Items</button>
+</tui-segmented>
+
+<tui-segmented class="full">
+    <button>Fixed width</button>
+    <button tuiFade>with fadeout effect</button>
+</tui-segmented>
diff --git a/projects/demo/src/modules/experimental/segmented/examples/2/index.less b/projects/demo/src/modules/experimental/segmented/examples/2/index.less
@@ -0,0 +1,14 @@
+:host {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 1rem;
+}
+
+.full {
+    width: 100%;
+
+    & > * {
+        flex: 1;
+    }
+}
diff --git a/projects/demo/src/modules/experimental/segmented/examples/2/index.ts b/projects/demo/src/modules/experimental/segmented/examples/2/index.ts
@@ -0,0 +1,12 @@
+import {Component} from '@angular/core';
+import {changeDetection} from '@demo/emulate/change-detection';
+import {encapsulation} from '@demo/emulate/encapsulation';
+
+@Component({
+    selector: 'tui-segmented-example-2',
+    templateUrl: './index.html',
+    styleUrls: ['./index.less'],
+    encapsulation,
+    changeDetection,
+})
+export class TuiSegmentedExample2 {}
diff --git a/projects/demo/src/modules/experimental/segmented/examples/3/index.html b/projects/demo/src/modules/experimental/segmented/examples/3/index.html
@@ -0,0 +1,25 @@
+<header>
+    <tui-segmented
+        class="colors"
+        [(activeItemIndex)]="active"
+    >
+        <button
+            *ngFor="let button of buttons; let index = index"
+            [class.active]="index === active"
+        >
+            {{ button }}
+        </button>
+    </tui-segmented>
+</header>
+
+<tui-segmented [style.border-radius.rem]="10">
+    <button>Border radius</button>
+    <button>Can be</button>
+    <button>Customized</button>
+</tui-segmented>
+
+<tui-segmented [style.font-weight]="'bold'">
+    <button>Fonts</button>
+    <button>Can also be</button>
+    <button>Overridden</button>
+</tui-segmented>
diff --git a/projects/demo/src/modules/experimental/segmented/examples/3/index.less b/projects/demo/src/modules/experimental/segmented/examples/3/index.less
@@ -0,0 +1,24 @@
+:host {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 1rem;
+}
+
+header {
+    background: var(--tui-clear);
+    box-shadow: 0 -10rem 0 10.5rem var(--tui-clear);
+}
+
+.colors {
+    color: var(--tui-base-01);
+
+    &:before {
+        color: var(--tui-link);
+        box-shadow: none;
+    }
+
+    .active {
+        color: var(--tui-text-01-night);
+    }
+}
diff --git a/projects/demo/src/modules/experimental/segmented/examples/3/index.ts b/projects/demo/src/modules/experimental/segmented/examples/3/index.ts
@@ -0,0 +1,15 @@
+import {Component} from '@angular/core';
+import {changeDetection} from '@demo/emulate/change-detection';
+import {encapsulation} from '@demo/emulate/encapsulation';
+
+@Component({
+    selector: 'tui-segmented-example-3',
+    templateUrl: './index.html',
+    styleUrls: ['./index.less'],
+    encapsulation,
+    changeDetection,
+})
+export class TuiSegmentedExample3 {
+    readonly buttons = ['Track active index', 'To color tabs', 'Differently'];
+    active = 0;
+}
diff --git a/projects/demo/src/modules/experimental/segmented/examples/4/index.html b/projects/demo/src/modules/experimental/segmented/examples/4/index.html
@@ -0,0 +1,80 @@
+<strong>Buttons</strong>
+<tui-segmented>
+    <button>Buttons</button>
+    <button>Can be</button>
+    <button>Used</button>
+</tui-segmented>
+<hr />
+<strong>Links</strong>
+<tui-segmented>
+    <a
+        routerLink="/components/link"
+        routerLinkActive
+    >
+        Use routerLink
+    </a>
+    <a
+        routerLink="/experimental/segmented"
+        routerLinkActive
+        [routerLinkActiveOptions]="options"
+    >
+        And routerLinkActive
+    </a>
+    <a
+        fragment="content"
+        routerLink="/experimental/segmented"
+        routerLinkActive
+        [routerLinkActiveOptions]="options"
+    >
+        To work with links
+    </a>
+</tui-segmented>
+<hr />
+<strong>Icons</strong>
+<tui-segmented>
+    <button>
+        <tui-icon icon="tuiIconSun"></tui-icon>
+    </button>
+    <button>
+        <tui-icon icon="tuiIconMoon"></tui-icon>
+    </button>
+</tui-segmented>
+<hr />
+<strong>Control</strong>
+<tui-segmented>
+    <label>
+        <input
+            name="radio"
+            type="radio"
+            value="a"
+            [(ngModel)]="selected"
+        />
+        Use radio inside
+    </label>
+    <label>
+        <input
+            name="radio"
+            type="radio"
+            value="b"
+            [(ngModel)]="selected"
+        />
+        It would be hidden
+    </label>
+    <label>
+        <input
+            name="radio"
+            type="radio"
+            value="c"
+            [(ngModel)]="selected"
+        />
+        Automatically
+    </label>
+</tui-segmented>
+<button
+    appearance="floating"
+    size="s"
+    tuiButton
+    (click)="selected = 'b'"
+>
+    Select second option
+</button>
diff --git a/projects/demo/src/modules/experimental/segmented/examples/4/index.less b/projects/demo/src/modules/experimental/segmented/examples/4/index.less
@@ -0,0 +1,10 @@
+:host {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 1rem;
+}
+
+hr {
+    width: 100%;
+}