diff --git a/projects/addon-charts/components/bar-chart/bar-chart.style.less b/projects/addon-charts/components/bar-chart/bar-chart.style.less index fa6dda79e0be..65d361cdd940 100644 --- a/projects/addon-charts/components/bar-chart/bar-chart.style.less +++ b/projects/addon-charts/components/bar-chart/bar-chart.style.less @@ -32,7 +32,7 @@ } .set { - border-radius: var(--tui-radius); + border-radius: var(--tui-radius-m); pointer-events: none; outline: none; diff --git a/projects/addon-charts/components/bar/bar.style.less b/projects/addon-charts/components/bar/bar.style.less index db07719eac46..dbb408d18aa1 100644 --- a/projects/addon-charts/components/bar/bar.style.less +++ b/projects/addon-charts/components/bar/bar.style.less @@ -2,8 +2,8 @@ display: flex; min-width: 2px; flex-direction: column-reverse; - border-top-left-radius: var(--tui-radius-xl); - border-top-right-radius: var(--tui-radius-xl); + border-top-left-radius: var(--tui-radius-l); + border-top-right-radius: var(--tui-radius-l); overflow: hidden; &:not([data-tui-background]) { diff --git a/projects/addon-commerce/components/card/card.style.less b/projects/addon-commerce/components/card/card.style.less index f289f232bdb9..c298293c996b 100644 --- a/projects/addon-commerce/components/card/card.style.less +++ b/projects/addon-commerce/components/card/card.style.less @@ -34,7 +34,7 @@ .fullsize(); backface-visibility: hidden; background: inherit; - border-radius: var(--tui-radius); + border-radius: var(--tui-radius-m); } .box { diff --git a/projects/addon-commerce/components/input-CVC/input-CVC.style.less b/projects/addon-commerce/components/input-CVC/input-CVC.style.less index 96755b4355e7..7d6835f88f32 100644 --- a/projects/addon-commerce/components/input-CVC/input-CVC.style.less +++ b/projects/addon-commerce/components/input-CVC/input-CVC.style.less @@ -1,7 +1,7 @@ :host { display: block; max-width: 176px; - border-radius: var(--tui-radius); + border-radius: var(--tui-radius-m); } .input { diff --git a/projects/addon-commerce/components/input-card-grouped/input-card-grouped.style.less b/projects/addon-commerce/components/input-card-grouped/input-card-grouped.style.less index cb571c9ee61d..169e4b28244b 100644 --- a/projects/addon-commerce/components/input-card-grouped/input-card-grouped.style.less +++ b/projects/addon-commerce/components/input-card-grouped/input-card-grouped.style.less @@ -11,9 +11,9 @@ :host { display: block; - height: var(--tui-height-xl); + height: var(--tui-height-l); width: @width-full; - border-radius: var(--tui-radius); + border-radius: var(--tui-radius-m); overflow: hidden; &._mobile { diff --git a/projects/addon-commerce/components/input-card/input-card.style.less b/projects/addon-commerce/components/input-card/input-card.style.less index 49a7d6ca9d26..f1bf80022a7a 100644 --- a/projects/addon-commerce/components/input-card/input-card.style.less +++ b/projects/addon-commerce/components/input-card/input-card.style.less @@ -2,7 +2,7 @@ :host { display: block; - border-radius: var(--tui-radius); + border-radius: var(--tui-radius-m); } .input { diff --git a/projects/addon-commerce/components/input-expire/input-expire.style.less b/projects/addon-commerce/components/input-expire/input-expire.style.less index f928ebb8ecb2..37d11cc29933 100644 --- a/projects/addon-commerce/components/input-expire/input-expire.style.less +++ b/projects/addon-commerce/components/input-expire/input-expire.style.less @@ -3,7 +3,7 @@ :host { display: block; max-width: 176px; - border-radius: var(--tui-radius); + border-radius: var(--tui-radius-m); } .input { diff --git a/projects/addon-doc/src/components/copy/copy.component.ts b/projects/addon-doc/src/components/copy/copy.component.ts index c6c6d3ee84fe..b215388accc1 100644 --- a/projects/addon-doc/src/components/copy/copy.component.ts +++ b/projects/addon-doc/src/components/copy/copy.component.ts @@ -1,8 +1,8 @@ -import {ChangeDetectionStrategy, Component, HostBinding, Inject} from '@angular/core'; +import {ChangeDetectionStrategy, Component, Inject} from '@angular/core'; import {TuiDestroyService, tuiPure} from '@taiga-ui/cdk'; import {TUI_COPY_TEXTS} from '@taiga-ui/kit'; import {Observable, Subject, timer} from 'rxjs'; -import {mapTo, startWith, switchMapTo, takeUntil} from 'rxjs/operators'; +import {mapTo, startWith, switchMapTo} from 'rxjs/operators'; const COPIED_TIMEOUT = 1500; @@ -17,19 +17,9 @@ const COPIED_TIMEOUT = 1500; export class TuiDocCopyComponent { private readonly copy$ = new Subject(); - @HostBinding('attr.title') - title = ''; - - copiedMessage = ''; - constructor( - @Inject(TuiDestroyService) destroy$: Observable, - @Inject(TUI_COPY_TEXTS) texts$: Observable<[string, string]>, - ) { - texts$.pipe(takeUntil(destroy$)).subscribe(texts => { - [this.title, this.copiedMessage] = texts; - }); - } + @Inject(TUI_COPY_TEXTS) readonly texts$: Observable<[string, string]>, + ) {} @tuiPure get copied$(): Observable { diff --git a/projects/addon-doc/src/components/copy/copy.style.less b/projects/addon-doc/src/components/copy/copy.style.less index ad7b925ec719..4b13d4473461 100644 --- a/projects/addon-doc/src/components/copy/copy.style.less +++ b/projects/addon-doc/src/components/copy/copy.style.less @@ -2,7 +2,8 @@ :host { position: relative; - display: block; + display: inline-block; + vertical-align: middle; } .copy { @@ -17,6 +18,10 @@ } } +.initial:empty:before { + content: attr(data-text); +} + .content { .transition(transform); display: flex; diff --git a/projects/addon-doc/src/components/copy/copy.template.html b/projects/addon-doc/src/components/copy/copy.template.html index a3876b6500c9..6a3a1af137d6 100644 --- a/projects/addon-doc/src/components/copy/copy.template.html +++ b/projects/addon-doc/src/components/copy/copy.template.html @@ -1,15 +1,17 @@ diff --git a/projects/addon-doc/src/components/demo/demo.style.less b/projects/addon-doc/src/components/demo/demo.style.less index 36fa86d11a9b..19ea3fa964b0 100644 --- a/projects/addon-doc/src/components/demo/demo.style.less +++ b/projects/addon-doc/src/components/demo/demo.style.less @@ -29,7 +29,7 @@ .shadow(2); display: flex; border: 1px solid var(--tui-base-03); - border-radius: var(--tui-radius); + border-radius: var(--tui-radius-m); max-width: 100%; min-height: 96px; width: 100%; diff --git a/projects/addon-doc/src/components/example/example.component.ts b/projects/addon-doc/src/components/example/example.component.ts index 70471ece5bd5..c61f83f314bc 100644 --- a/projects/addon-doc/src/components/example/example.component.ts +++ b/projects/addon-doc/src/components/example/example.component.ts @@ -1,3 +1,4 @@ +import {Clipboard} from '@angular/cdk/clipboard'; import { Attribute, ChangeDetectionStrategy, @@ -11,7 +12,6 @@ import {TuiNotification, TuiNotificationsService} from '@taiga-ui/core'; import {TUI_COPY_TEXTS} from '@taiga-ui/kit'; import {Observable} from 'rxjs'; import {map} from 'rxjs/operators'; -import {ClipboardCopyService} from '../../services/clipboard-copy.service'; import {TUI_DOC_EXAMPLE_TEXTS} from '../../tokens/i18n'; // Ambient type cannot be used without dynamic https://github.com/angular/angular/issues/23395 @@ -41,8 +41,7 @@ export class TuiDocExampleComponent { constructor( @Attribute('id') readonly id: string | null, - @Inject(ClipboardCopyService) - private readonly clipboardCopyService: ClipboardCopyService, + @Inject(Clipboard) private readonly clipboard: Clipboard, @Inject(TuiNotificationsService) private readonly notifications: TuiNotificationsService, @Inject(WINDOW) private readonly windowRef: Window, @@ -81,8 +80,7 @@ export class TuiDocExampleComponent { : this.windowRef.location.href; const url = `${currentUrl}#${this.id}`; - this.clipboardCopyService.copyToClipboard(url); - + this.clipboard.copy(url); this.notifications .show(this.texts[1], { label: this.texts[2], @@ -90,8 +88,4 @@ export class TuiDocExampleComponent { }) .subscribe(); } - - copyCodeExample() { - this.clipboardCopyService.copyToClipboard(this.code); - } } diff --git a/projects/addon-doc/src/components/example/example.module.ts b/projects/addon-doc/src/components/example/example.module.ts index b0d0e609a812..0e5379117843 100644 --- a/projects/addon-doc/src/components/example/example.module.ts +++ b/projects/addon-doc/src/components/example/example.module.ts @@ -1,3 +1,4 @@ +import {ClipboardModule} from '@angular/cdk/clipboard'; import {CommonModule} from '@angular/common'; import {NgModule} from '@angular/core'; import {TuiButtonModule} from '@taiga-ui/core'; @@ -9,6 +10,7 @@ import {TuiDocExampleComponent} from './example.component'; @NgModule({ imports: [ CommonModule, + ClipboardModule, TuiTabsModule, TuiButtonModule, TuiDocCopyModule, diff --git a/projects/addon-doc/src/components/example/example.style.less b/projects/addon-doc/src/components/example/example.style.less index afa9212526ea..8609f7dbbf3e 100644 --- a/projects/addon-doc/src/components/example/example.style.less +++ b/projects/addon-doc/src/components/example/example.style.less @@ -37,7 +37,7 @@ position: relative; margin-top: 24px; border: 1px solid var(--tui-base-03); - border-radius: var(--tui-radius); + border-radius: var(--tui-radius-m); box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1); @media @mobile { diff --git a/projects/addon-doc/src/components/example/example.template.html b/projects/addon-doc/src/components/example/example.template.html index 987efa148083..32673ef57460 100644 --- a/projects/addon-doc/src/components/example/example.template.html +++ b/projects/addon-doc/src/components/example/example.template.html @@ -28,9 +28,10 @@

{{description}}

- - {{copy$ | async}} - + diff --git a/projects/addon-doc/src/components/navigation/navigation.module.ts b/projects/addon-doc/src/components/navigation/navigation.module.ts index 563edb637606..4414443d0999 100644 --- a/projects/addon-doc/src/components/navigation/navigation.module.ts +++ b/projects/addon-doc/src/components/navigation/navigation.module.ts @@ -10,6 +10,7 @@ import { TuiExpandModule, TuiHostedDropdownModule, TuiLinkModule, + TuiModeModule, TuiPrimitiveTextfieldModule, TuiScrollbarModule, TuiSvgModule, @@ -28,6 +29,7 @@ import {TuiDocNavigationComponent} from './navigation.component'; TuiTextfieldControllerModule, TuiActiveZoneModule, TuiLetModule, + TuiModeModule, TuiLinkModule, TuiExpandModule, TuiHostedDropdownModule, diff --git a/projects/addon-doc/src/components/navigation/navigation.style.less b/projects/addon-doc/src/components/navigation/navigation.style.less index 2c7112f62754..7cd4a1dcf9bd 100644 --- a/projects/addon-doc/src/components/navigation/navigation.style.less +++ b/projects/addon-doc/src/components/navigation/navigation.style.less @@ -47,7 +47,6 @@ .text-body-m(); margin-left: 8px; line-height: 44px; - color: var(--tui-text-02); &_small { margin-left: 16px; @@ -62,4 +61,19 @@ margin-left: 0; line-height: 44px; } + + &_active { + color: var(--tui-text-01); + } +} + +.chevron { + .transition(transform); + width: 16px; + height: 16px; + margin: -4px 4px 0 -3px; + + &_active { + transform: rotate(90deg); + } } diff --git a/projects/addon-doc/src/components/navigation/navigation.template.html b/projects/addon-doc/src/components/navigation/navigation.template.html index d138478fda67..18c39d87f031 100644 --- a/projects/addon-doc/src/components/navigation/navigation.template.html +++ b/projects/addon-doc/src/components/navigation/navigation.template.html @@ -39,7 +39,11 @@