feat(kit): Drawer add new component (#9614)

Co-authored-by: taiga-family-bot <[email protected]>

projects/addon-doc/components/internal/header/index.less

@@ -9,7 +9,7 @@
     z-index: 1;
     display: flex;
     box-shadow: var(--tui-shadow-small);
-    block-size: 3.9375rem;
+    block-size: 4.125rem;
     align-items: center;
     padding: 0 1.25rem;
     background: var(--tui-background-base);

projects/addon-mobile/directives/sidebar/sidebar.component.ts

@@ -11,6 +11,9 @@ import {PolymorpheusOutlet} from '@taiga-ui/polymorpheus';
 
 import {TuiSidebarDirective} from './sidebar.directive';
 
+/**
+ * @deprecated use {@link TuiDrawer} instead
+ */
 @Component({
     standalone: true,
     selector: 'aside[tuiSidebar]',

projects/addon-mobile/directives/sidebar/sidebar.directive.ts

@@ -1,11 +1,14 @@
 import type {ComponentRef, OnDestroy} from '@angular/core';
 import {Directive, inject, INJECTOR, Input, TemplateRef} from '@angular/core';
-import {TuiPopupService} from '@taiga-ui/core/services';
+import {TuiPopupService} from '@taiga-ui/core/directives/popup';
 import type {TuiHorizontalDirection} from '@taiga-ui/core/types';
 import {PolymorpheusComponent, PolymorpheusTemplate} from '@taiga-ui/polymorpheus';
 
 import {TuiSidebarComponent} from './sidebar.component';
 
+/**
+ * @deprecated use {@link TuiDrawer} instead
+ */
 @Directive({
     standalone: true,
     selector: '[tuiSidebar]',

projects/core/components/dialog/dialogs.style.less

@@ -49,6 +49,12 @@
     background: var(--tui-service-backdrop);
     backdrop-filter: var(--tui-backdrop, none);
     opacity: 0;
+    transition-timing-function: ease-in;
+
+    &_visible {
+        opacity: 1;
+        transition-timing-function: ease-out;
+    }
 }
 
 .t-dialog:last-child {

projects/core/components/dialog/dialogs.template.html

@@ -1,6 +1,6 @@
 <div
     class="t-overlay"
-    [style.opacity]="dialogs().length"
+    [class.t-overlay_visible]="dialogs().length"
 ></div>
 <section
     *ngFor="let item of dialogs()"

projects/core/components/root/root.component.ts

@@ -21,9 +21,10 @@ import {
     TUI_SCROLLBAR_OPTIONS,
     TuiScrollControls,
 } from '@taiga-ui/core/components/scrollbar';
-import {TuiDropdowns} from '@taiga-ui/core/directives';
+import {TuiDropdowns} from '@taiga-ui/core/directives/dropdown';
 import {TuiHints} from '@taiga-ui/core/directives/hint';
-import {TuiBreakpointService, TuiPopupService} from '@taiga-ui/core/services';
+import {TuiPopupService} from '@taiga-ui/core/directives/popup';
+import {TuiBreakpointService} from '@taiga-ui/core/services';
 import {TUI_ANIMATIONS_SPEED, TUI_REDUCED_MOTION, TUI_THEME} from '@taiga-ui/core/tokens';
 import {tuiGetDuration} from '@taiga-ui/core/utils';
 import {PreventEventPlugin} from '@taiga-ui/event-plugins';

projects/core/directives/dropdown/dropdown-portal.directive.ts

@@ -3,6 +3,9 @@ import {Directive, inject, Input, TemplateRef} from '@angular/core';
 
 import {TuiDropdownService} from './dropdown.service';
 
+/**
+ * @deprecated use {@link TuiPopup} directive instead
+ */
 @Directive({
     standalone: true,
     selector: 'ng-template[tuiDropdown]',

projects/core/directives/index.ts

@@ -5,5 +5,6 @@ export * from '@taiga-ui/core/directives/group';
 export * from '@taiga-ui/core/directives/hint';
 export * from '@taiga-ui/core/directives/icons';
 export * from '@taiga-ui/core/directives/number-format';
+export * from '@taiga-ui/core/directives/popup';
 export * from '@taiga-ui/core/directives/surface';
 export * from '@taiga-ui/core/directives/title';

projects/core/directives/popup/index.ts

@@ -0,0 +1,2 @@
+export * from './popup.directive';
+export * from './popup.service';

projects/core/directives/popup/ng-package.json

@@ -0,0 +1,5 @@
+{
+    "lib": {
+        "entryFile": "index.ts"
+    }
+}

projects/core/directives/popup/popup.directive.ts

@@ -0,0 +1,28 @@
+import type {EmbeddedViewRef, OnDestroy} from '@angular/core';
+import {Directive, inject, Input, TemplateRef} from '@angular/core';
+
+import {TuiPopupService} from './popup.service';
+
+@Directive({
+    standalone: true,
+    selector: 'ng-template[tuiPopup]',
+})
+export class TuiPopup implements OnDestroy {
+    private readonly template = inject(TemplateRef);
+    private readonly service = inject(TuiPopupService);
+
+    private viewRef?: EmbeddedViewRef<unknown>;
+
+    @Input()
+    public set tuiPopup(show: boolean) {
+        this.viewRef?.destroy();
+
+        if (show) {
+            this.viewRef = this.service.addTemplate(this.template);
+        }
+    }
+
+    public ngOnDestroy(): void {
+        this.viewRef?.destroy();
+    }
+}

projects/core/services/index.ts

@@ -1,6 +1,5 @@
 export * from './breakpoint.service';
 export * from './dark-theme.service';
 export * from './format-date.service';
-export * from './popup.service';
 export * from './position.service';
 export * from './visual-viewport.service';

projects/demo/src/modules/app/app.routes.ts

@@ -284,6 +284,11 @@ export const ROUTES: Routes = [
         loadComponent: async () => import('../components/dialog'),
         title: 'Dialog',
     }),
+    route({
+        path: DemoRoute.Drawer,
+        loadComponent: async () => import('../components/drawer'),
+        title: 'Drawer',
+    }),
     route({
         path: DemoRoute.Error,
         loadComponent: async () => import('../components/error'),

projects/demo/src/modules/app/demo-routes.ts

@@ -53,6 +53,7 @@ export const DemoRoute = {
     DataList: '/components/data-list',
     DataListWrapper: '/components/data-list-wrapper',
     Dialog: '/components/dialog',
+    Drawer: '/components/drawer',
     Error: '/components/error',
     Expand: '/components/expand',
     ElasticContainer: '/components/elastic-container',

projects/demo/src/modules/app/pages.ts

@@ -333,6 +333,13 @@ export const pages: DocRoutePages = [
         route: DemoRoute.Dialog,
         meta: {},
     },
+    {
+        section: 'Components',
+        title: 'Drawer',
+        keywords:
+            'попап, модал, popup, dialog, диалог, modal, окно, шторка, overlay, sidebar, сайдбар',
+        route: DemoRoute.Drawer,
+    },
     {
         section: 'Components',
         title: 'Dropdown',

projects/demo/src/modules/app/stackblitz/project-files/src/global_styles.less.md

@@ -15,8 +15,6 @@ app {
 }
 
 .header {
-  position: relative;
-  z-index: 1;
   display: flex;
   justify-content: space-between;
   align-items: center;

projects/demo/src/modules/components/drawer/examples/1/index.html

@@ -0,0 +1,136 @@
+<button
+    tuiButton
+    type="button"
+    (click)="open.set(!open())"
+>
+    Toggle
+</button>
+
+<tui-drawer *tuiPopup="open()">
+    <header>
+        <h2 tuiHeader>
+            <div tuiTitle>
+                <span tuiCaption>Caption・caption</span>
+                <span>
+                    Drawer title
+                    <tui-badge>Label</tui-badge>
+                </span>
+                <span tuiSubtitle>
+                    In publishing and graphic design, Lorem ipsum is a placeholder text commonly used.
+                </span>
+            </div>
+
+            <div tuiAccessories>
+                <button
+                    iconStart="@tui.search"
+                    tuiButton
+                    type="button"
+                >
+                    More info
+                </button>
+                <button
+                    iconStart="@tui.ellipsis"
+                    tuiIconButton
+                    type="button"
+                >
+                    Actions
+                </button>
+                <button
+                    appearance="icon"
+                    iconStart="@tui.x"
+                    tuiIconButton
+                    type="button"
+                    (click)="open.set(false)"
+                >
+                    Close
+                </button>
+            </div>
+        </h2>
+        <div>
+            <button
+                tuiButton
+                type="button"
+            >
+                Action 1
+            </button>
+            <a
+                appearance="action"
+                href="#"
+                tuiButton
+            >
+                Action 2
+            </a>
+            <button
+                tuiLink
+                type="button"
+            >
+                Action 3
+            </button>
+        </div>
+        <nav tuiNavigationNav>
+            <tui-tabs>
+                <button
+                    tuiTab
+                    type="button"
+                >
+                    Default view
+                </button>
+                <button
+                    tuiTab
+                    type="button"
+                >
+                    Details
+                </button>
+                <button
+                    tuiTab
+                    type="button"
+                >
+                    Followers
+                </button>
+            </tui-tabs>
+            <hr />
+            <button
+                size="xs"
+                tuiButton
+                type="button"
+            >
+                Primary
+            </button>
+            <button
+                appearance="secondary"
+                iconStart="@tui.ellipsis"
+                size="xs"
+                tuiIconButton
+                type="button"
+            >
+                More
+            </button>
+        </nav>
+    </header>
+    <p *tuiRepeatTimes="let index of 15">Content</p>
+    <footer>
+        <button
+            size="m"
+            tuiButton
+            type="button"
+            [style.margin-inline-end]="'auto'"
+        >
+            Tertiary action
+        </button>
+        <button
+            size="m"
+            tuiButton
+            type="button"
+        >
+            Secondary action
+        </button>
+        <button
+            appearance="primary"
+            size="m"
+            tuiButton
+            type="button"
+        >
+            Primary action
+        </button>
+    </footer>
+</tui-drawer>

projects/demo/src/modules/components/drawer/examples/1/index.ts

@@ -0,0 +1,30 @@
+import {Component, signal} from '@angular/core';
+import {changeDetection} from '@demo/emulate/change-detection';
+import {encapsulation} from '@demo/emulate/encapsulation';
+import {TuiRepeatTimes} from '@taiga-ui/cdk';
+import {TuiButton, TuiLink, TuiPopup, TuiScrollbar, TuiTitle} from '@taiga-ui/core';
+import {TuiBadge, TuiDrawer, TuiTabs} from '@taiga-ui/kit';
+import {TuiHeader, TuiNavigation} from '@taiga-ui/layout';
+
+@Component({
+    standalone: true,
+    imports: [
+        TuiBadge,
+        TuiButton,
+        TuiDrawer,
+        TuiHeader,
+        TuiLink,
+        TuiNavigation,
+        TuiPopup,
+        TuiRepeatTimes,
+        TuiScrollbar,
+        TuiTabs,
+        TuiTitle,
+    ],
+    templateUrl: './index.html',
+    encapsulation,
+    changeDetection,
+})
+export default class Example {
+    protected readonly open = signal(false);
+}

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

@@ -0,0 +1,38 @@
+<button
+    tuiButton
+    type="button"
+    (click)="open.set(true)"
+>
+    Open
+</button>
+
+<tui-drawer
+    *tuiPopup="open()"
+    direction="left"
+    class="drawer"
+    [overlay]="true"
+    (click.self)="onClose()"
+>
+    <header class="header">
+        <h2 tuiHeader>
+            <div tuiTitle>Sticky header</div>
+            <div tuiAccessories>
+                <button
+                    tuiButton
+                    type="button"
+                    (click)="onClose()"
+                >
+                    Close
+                </button>
+            </div>
+        </h2>
+    </header>
+    <tui-textfield>
+        <label tuiLabel>Enter value</label>
+        <input
+            tuiTextfield
+            [formControl]="control"
+        />
+    </tui-textfield>
+    <p *tuiRepeatTimes="let index of 30">Content</p>
+</tui-drawer>

projects/demo/src/modules/components/drawer/examples/2/index.less

@@ -0,0 +1,9 @@
+.drawer {
+    top: 0;
+    border-radius: 0;
+    inline-size: 20rem;
+}
+
+.header {
+    position: sticky;
+}