feat(experimental): Expand add new component (#10069)

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

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

@@ -5,18 +5,10 @@
 <button
     tuiButton
     type="button"
-    (click)="toggle()"
+    (click)="expanded = !expanded"
 >
     Show/Hide
 </button>
 <tui-expand [expanded]="expanded">
-    <ng-template tuiExpandContent>
-        <p>NOBODY expects the Spanish Inquisition!</p>
-    </ng-template>
-</tui-expand>
-
-<tui-expand [expanded]="expanded">
-    <div *ngFor="let page of subpages">
-        <div>{{ page }}</div>
-    </div>
+    <p *tuiItem>NOBODY expects the Spanish Inquisition!</p>
 </tui-expand>

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

@@ -1,22 +1,17 @@
-import {NgForOf} from '@angular/common';
 import {Component} from '@angular/core';
 import {changeDetection} from '@demo/emulate/change-detection';
 import {encapsulation} from '@demo/emulate/encapsulation';
-import {TuiButton, TuiExpand} from '@taiga-ui/core';
+import {TuiItem} from '@taiga-ui/cdk';
+import {TuiButton} from '@taiga-ui/core';
+import {TuiExpand} from '@taiga-ui/experimental';
 
 @Component({
     standalone: true,
-    imports: [NgForOf, TuiButton, TuiExpand],
+    imports: [TuiButton, TuiExpand, TuiItem],
     templateUrl: './index.html',
     encapsulation,
     changeDetection,
 })
 export default class Example {
     protected expanded = false;
-
-    protected subpages = ['page1', 'page2', 'page3'];
-
-    protected toggle(): void {
-        this.expanded = !this.expanded;
-    }
 }

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

@@ -0,0 +1,10 @@
+<button
+    tuiButton
+    type="button"
+    (click)="expanded = !expanded"
+>
+    Show/Hide
+</button>
+<tui-expand [expanded]="expanded">
+    <p *tuiRepeatTimes="let index of 3">I am eagerly loaded but hidden</p>
+</tui-expand>

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

@@ -0,0 +1,17 @@
+import {Component} from '@angular/core';
+import {changeDetection} from '@demo/emulate/change-detection';
+import {encapsulation} from '@demo/emulate/encapsulation';
+import {TuiRepeatTimes} from '@taiga-ui/cdk';
+import {TuiButton} from '@taiga-ui/core';
+import {TuiExpand} from '@taiga-ui/experimental';
+
+@Component({
+    standalone: true,
+    imports: [TuiButton, TuiExpand, TuiRepeatTimes],
+    templateUrl: './index.html',
+    encapsulation,
+    changeDetection,
+})
+export default class Example {
+    protected expanded = false;
+}

projects/demo/src/modules/components/expand/examples/3/index.html

@@ -0,0 +1,24 @@
+<button
+    tuiButton
+    type="button"
+    (click)="expanded = !expanded"
+>
+    Show/Hide
+</button>
+<tui-expand [expanded]="expanded">
+    <tui-elastic-container *tuiItem>
+        <tui-loader
+            *ngIf="loading$ | async; else content"
+            [style.margin.rem]="1"
+        />
+        <ng-template #content>
+            <p>
+                You can use
+                <code>ElasticContainer</code>
+                to animate height changes
+            </p>
+            <p>Just some more content</p>
+            Making this section bigger than loader
+        </ng-template>
+    </tui-elastic-container>
+</tui-expand>

projects/demo/src/modules/components/expand/examples/3/index.ts

@@ -0,0 +1,33 @@
+import {AsyncPipe, NgIf} from '@angular/common';
+import {Component} from '@angular/core';
+import {changeDetection} from '@demo/emulate/change-detection';
+import {encapsulation} from '@demo/emulate/encapsulation';
+import {TUI_FALSE_HANDLER, TuiItem} from '@taiga-ui/cdk';
+import {TuiButton, TuiLoader} from '@taiga-ui/core';
+import {TuiExpand} from '@taiga-ui/experimental';
+import {TuiElasticContainer} from '@taiga-ui/kit';
+import {map, startWith, timer} from 'rxjs';
+
+@Component({
+    standalone: true,
+    imports: [
+        AsyncPipe,
+        NgIf,
+        TuiButton,
+        TuiElasticContainer,
+        TuiExpand,
+        TuiItem,
+        TuiLoader,
+    ],
+    templateUrl: './index.html',
+    encapsulation,
+    changeDetection,
+})
+export default class Example {
+    protected readonly loading$ = timer(2000).pipe(
+        map(TUI_FALSE_HANDLER),
+        startWith(true),
+    );
+
+    protected expanded = false;
+}

projects/demo/src/modules/components/expand/examples/4/index.html

@@ -0,0 +1,22 @@
+<p>
+    Chapman: Mr Wentworth just told me to come in here and say that there was trouble at the mill, that's all - I didn't
+    expect a kind of Spanish Inquisition.
+</p>
+<button
+    tuiButton
+    type="button"
+    (click)="toggle()"
+>
+    Show/Hide
+</button>
+<tui-expand [expanded]="expanded">
+    <ng-template tuiExpandContent>
+        <p>NOBODY expects the Spanish Inquisition!</p>
+    </ng-template>
+</tui-expand>
+
+<tui-expand [expanded]="expanded">
+    <div *ngFor="let page of subpages">
+        <div>{{ page }}</div>
+    </div>
+</tui-expand>

projects/demo/src/modules/components/expand/examples/4/index.ts

@@ -0,0 +1,22 @@
+import {NgForOf} from '@angular/common';
+import {Component} from '@angular/core';
+import {changeDetection} from '@demo/emulate/change-detection';
+import {encapsulation} from '@demo/emulate/encapsulation';
+import {TuiButton, TuiExpand} from '@taiga-ui/core';
+
+@Component({
+    standalone: true,
+    imports: [NgForOf, TuiButton, TuiExpand],
+    templateUrl: './index.html',
+    encapsulation,
+    changeDetection,
+})
+export default class Example {
+    protected expanded = false;
+
+    protected subpages = ['page1', 'page2', 'page3'];
+
+    protected toggle(): void {
+        this.expanded = !this.expanded;
+    }
+}

projects/demo/src/modules/components/expand/examples/import/import.md

@@ -1,5 +1,5 @@
 ```ts
-import {TuiExpand} from '@taiga-ui/core';
+import {TuiExpand} from '@taiga-ui/experimental';
 
 // ...
 

projects/demo/src/modules/components/expand/examples/import/template.md

@@ -1,5 +1,3 @@
 ```html
-<tui-expand [expanded]="expanded">
-  <ng-template tuiExpandContent>...</ng-template>
-</tui-expand>
+<tui-expand [expanded]="expanded">Eager content</tui-expand>
 ```

projects/demo/src/modules/components/expand/index.html

@@ -1,76 +1,17 @@
 <tui-doc-page
     header="Expand"
-    package="CORE"
+    package="EXPERIMENTAL"
     type="components"
 >
     <ng-template pageTab>
-        <p>Component to show expandable content</p>
-
         <tui-doc-example
-            id="base"
-            heading="Basic"
-            [component]="1 | tuiComponent"
-            [content]="1 | tuiExample: 'html,ts'"
+            *ngFor="let example of examples; let index = index"
+            [component]="index + 1 | tuiComponent"
+            [content]="index + 1 | tuiExample"
+            [heading]="example"
+            [id]="example | tuiKebab"
         />
     </ng-template>
 
-    <ng-template pageTab>
-        <tui-doc-demo>
-            Darth Vader is (spoilers below):
-            <tui-expand
-                [async]="async"
-                [expanded]="expanded"
-            >
-                <ng-template tuiExpandContent>
-                    <div *ngIf="!delayed">
-                        <p>Luke's father.</p>
-                        <p class="tooltip">
-                            Also Tyler Durden doesn't actually exist (hover for mode details)
-                            <span class="bubble">
-                                Fight Club reference (notice how spoiler has
-                                <code>overflow: visible;</code>
-                                when it's open).
-                            </span>
-                        </p>
-                        <div>
-                            A spoiler is an element of a disseminated summary or description of any piece of fiction
-                            that reveals any plot elements which threaten to give away important details. Typically, the
-                            details of the conclusion of the plot, including the climax and ending, are especially
-                            regarded as spoiler material. It can also be used to refer to any piece of information
-                            regarding any part of a given media that a potential consumer would not want to know
-                            beforehand. Because enjoyment of fiction depends a great deal upon the suspense of revealing
-                            plot details through standard narrative progression, the prior revelation of how things will
-                            turn out can "spoil" the enjoyment that some consumers of the narrative would otherwise have
-                            experienced. Spoilers can be found in message boards, articles, reviews, commercials, and
-                            movie trailers.
-                        </div>
-                    </div>
-                </ng-template>
-            </tui-expand>
-        </tui-doc-demo>
-
-        <tui-doc-documentation>
-            <ng-template
-                documentationPropertyMode="input"
-                documentationPropertyName="async"
-                documentationPropertyType="boolean"
-                [(documentationPropertyValue)]="async"
-            >
-                Waits for a custom event
-                <code>TUI_EXPAND_LOADED</code>
-                before opening. Content is initialized when opening starts
-            </ng-template>
-            <ng-template
-                documentationPropertyMode="input"
-                documentationPropertyName="expanded"
-                documentationPropertyType="boolean"
-                [documentationPropertyValue]="expanded"
-                (documentationPropertyValueChange)="onExpandedChange($event)"
-            >
-                Open / close state
-            </ng-template>
-        </tui-doc-documentation>
-    </ng-template>
-
-    <tui-setup *pageTab />
+    <tui-setup *pageTab="'Setup'" />
 </tui-doc-page>

projects/demo/src/modules/components/expand/index.ts

@@ -1,53 +1,14 @@
-import {
-    ChangeDetectorRef,
-    Component,
-    DestroyRef,
-    ElementRef,
-    inject,
-    ViewChild,
-} from '@angular/core';
-import {takeUntilDestroyed} from '@angular/core/rxjs-interop';
+import {Component} from '@angular/core';
 import {changeDetection} from '@demo/emulate/change-detection';
 import {TuiDemo} from '@demo/utils';
-import {TUI_EXPAND_LOADED, TuiExpand, TuiExpandComponent} from '@taiga-ui/core';
-import {timer} from 'rxjs';
 
 @Component({
     standalone: true,
-    imports: [TuiDemo, TuiExpand],
+    imports: [TuiDemo],
     templateUrl: './index.html',
     styleUrls: ['./index.less'],
     changeDetection,
 })
 export default class Page {
-    private readonly cdr = inject(ChangeDetectorRef);
-    private readonly destroyRef = inject(DestroyRef);
-
-    @ViewChild(TuiExpandComponent, {read: ElementRef})
-    protected expand?: ElementRef;
-
-    protected expanded = false;
-
-    protected async = false;
-
-    protected delayed = false;
-
-    protected onExpandedChange(expanded: boolean): void {
-        this.expanded = expanded;
-        this.delayed = this.async && expanded;
-
-        if (!this.async || !this.expanded) {
-            return;
-        }
-
-        timer(5000)
-            .pipe(takeUntilDestroyed(this.destroyRef))
-            .subscribe(() => {
-                const event = new CustomEvent(TUI_EXPAND_LOADED, {bubbles: true});
-
-                this.delayed = false;
-                this.cdr.detectChanges();
-                this.expand?.nativeElement.dispatchEvent(event);
-            });
-    }
+    protected readonly examples = ['Lazy', 'Eager', 'Async', 'Old syntax'];
 }

projects/experimental/components/expand/expand.component.ts

@@ -0,0 +1,45 @@
+import {NgIf, NgTemplateOutlet} from '@angular/common';
+import {
+    ChangeDetectionStrategy,
+    Component,
+    ContentChild,
+    Input,
+    TemplateRef,
+} from '@angular/core';
+import {TuiItem} from '@taiga-ui/cdk/directives';
+
+@Component({
+    standalone: true,
+    selector: 'tui-expand',
+    imports: [NgIf, NgTemplateOutlet],
+    template: `
+        <div class="t-wrapper">
+            <ng-container
+                *ngIf="expanded || animating"
+                [ngTemplateOutlet]="content || null"
+            />
+            <ng-content />
+        </div>
+    `,
+    styleUrls: ['./expand.style.less'],
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    host: {
+        '[class._expanded]': 'expanded',
+        '(transitionend.self)': 'onTransitionEnd($event)',
+    },
+})
+export class TuiExpand {
+    @ContentChild(TuiItem, {read: TemplateRef})
+    protected content?: TemplateRef<any>;
+
+    protected animating = false;
+
+    @Input()
+    public expanded = false;
+
+    protected onTransitionEnd({propertyName}: TransitionEvent): void {
+        if (propertyName === 'grid-template-rows') {
+            this.animating = this.expanded;
+        }
+    }
+}