From 4635ba99be2bd7cfdb1a8a1072d429ee874201a9 Mon Sep 17 00:00:00 2001 From: Alex Inkin Date: Wed, 8 May 2024 23:27:32 +0800 Subject: [PATCH] fix(core): `Dialogs` fix page scrolling under dialogs (#7384) Signed-off-by: waterplea Co-authored-by: taiga-family-bot --- .../sheet-dialog/sheet-dialog.style.less | 8 +- .../sheet/components/sheet/sheet.style.less | 1 + .../sheets-host/sheets-host.template.html | 1 - .../components/sheet/sheet.module.ts | 3 +- .../preview-dialog.component.ts | 33 +++-- .../preview-dialog/preview-dialog.style.less | 3 +- .../preview-dialog.template.html | 9 -- .../preview-action.directive.ts | 2 +- .../focus-trap/focus-trap.directive.ts | 22 ++- .../focus-trap/focus-trap.module.ts | 9 -- projects/cdk/directives/focus-trap/index.ts | 1 - projects/cdk/directives/index.ts | 1 - projects/cdk/directives/overscroll/index.ts | 2 - .../cdk/directives/overscroll/ng-package.json | 5 - .../overscroll/overscroll.directive.ts | 129 ------------------ .../overscroll/overscroll.module.ts | 9 -- .../steps/constants/identifiers-to-replace.ts | 4 + projects/cdk/types/index.ts | 1 - projects/cdk/types/overscroll-mode.ts | 1 - .../components/dialog/dialogs.component.ts | 34 ++--- .../core/components/dialog/dialogs.style.less | 38 +++--- .../components/dialog/dialogs.template.html | 3 +- projects/core/components/root/root.style.less | 4 - .../directives/dropdown/dropdown.component.ts | 8 +- .../directives/dropdown/dropdown.style.less | 1 + .../dropdown/dropdown.template.html | 1 - projects/demo/src/modules/app/app.routes.ts | 7 - projects/demo/src/modules/app/demo-routes.ts | 1 - projects/demo/src/modules/app/pages.ts | 6 - .../block-status/examples/4/index.html | 9 +- .../block-status/examples/4/index.ts | 3 +- .../components/dialog/examples/5/index.html | 2 +- .../pdf-viewer/examples/1/index.html | 2 +- .../examples/2/actions-content.component.html | 2 +- .../sheet-dialog/examples/1/index.ts | 6 +- .../components/sheet/examples/1/index.ts | 6 +- .../overscroll/examples/1/index.html | 11 -- .../overscroll/examples/1/index.less | 7 - .../directives/overscroll/examples/1/index.ts | 12 -- .../overscroll/examples/2/index.html | 7 - .../overscroll/examples/2/index.less | 7 - .../directives/overscroll/examples/2/index.ts | 12 -- .../overscroll/examples/3/index.html | 11 -- .../overscroll/examples/3/index.less | 7 - .../directives/overscroll/examples/3/index.ts | 12 -- .../examples/import/import-module.md | 15 -- .../examples/import/insert-template.md | 3 - .../overscroll/overscroll.component.ts | 31 ----- .../overscroll/overscroll.module.ts | 29 ---- .../overscroll/overscroll.template.html | 46 ------- 50 files changed, 96 insertions(+), 491 deletions(-) delete mode 100644 projects/addon-preview/components/preview-dialog/preview-dialog.template.html delete mode 100644 projects/cdk/directives/focus-trap/focus-trap.module.ts delete mode 100644 projects/cdk/directives/overscroll/index.ts delete mode 100644 projects/cdk/directives/overscroll/ng-package.json delete mode 100644 projects/cdk/directives/overscroll/overscroll.directive.ts delete mode 100644 projects/cdk/directives/overscroll/overscroll.module.ts delete mode 100644 projects/cdk/types/overscroll-mode.ts delete mode 100644 projects/demo/src/modules/directives/overscroll/examples/1/index.html delete mode 100644 projects/demo/src/modules/directives/overscroll/examples/1/index.less delete mode 100644 projects/demo/src/modules/directives/overscroll/examples/1/index.ts delete mode 100644 projects/demo/src/modules/directives/overscroll/examples/2/index.html delete mode 100644 projects/demo/src/modules/directives/overscroll/examples/2/index.less delete mode 100644 projects/demo/src/modules/directives/overscroll/examples/2/index.ts delete mode 100644 projects/demo/src/modules/directives/overscroll/examples/3/index.html delete mode 100644 projects/demo/src/modules/directives/overscroll/examples/3/index.less delete mode 100644 projects/demo/src/modules/directives/overscroll/examples/3/index.ts delete mode 100644 projects/demo/src/modules/directives/overscroll/examples/import/import-module.md delete mode 100644 projects/demo/src/modules/directives/overscroll/examples/import/insert-template.md delete mode 100644 projects/demo/src/modules/directives/overscroll/overscroll.component.ts delete mode 100644 projects/demo/src/modules/directives/overscroll/overscroll.module.ts delete mode 100644 projects/demo/src/modules/directives/overscroll/overscroll.template.html diff --git a/projects/addon-mobile/components/sheet-dialog/sheet-dialog.style.less b/projects/addon-mobile/components/sheet-dialog/sheet-dialog.style.less index ea2aec8c3ce7..45c09d24478b 100644 --- a/projects/addon-mobile/components/sheet-dialog/sheet-dialog.style.less +++ b/projects/addon-mobile/components/sheet-dialog/sheet-dialog.style.less @@ -1,12 +1,13 @@ @import '@taiga-ui/core/styles/taiga-ui-local'; :host { - .fullsize(fixed, inset); + .scrollbar-hidden(); - right: -1rem; display: flex; + width: 100%; + height: 100%; flex-direction: column; - clip-path: inset(0 1rem 0 0 round 0.75rem 0.75rem 0 0); + clip-path: inset(0 0 0 0 round 0.75rem 0.75rem 0 0); font: var(--tui-font-text-m); overflow-y: scroll; scroll-snap-type: y mandatory; @@ -38,7 +39,6 @@ .t-sheet { box-shadow: var(--tui-shadow); - width: calc(100% - 1rem); border-radius: 0.75rem 0.75rem 0 0; padding: 0 1rem; margin-top: auto; diff --git a/projects/addon-mobile/components/sheet/components/sheet/sheet.style.less b/projects/addon-mobile/components/sheet/components/sheet/sheet.style.less index 0fb1a10e6043..bd217b15ee1c 100644 --- a/projects/addon-mobile/components/sheet/components/sheet/sheet.style.less +++ b/projects/addon-mobile/components/sheet/components/sheet/sheet.style.less @@ -16,6 +16,7 @@ margin-left: -1rem; transform: scaleX(-1); clip-path: inset(0 1rem 0 0 round 0.75rem 0.75rem 0 0); + overscroll-behavior: none; &._stuck { scroll-snap-type: none; diff --git a/projects/addon-mobile/components/sheet/components/sheets-host/sheets-host.template.html b/projects/addon-mobile/components/sheet/components/sheets-host/sheets-host.template.html index f8a3bb4bd2cb..c652c25cb037 100644 --- a/projects/addon-mobile/components/sheet/components/sheets-host/sheets-host.template.html +++ b/projects/addon-mobile/components/sheet/components/sheets-host/sheets-host.template.html @@ -12,7 +12,6 @@ (click.self)="close(item)" > + {{ text }} + + `, styleUrls: ['./preview-dialog.style.less'], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, - animations: [tuiSlideInTop], + animations: [tuiSlideInTop, tuiFadeIn], + host: { + '(document:keydown.esc)': 'context.$implicit.complete()', + '[@tuiSlideInTop]': 'animation', + '[@tuiFadeIn]': 'animation', + }, }) export class TuiPreviewDialogComponent { protected readonly context = inject>(POLYMORPHEUS_CONTEXT); - - @HostListener('document:keydown.esc') - protected onKeyDownEsc(): void { - this.context.$implicit.complete(); - } + protected readonly animation = { + value: '', + params: { + start: '100vh', + duration: tuiGetDuration(inject(TUI_ANIMATIONS_SPEED)), + }, + }; } diff --git a/projects/addon-preview/components/preview-dialog/preview-dialog.style.less b/projects/addon-preview/components/preview-dialog/preview-dialog.style.less index dd69e42f136b..122affed91a6 100644 --- a/projects/addon-preview/components/preview-dialog/preview-dialog.style.less +++ b/projects/addon-preview/components/preview-dialog/preview-dialog.style.less @@ -1,7 +1,6 @@ @import '@taiga-ui/core/styles/taiga-ui-local'; -.t-dialog-content { - position: fixed; +tui-preview-dialog { width: 100%; height: 100%; } diff --git a/projects/addon-preview/components/preview-dialog/preview-dialog.template.html b/projects/addon-preview/components/preview-dialog/preview-dialog.template.html deleted file mode 100644 index 8b38a1cca128..000000000000 --- a/projects/addon-preview/components/preview-dialog/preview-dialog.template.html +++ /dev/null @@ -1,9 +0,0 @@ -
- - - {{ text }} - -
diff --git a/projects/addon-preview/components/preview/preview-action/preview-action.directive.ts b/projects/addon-preview/components/preview/preview-action/preview-action.directive.ts index 38a677624f64..d5bce615d97b 100644 --- a/projects/addon-preview/components/preview/preview-action/preview-action.directive.ts +++ b/projects/addon-preview/components/preview/preview-action/preview-action.directive.ts @@ -10,7 +10,7 @@ import {tuiButtonOptionsProvider} from '@taiga-ui/core'; }), ], host: { - '[style.border-radius.%]': '100', + '[style.border-radius.rem]': '100', }, }) export class TuiPreviewActionDirective {} diff --git a/projects/cdk/directives/focus-trap/focus-trap.directive.ts b/projects/cdk/directives/focus-trap/focus-trap.directive.ts index 8a9f14dd5dbd..9e22a23a69b5 100644 --- a/projects/cdk/directives/focus-trap/focus-trap.directive.ts +++ b/projects/cdk/directives/focus-trap/focus-trap.directive.ts @@ -1,6 +1,6 @@ import {DOCUMENT} from '@angular/common'; import type {OnDestroy} from '@angular/core'; -import {Directive, ElementRef, HostListener, inject, Renderer2} from '@angular/core'; +import {Directive, ElementRef, HostListener, inject} from '@angular/core'; import {tuiContainsOrAfter, tuiIsHTMLElement} from '@taiga-ui/cdk/utils/dom'; import { tuiBlurNativeFocused, @@ -9,6 +9,7 @@ import { } from '@taiga-ui/cdk/utils/focus'; @Directive({ + standalone: true, selector: '[tuiFocusTrap]', host: { tabIndex: '0', @@ -17,7 +18,6 @@ import { export class TuiFocusTrapDirective implements OnDestroy { private readonly doc = inject(DOCUMENT); private readonly el: HTMLElement = inject(ElementRef).nativeElement; - private readonly renderer = inject(Renderer2); private readonly activeElement = tuiGetNativeFocused(this.doc); constructor() { @@ -48,22 +48,16 @@ export class TuiFocusTrapDirective implements OnDestroy { @HostListener('blur') protected onBlur(): void { - this.renderer.removeAttribute(this.el, 'tabIndex'); + this.el.removeAttribute('tabIndex'); } @HostListener('window:focusin.silent', ['$event.target']) protected onFocusIn(node: Node): void { - if (tuiContainsOrAfter(this.el, node)) { - return; - } - - const focusable = tuiGetClosestFocusable({ - initial: this.el, - root: this.el, - }); - - if (focusable) { - focusable.focus(); + if (!tuiContainsOrAfter(this.el, node)) { + tuiGetClosestFocusable({ + initial: this.el, + root: this.el, + })?.focus(); } } } diff --git a/projects/cdk/directives/focus-trap/focus-trap.module.ts b/projects/cdk/directives/focus-trap/focus-trap.module.ts deleted file mode 100644 index 79ad5a6676d0..000000000000 --- a/projects/cdk/directives/focus-trap/focus-trap.module.ts +++ /dev/null @@ -1,9 +0,0 @@ -import {NgModule} from '@angular/core'; - -import {TuiFocusTrapDirective} from './focus-trap.directive'; - -@NgModule({ - declarations: [TuiFocusTrapDirective], - exports: [TuiFocusTrapDirective], -}) -export class TuiFocusTrapModule {} diff --git a/projects/cdk/directives/focus-trap/index.ts b/projects/cdk/directives/focus-trap/index.ts index ab182b3a14b4..14d8c754ba60 100644 --- a/projects/cdk/directives/focus-trap/index.ts +++ b/projects/cdk/directives/focus-trap/index.ts @@ -1,2 +1 @@ export * from './focus-trap.directive'; -export * from './focus-trap.module'; diff --git a/projects/cdk/directives/index.ts b/projects/cdk/directives/index.ts index 5002ad2b447f..b5fdedac01ed 100644 --- a/projects/cdk/directives/index.ts +++ b/projects/cdk/directives/index.ts @@ -16,7 +16,6 @@ export * from '@taiga-ui/cdk/directives/let'; export * from '@taiga-ui/cdk/directives/media'; export * from '@taiga-ui/cdk/directives/native-validator'; export * from '@taiga-ui/cdk/directives/obscured'; -export * from '@taiga-ui/cdk/directives/overscroll'; export * from '@taiga-ui/cdk/directives/pan'; export * from '@taiga-ui/cdk/directives/platform'; export * from '@taiga-ui/cdk/directives/popover'; diff --git a/projects/cdk/directives/overscroll/index.ts b/projects/cdk/directives/overscroll/index.ts deleted file mode 100644 index 02ad9caa10a4..000000000000 --- a/projects/cdk/directives/overscroll/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export * from './overscroll.directive'; -export * from './overscroll.module'; diff --git a/projects/cdk/directives/overscroll/ng-package.json b/projects/cdk/directives/overscroll/ng-package.json deleted file mode 100644 index bebf62dcb5e5..000000000000 --- a/projects/cdk/directives/overscroll/ng-package.json +++ /dev/null @@ -1,5 +0,0 @@ -{ - "lib": { - "entryFile": "index.ts" - } -} diff --git a/projects/cdk/directives/overscroll/overscroll.directive.ts b/projects/cdk/directives/overscroll/overscroll.directive.ts deleted file mode 100644 index 4d0b478ea88a..000000000000 --- a/projects/cdk/directives/overscroll/overscroll.directive.ts +++ /dev/null @@ -1,129 +0,0 @@ -import {Directive, ElementRef, HostBinding, inject, Input, NgZone} from '@angular/core'; -import {takeUntilDestroyed} from '@angular/core/rxjs-interop'; -import {tuiTypedFromEvent, tuiZonefree} from '@taiga-ui/cdk/observables'; -import type {TuiEventWith, TuiOverscrollMode} from '@taiga-ui/cdk/types'; -import {tuiCanScroll, tuiGetScrollParent, tuiIsElement} from '@taiga-ui/cdk/utils/dom'; -import {filter, switchMap, tap} from 'rxjs'; - -/** - * Directive to isolate scrolling, i.e. prevent body scroll behind modal dialog - */ -@Directive({ - selector: '[tuiOverscroll]', -}) -export class TuiOverscrollDirective { - private readonly el: HTMLElement = inject(ElementRef).nativeElement; - private readonly zone = inject(NgZone); - - @Input('tuiOverscroll') - public mode: TuiOverscrollMode | '' = 'scroll'; - - constructor() { - tuiTypedFromEvent(this.el, 'wheel', {passive: false}) - .pipe( - filter(() => this.enabled), - tuiZonefree(this.zone), - takeUntilDestroyed(), - ) - .subscribe(event => { - this.processEvent( - event, - !!event.deltaY, - event.deltaY ? event.deltaY < 0 : event.deltaX < 0, - ); - }); - - tuiTypedFromEvent(this.el, 'touchstart', {passive: true}) - .pipe( - switchMap(({touches}) => { - let {clientX, clientY} = touches[0]; - let deltaX = 0; - let deltaY = 0; - let vertical: boolean; - - return tuiTypedFromEvent(this.el, 'touchmove', { - passive: false, - }).pipe( - filter(() => this.enabled), - tap(event => { - // We have to have it in tap instead of subscribe due to variables in closure - const changedTouch = event.changedTouches[0]; - - deltaX = clientX - changedTouch.clientX; - deltaY = clientY - changedTouch.clientY; - clientX = changedTouch.clientX; - clientY = changedTouch.clientY; - - if (vertical === undefined) { - vertical = Math.abs(deltaY) > Math.abs(deltaX); - } - - this.processEvent( - event, - vertical, - vertical ? deltaY < 0 : deltaX < 0, - ); - }), - ); - }), - tuiZonefree(this.zone), - takeUntilDestroyed(), - ) - .subscribe(); - } - - @HostBinding('style.overscrollBehavior') - protected get overscrollBehavior(): 'contain' | null { - return this.enabled ? 'contain' : null; - } - - protected get enabled(): boolean { - return this.mode !== 'none'; - } - - private processEvent( - event: TuiEventWith, - vertical: boolean, - negative: boolean, - ): void { - const {target, currentTarget, cancelable} = event; - - if ( - !cancelable || - !tuiIsElement(target) || - (target as HTMLInputElement)?.type === 'range' - ) { - return; - } - - // This is all what's needed in Chrome/Firefox thanks to CSS overscroll-behavior - if ( - this.mode === 'all' && - ((vertical && !currentTarget.contains(tuiGetScrollParent(target))) || - (!vertical && !currentTarget.contains(tuiGetScrollParent(target, false)))) - ) { - event.preventDefault(); - - return; - } - - // This is Safari/IE/Edge fallback - if ( - vertical && - ((negative && !tuiCanScroll(target, currentTarget, true, false)) || - (!negative && !tuiCanScroll(target, currentTarget, true, true))) - ) { - event.preventDefault(); - - return; - } - - if ( - !vertical && - ((negative && !tuiCanScroll(target, currentTarget, false, false)) || - (!negative && !tuiCanScroll(target, currentTarget, false, true))) - ) { - event.preventDefault(); - } - } -} diff --git a/projects/cdk/directives/overscroll/overscroll.module.ts b/projects/cdk/directives/overscroll/overscroll.module.ts deleted file mode 100644 index 22a6bf7b31d6..000000000000 --- a/projects/cdk/directives/overscroll/overscroll.module.ts +++ /dev/null @@ -1,9 +0,0 @@ -import {NgModule} from '@angular/core'; - -import {TuiOverscrollDirective} from './overscroll.directive'; - -@NgModule({ - declarations: [TuiOverscrollDirective], - exports: [TuiOverscrollDirective], -}) -export class TuiOverscrollModule {} diff --git a/projects/cdk/schematics/ng-update/v4/steps/constants/identifiers-to-replace.ts b/projects/cdk/schematics/ng-update/v4/steps/constants/identifiers-to-replace.ts index 6e2b197acb29..51c94e8d9fb3 100644 --- a/projects/cdk/schematics/ng-update/v4/steps/constants/identifiers-to-replace.ts +++ b/projects/cdk/schematics/ng-update/v4/steps/constants/identifiers-to-replace.ts @@ -9,6 +9,10 @@ export const IDENTIFIERS_TO_REPLACE: ReplacementIdentifierMulti[] = [ from: {name: 'TuiAutoFocusModule', moduleSpecifier: '@taiga-ui/cdk'}, to: {name: 'TuiAutoFocusDirective', moduleSpecifier: '@taiga-ui/cdk'}, }, + { + from: {name: 'TuiFocusTrapModule', moduleSpecifier: '@taiga-ui/cdk'}, + to: {name: 'TuiFocusTrapDirective', moduleSpecifier: '@taiga-ui/cdk'}, + }, { from: {name: 'ALWAYS_TRUE_HANDLER', moduleSpecifier: '@taiga-ui/cdk'}, to: {name: 'TUI_TRUE_HANDLER', moduleSpecifier: '@taiga-ui/cdk'}, diff --git a/projects/cdk/types/index.ts b/projects/cdk/types/index.ts index 4b00d72ad5c9..b9920353b36f 100644 --- a/projects/cdk/types/index.ts +++ b/projects/cdk/types/index.ts @@ -8,7 +8,6 @@ export * from './input-mode'; export * from './input-type'; export * from './mapper'; export * from './matcher'; -export * from './overscroll-mode'; export * from './platform'; export * from './rounding'; export * from './safe-html'; diff --git a/projects/cdk/types/overscroll-mode.ts b/projects/cdk/types/overscroll-mode.ts deleted file mode 100644 index 79402833ef5c..000000000000 --- a/projects/cdk/types/overscroll-mode.ts +++ /dev/null @@ -1 +0,0 @@ -export type TuiOverscrollMode = 'all' | 'none' | 'scroll'; diff --git a/projects/core/components/dialog/dialogs.component.ts b/projects/core/components/dialog/dialogs.component.ts index 8383d71e21b7..366ab4db6566 100644 --- a/projects/core/components/dialog/dialogs.component.ts +++ b/projects/core/components/dialog/dialogs.component.ts @@ -1,12 +1,14 @@ -import {CommonModule, DOCUMENT} from '@angular/common'; -import {ChangeDetectionStrategy, Component, inject} from '@angular/core'; +import {CommonModule} from '@angular/common'; +import {ChangeDetectionStrategy, Component, ElementRef, inject} from '@angular/core'; import type {TuiPopover} from '@taiga-ui/cdk'; -import {TuiFocusTrapModule, TuiOverscrollModule} from '@taiga-ui/cdk'; +import {TuiFocusTrapDirective} from '@taiga-ui/cdk'; import {tuiHost} from '@taiga-ui/core/animations'; -import {TuiScrollControlsComponent} from '@taiga-ui/core/components/scroll-controls'; +import { + TuiScrollControlsComponent, + TuiScrollRefDirective, +} from '@taiga-ui/core/components/scroll-controls'; import {PolymorpheusModule} from '@tinkoff/ng-polymorpheus'; import type {Observable} from 'rxjs'; -import {tap} from 'rxjs'; import {TUI_DIALOGS} from './dialog.tokens'; @@ -16,9 +18,9 @@ import {TUI_DIALOGS} from './dialog.tokens'; imports: [ CommonModule, PolymorpheusModule, + TuiScrollRefDirective, TuiScrollControlsComponent, - TuiFocusTrapModule, - TuiOverscrollModule, + TuiFocusTrapDirective, ], templateUrl: './dialogs.template.html', styleUrls: ['./dialogs.style.less'], @@ -26,18 +28,12 @@ import {TUI_DIALOGS} from './dialog.tokens'; // eslint-disable-next-line @angular-eslint/prefer-on-push-component-change-detection changeDetection: ChangeDetectionStrategy.Default, animations: [tuiHost], + host: { + '(keydown.silent)': 'el.scrollTop = el.scrollHeight / 2', + }, }) export class TuiDialogsComponent { - private readonly doc = inject(DOCUMENT); - - protected readonly dialogs$: Observable>> = inject( - TUI_DIALOGS, - ).pipe( - tap(({length}) => { - this.doc.defaultView?.document.documentElement.classList.toggle( - 't-overscroll-none', - !!length, - ); - }), - ); + protected readonly el: HTMLElement = inject(ElementRef).nativeElement; + protected readonly dialogs$: Observable>> = + inject(TUI_DIALOGS); } diff --git a/projects/core/components/dialog/dialogs.style.less b/projects/core/components/dialog/dialogs.style.less index a9165ac69db4..0f2c36b32913 100644 --- a/projects/core/components/dialog/dialogs.style.less +++ b/projects/core/components/dialog/dialogs.style.less @@ -2,8 +2,21 @@ :host { .fullsize(fixed); + .scrollbar-hidden(); + + pointer-events: none; + overflow: auto; + overscroll-behavior: none; - height: 0; + &:has(section) { + pointer-events: auto; + } + + &:before { + content: ''; + display: block; + height: 1000%; + } } .t-overlay, @@ -12,6 +25,7 @@ .fullsize(fixed, inset); display: flex; + height: 100%; align-items: flex-start; outline: none; overflow: auto; @@ -22,28 +36,16 @@ } .t-dialog { - bottom: auto; - height: 100%; + position: sticky; + pointer-events: auto; + overscroll-behavior: none; } .t-overlay { - height: 100%; - pointer-events: none; - touch-action: none; - opacity: 0; - letter-spacing: normal; - - /* change of useless property 'letter-spacing' to ensure that transitionend event will fire */ - transition: - opacity var(--tui-duration, 300ms), - letter-spacing 0.01s; + .transition(opacity); + background: rgba(0, 0, 0, 0.75); backdrop-filter: var(--tui-backdrop, none); - - &_visible { - opacity: 1; - letter-spacing: 1px; - } } .t-dialog:last-of-type { diff --git a/projects/core/components/dialog/dialogs.template.html b/projects/core/components/dialog/dialogs.template.html index 38f7bca6ad2e..7f9fda255b89 100644 --- a/projects/core/components/dialog/dialogs.template.html +++ b/projects/core/components/dialog/dialogs.template.html @@ -4,7 +4,6 @@ aria-modal="true" role="dialog" tuiFocusTrap - tuiOverscroll="all" tuiScrollRef class="t-dialog" @tuiHost @@ -16,6 +15,6 @@
diff --git a/projects/core/components/root/root.style.less b/projects/core/components/root/root.style.less index 05304dca49c1..4ca177395fba 100644 --- a/projects/core/components/root/root.style.less +++ b/projects/core/components/root/root.style.less @@ -53,7 +53,3 @@ tui-root > .t-root-scrollbar { height: 100%; isolation: isolate; } - -.t-overscroll-none { - overscroll-behavior: none; -} diff --git a/projects/core/directives/dropdown/dropdown.component.ts b/projects/core/directives/dropdown/dropdown.component.ts index c1b27803bbb7..30dda4277d82 100644 --- a/projects/core/directives/dropdown/dropdown.component.ts +++ b/projects/core/directives/dropdown/dropdown.component.ts @@ -6,7 +6,6 @@ import { TuiActiveZoneDirective, tuiGetClosestFocusable, tuiIsElement, - TuiOverscrollModule, tuiPx, } from '@taiga-ui/cdk'; import { @@ -35,12 +34,7 @@ import {TuiDropdownPositionDirective} from './dropdown-position.directive'; @Component({ standalone: true, selector: 'tui-dropdown', - imports: [ - PolymorpheusModule, - TuiActiveZoneDirective, - TuiOverscrollModule, - TuiScrollbarComponent, - ], + imports: [PolymorpheusModule, TuiActiveZoneDirective, TuiScrollbarComponent], templateUrl: './dropdown.template.html', styleUrls: ['./dropdown.style.less'], // @bad TODO: OnPush diff --git a/projects/core/directives/dropdown/dropdown.style.less b/projects/core/directives/dropdown/dropdown.style.less index fe1538144f1e..1f80fd06b1bb 100644 --- a/projects/core/directives/dropdown/dropdown.style.less +++ b/projects/core/directives/dropdown/dropdown.style.less @@ -26,6 +26,7 @@ .t-scroll { flex-grow: 1; max-width: 100%; + overscroll-behavior: none; } .t-primitive { diff --git a/projects/core/directives/dropdown/dropdown.template.html b/projects/core/directives/dropdown/dropdown.template.html index 5aeac150df46..597fa1c7b255 100644 --- a/projects/core/directives/dropdown/dropdown.template.html +++ b/projects/core/directives/dropdown/dropdown.template.html @@ -1,7 +1,6 @@
- (await import('../directives/overscroll/overscroll.module')) - .ExampleTuiOverscrollModule, - title: 'Overscroll', - }), route({ path: DemoRoute.Present, loadChildren: async () => diff --git a/projects/demo/src/modules/app/demo-routes.ts b/projects/demo/src/modules/app/demo-routes.ts index 75b71dac57e9..96b9f2ccd0fc 100644 --- a/projects/demo/src/modules/app/demo-routes.ts +++ b/projects/demo/src/modules/app/demo-routes.ts @@ -171,7 +171,6 @@ export const DemoRoute = { Swipe: '/directives/swipe', Let: '/directives/let', Zoom: '/directives/zoom', - Overscroll: '/directives/overscroll', Present: '/directives/present', HoveredChange: '/directives/hovered-change', ReorderColumns: '/components/reorder', diff --git a/projects/demo/src/modules/app/pages.ts b/projects/demo/src/modules/app/pages.ts index f620174afe6d..349dfffe853f 100644 --- a/projects/demo/src/modules/app/pages.ts +++ b/projects/demo/src/modules/app/pages.ts @@ -1215,12 +1215,6 @@ export const pages: TuiDocPages = [ keywords: 'color, mode, dark, night, тема, фон, вид, цвет', route: DemoRoute.Theme, }, - { - section: 'Tools', - title: 'Overscroll', - keywords: 'overscroll, scroll, скролл', - route: DemoRoute.Overscroll, - }, { section: 'Tools', title: 'Pan', diff --git a/projects/demo/src/modules/components/block-status/examples/4/index.html b/projects/demo/src/modules/components/block-status/examples/4/index.html index d6ffebb5d349..1c6ddaca3857 100644 --- a/projects/demo/src/modules/components/block-status/examples/4/index.html +++ b/projects/demo/src/modules/components/block-status/examples/4/index.html @@ -3,17 +3,14 @@ class="card" [card]="true" > -
+ -
+ You can put other content instead of image using tui-block-content @@ -23,7 +20,7 @@ appearance="primary" size="s" tuiButton - [style.border-radius.%]="100" + [style.border-radius.rem]="100" > Got it diff --git a/projects/demo/src/modules/components/block-status/examples/4/index.ts b/projects/demo/src/modules/components/block-status/examples/4/index.ts index 06a56c7c91fb..a4c94e853472 100644 --- a/projects/demo/src/modules/components/block-status/examples/4/index.ts +++ b/projects/demo/src/modules/components/block-status/examples/4/index.ts @@ -3,7 +3,7 @@ import {Component} from '@angular/core'; import {changeDetection} from '@demo/emulate/change-detection'; import {encapsulation} from '@demo/emulate/encapsulation'; import {TuiAutoColorPipe, TuiButtonDirective, TuiInitialsPipe} from '@taiga-ui/core'; -import {TuiAvatarComponent} from '@taiga-ui/kit'; +import {TuiAvatarComponent, TuiAvatarStackComponent} from '@taiga-ui/kit'; import {TuiBlockStatusModule} from '@taiga-ui/layout'; @Component({ @@ -15,6 +15,7 @@ import {TuiBlockStatusModule} from '@taiga-ui/layout'; TuiAvatarComponent, TuiAutoColorPipe, TuiInitialsPipe, + TuiAvatarStackComponent, ], templateUrl: './index.html', styleUrls: ['./index.less'], diff --git a/projects/demo/src/modules/components/dialog/examples/5/index.html b/projects/demo/src/modules/components/dialog/examples/5/index.html index 6860171e0157..b290550d33cc 100644 --- a/projects/demo/src/modules/components/dialog/examples/5/index.html +++ b/projects/demo/src/modules/components/dialog/examples/5/index.html @@ -2,7 +2,7 @@ size="m" tuiButton type="button" - class="tui-space_right-2 tui-space_bottom-2" + class="tui-space_right-2" (click)="onClick(content, header, 'm')" > Show diff --git a/projects/demo/src/modules/components/pdf-viewer/examples/1/index.html b/projects/demo/src/modules/components/pdf-viewer/examples/1/index.html index 51e498e7b9ca..985ca13d75e9 100644 --- a/projects/demo/src/modules/components/pdf-viewer/examples/1/index.html +++ b/projects/demo/src/modules/components/pdf-viewer/examples/1/index.html @@ -17,7 +17,7 @@ size="s" tuiButton [href]="content" - [style.border-radius.%]="100" + [style.border-radius.rem]="100" > Download diff --git a/projects/demo/src/modules/components/pdf-viewer/examples/2/actions-content.component.html b/projects/demo/src/modules/components/pdf-viewer/examples/2/actions-content.component.html index 430b7c99413a..870bdd2130b0 100644 --- a/projects/demo/src/modules/components/pdf-viewer/examples/2/actions-content.component.html +++ b/projects/demo/src/modules/components/pdf-viewer/examples/2/actions-content.component.html @@ -3,7 +3,7 @@ size="s" tuiButton class="tui-space_left-3" - [style.border-radius.%]="100" + [style.border-radius.rem]="100" (click)="button.onClick(context)" > {{ button.text }} diff --git a/projects/demo/src/modules/components/sheet-dialog/examples/1/index.ts b/projects/demo/src/modules/components/sheet-dialog/examples/1/index.ts index 0808effd3135..a8eba5ee29d4 100644 --- a/projects/demo/src/modules/components/sheet-dialog/examples/1/index.ts +++ b/projects/demo/src/modules/components/sheet-dialog/examples/1/index.ts @@ -15,11 +15,11 @@ export class TuiSheetDialogExample1 { protected readonly stream$ = new Subject(); constructor() { + const service = inject(TuiSheetDialogService); + this.stream$ .pipe( - switchMap(() => - inject(TuiSheetDialogService).open('', {label: 'Simple sheet'}), - ), + switchMap(() => service.open('', {label: 'Simple sheet'})), takeUntilDestroyed(), ) .subscribe(); diff --git a/projects/demo/src/modules/components/sheet/examples/1/index.ts b/projects/demo/src/modules/components/sheet/examples/1/index.ts index 44d57e0dedae..307db185744b 100644 --- a/projects/demo/src/modules/components/sheet/examples/1/index.ts +++ b/projects/demo/src/modules/components/sheet/examples/1/index.ts @@ -15,11 +15,11 @@ export class TuiSheetExample1 { protected readonly stream$ = new Subject(); constructor() { + const service = inject(TuiSheetService); + this.stream$ .pipe( - switchMap(() => - inject(TuiSheetService).open('Simple sheet', {overlay: true}), - ), + switchMap(() => service.open('Simple sheet', {overlay: true})), takeUntilDestroyed(), ) .subscribe(); diff --git a/projects/demo/src/modules/directives/overscroll/examples/1/index.html b/projects/demo/src/modules/directives/overscroll/examples/1/index.html deleted file mode 100644 index ecff6e2d24c5..000000000000 --- a/projects/demo/src/modules/directives/overscroll/examples/1/index.html +++ /dev/null @@ -1,11 +0,0 @@ -
-

- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus et orci enim. Nam luctus mattis nisi. In - congue vitae arcu a volutpat. Nunc lacinia nulla quis eros facilisis convallis. Vivamus scelerisque eros quis - ipsum faucibus luctus. Aenean faucibus in turpis sit amet tincidunt. Lorem ipsum dolor sit amet, consectetur - adipiscing elit. Aliquam vel imperdiet libero. In hac habitasse platea dictumst. -

-
diff --git a/projects/demo/src/modules/directives/overscroll/examples/1/index.less b/projects/demo/src/modules/directives/overscroll/examples/1/index.less deleted file mode 100644 index 0d51f1c904be..000000000000 --- a/projects/demo/src/modules/directives/overscroll/examples/1/index.less +++ /dev/null @@ -1,7 +0,0 @@ -.box { - width: 16rem; - height: 12.5rem; - border: 1px solid var(--tui-base-09); - padding: 0 0.6875rem; - overflow: auto; -} diff --git a/projects/demo/src/modules/directives/overscroll/examples/1/index.ts b/projects/demo/src/modules/directives/overscroll/examples/1/index.ts deleted file mode 100644 index a2666dadecb5..000000000000 --- a/projects/demo/src/modules/directives/overscroll/examples/1/index.ts +++ /dev/null @@ -1,12 +0,0 @@ -import {Component} from '@angular/core'; -import {changeDetection} from '@demo/emulate/change-detection'; -import {encapsulation} from '@demo/emulate/encapsulation'; - -@Component({ - selector: 'tui-overscroll-example-1', - templateUrl: './index.html', - styleUrls: ['./index.less'], - encapsulation, - changeDetection, -}) -export class TuiOverscrollExample1 {} diff --git a/projects/demo/src/modules/directives/overscroll/examples/2/index.html b/projects/demo/src/modules/directives/overscroll/examples/2/index.html deleted file mode 100644 index 2603e8768610..000000000000 --- a/projects/demo/src/modules/directives/overscroll/examples/2/index.html +++ /dev/null @@ -1,7 +0,0 @@ -
- Lorem ipsum dolor sit amt, consectetur adipiscing elit. Phasellus et orci enim. Nam luctus mattis nisi. In congue - vitae arcu a volutpat. Nunc lacinia nulla quis eros facilisis convallis. -
diff --git a/projects/demo/src/modules/directives/overscroll/examples/2/index.less b/projects/demo/src/modules/directives/overscroll/examples/2/index.less deleted file mode 100644 index 6d5f66bdbd7e..000000000000 --- a/projects/demo/src/modules/directives/overscroll/examples/2/index.less +++ /dev/null @@ -1,7 +0,0 @@ -.box { - overflow: auto; - width: 16rem; - height: 9.75rem; - border: 1px solid var(--tui-base-09); - padding: 0 0.6875rem; -} diff --git a/projects/demo/src/modules/directives/overscroll/examples/2/index.ts b/projects/demo/src/modules/directives/overscroll/examples/2/index.ts deleted file mode 100644 index b73a97f38b01..000000000000 --- a/projects/demo/src/modules/directives/overscroll/examples/2/index.ts +++ /dev/null @@ -1,12 +0,0 @@ -import {Component} from '@angular/core'; -import {changeDetection} from '@demo/emulate/change-detection'; -import {encapsulation} from '@demo/emulate/encapsulation'; - -@Component({ - selector: 'tui-overscroll-example-2', - templateUrl: './index.html', - styleUrls: ['./index.less'], - encapsulation, - changeDetection, -}) -export class TuiOverscrollExample2 {} diff --git a/projects/demo/src/modules/directives/overscroll/examples/3/index.html b/projects/demo/src/modules/directives/overscroll/examples/3/index.html deleted file mode 100644 index dcc23178c8db..000000000000 --- a/projects/demo/src/modules/directives/overscroll/examples/3/index.html +++ /dev/null @@ -1,11 +0,0 @@ -
-

- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus et orci enim. Nam luctus mattis nisi. In - congue vitae arcu a volutpat. Nunc lacinia nulla quis eros facilisis convallis. Vivamus scelerisque eros quis - ipsum faucibus luctus. Aenean faucibus in turpis sit amet tincidunt. Lorem ipsum dolor sit amet, consectetur - adipiscing elit. Aliquam vel imperdiet libero. In hac habitasse platea dictumst. -

-
diff --git a/projects/demo/src/modules/directives/overscroll/examples/3/index.less b/projects/demo/src/modules/directives/overscroll/examples/3/index.less deleted file mode 100644 index 6d5f66bdbd7e..000000000000 --- a/projects/demo/src/modules/directives/overscroll/examples/3/index.less +++ /dev/null @@ -1,7 +0,0 @@ -.box { - overflow: auto; - width: 16rem; - height: 9.75rem; - border: 1px solid var(--tui-base-09); - padding: 0 0.6875rem; -} diff --git a/projects/demo/src/modules/directives/overscroll/examples/3/index.ts b/projects/demo/src/modules/directives/overscroll/examples/3/index.ts deleted file mode 100644 index cf847d661f19..000000000000 --- a/projects/demo/src/modules/directives/overscroll/examples/3/index.ts +++ /dev/null @@ -1,12 +0,0 @@ -import {Component} from '@angular/core'; -import {changeDetection} from '@demo/emulate/change-detection'; -import {encapsulation} from '@demo/emulate/encapsulation'; - -@Component({ - selector: 'tui-overscroll-example-3', - templateUrl: './index.html', - styleUrls: ['./index.less'], - encapsulation, - changeDetection, -}) -export class TuiOverscrollExample3 {} diff --git a/projects/demo/src/modules/directives/overscroll/examples/import/import-module.md b/projects/demo/src/modules/directives/overscroll/examples/import/import-module.md deleted file mode 100644 index 0d155d40aaa7..000000000000 --- a/projects/demo/src/modules/directives/overscroll/examples/import/import-module.md +++ /dev/null @@ -1,15 +0,0 @@ -```ts -import {TuiOverscrollModule} from '@taiga-ui/cdk'; - -// ... - -@Component({ - standalone: true, - imports: [ - // ... - TuiOverscrollModule, - ], - // ... -}) -export class MyComponent {} -``` diff --git a/projects/demo/src/modules/directives/overscroll/examples/import/insert-template.md b/projects/demo/src/modules/directives/overscroll/examples/import/insert-template.md deleted file mode 100644 index 49f6274293e6..000000000000 --- a/projects/demo/src/modules/directives/overscroll/examples/import/insert-template.md +++ /dev/null @@ -1,3 +0,0 @@ -```html -
...
-``` diff --git a/projects/demo/src/modules/directives/overscroll/overscroll.component.ts b/projects/demo/src/modules/directives/overscroll/overscroll.component.ts deleted file mode 100644 index c2baa7ee5044..000000000000 --- a/projects/demo/src/modules/directives/overscroll/overscroll.component.ts +++ /dev/null @@ -1,31 +0,0 @@ -import {Component} from '@angular/core'; -import {changeDetection} from '@demo/emulate/change-detection'; -import type {TuiDocExample} from '@taiga-ui/addon-doc'; - -@Component({ - selector: 'example-tui-overscroll', - templateUrl: './overscroll.template.html', - changeDetection, -}) -export class ExampleTuiOverscrollComponent { - protected readonly exampleModule = import('./examples/import/import-module.md?raw'); - protected readonly exampleHtml = import('./examples/import/insert-template.md?raw'); - - protected readonly example1: TuiDocExample = { - TypeScript: import('./examples/1/index.ts?raw'), - HTML: import('./examples/1/index.html?raw'), - LESS: import('./examples/1/index.less?raw'), - }; - - protected readonly example2: TuiDocExample = { - TypeScript: import('./examples/2/index.ts?raw'), - HTML: import('./examples/2/index.html?raw'), - LESS: import('./examples/2/index.less?raw'), - }; - - protected readonly example3: TuiDocExample = { - TypeScript: import('./examples/3/index.ts?raw'), - HTML: import('./examples/3/index.html?raw'), - LESS: import('./examples/3/index.less?raw'), - }; -} diff --git a/projects/demo/src/modules/directives/overscroll/overscroll.module.ts b/projects/demo/src/modules/directives/overscroll/overscroll.module.ts deleted file mode 100644 index c447c9d54bd0..000000000000 --- a/projects/demo/src/modules/directives/overscroll/overscroll.module.ts +++ /dev/null @@ -1,29 +0,0 @@ -import {CommonModule} from '@angular/common'; -import {NgModule} from '@angular/core'; -import {RouterModule} from '@angular/router'; -import {TuiSetupComponent} from '@demo/utils'; -import {TuiAddonDocModule, tuiGenerateRoutes} from '@taiga-ui/addon-doc'; -import {TuiOverscrollModule} from '@taiga-ui/cdk'; - -import {TuiOverscrollExample1} from './examples/1'; -import {TuiOverscrollExample2} from './examples/2'; -import {TuiOverscrollExample3} from './examples/3'; -import {ExampleTuiOverscrollComponent} from './overscroll.component'; - -@NgModule({ - imports: [ - CommonModule, - TuiOverscrollModule, - TuiAddonDocModule, - RouterModule.forChild(tuiGenerateRoutes(ExampleTuiOverscrollComponent)), - TuiSetupComponent, - ], - declarations: [ - ExampleTuiOverscrollComponent, - TuiOverscrollExample1, - TuiOverscrollExample2, - TuiOverscrollExample3, - ], - exports: [ExampleTuiOverscrollComponent], -}) -export class ExampleTuiOverscrollModule {} diff --git a/projects/demo/src/modules/directives/overscroll/overscroll.template.html b/projects/demo/src/modules/directives/overscroll/overscroll.template.html deleted file mode 100644 index 00f855bc1fc0..000000000000 --- a/projects/demo/src/modules/directives/overscroll/overscroll.template.html +++ /dev/null @@ -1,46 +0,0 @@ - - -

- tuiOverscroll - allows you to customize scrolling for individual elements -

- - - - - - - - - - - - - - - - - -