chore(demo): Dropdown add reuse component & migrate example to new approach

projects/demo/src/components/appearance/index.html

@@ -12,6 +12,7 @@
     </td>
 </tr>
 <tr
+    *ngIf="!hiddenOptions.includes('appearance')"
     name="[appearance]"
     tuiDocAPIItem
     type="string"
@@ -22,6 +23,7 @@
     Appearance of the element
 </tr>
 <tr
+    *ngIf="!hiddenOptions.includes('state')"
     name="[tuiAppearanceState]"
     tuiDocAPIItem
     type="TuiInteractiveState | null"
@@ -31,6 +33,7 @@
     Manual interactive state override
 </tr>
 <tr
+    *ngIf="!hiddenOptions.includes('focus')"
     name="[tuiAppearanceFocus]"
     tuiDocAPIItem
     type="boolean | null"
@@ -40,6 +43,7 @@
     Manual focus state override
 </tr>
 <tr
+    *ngIf="!hiddenOptions.includes('mode')"
     name="[tuiAppearanceMode]"
     tuiDocAPIItem
     type="string | string[] | null"

projects/demo/src/components/appearance/index.ts

@@ -1,13 +1,20 @@
+import {NgIf} from '@angular/common';
 import {ChangeDetectionStrategy, Component, Input} from '@angular/core';
 import {RouterLink} from '@angular/router';
 import {DemoRoute} from '@demo/routes';
 import {TuiDocAPIItem} from '@taiga-ui/addon-doc';
-import {type TuiInteractiveState, TuiLink, TuiTitle} from '@taiga-ui/core';
+import type {TuiLooseUnion} from '@taiga-ui/cdk';
+import {
+    type TuiAppearanceOptions,
+    type TuiInteractiveState,
+    TuiLink,
+    TuiTitle,
+} from '@taiga-ui/core';
 
 @Component({
     standalone: true,
     selector: 'tbody[tuiDocAppearance]',
-    imports: [RouterLink, TuiDocAPIItem, TuiLink, TuiTitle],
+    imports: [NgIf, RouterLink, TuiDocAPIItem, TuiLink, TuiTitle],
     templateUrl: './index.html',
     changeDetection: ChangeDetectionStrategy.OnPush,
 })
@@ -46,6 +53,9 @@ export class TuiDocAppearance {
     @Input()
     public tuiDocAppearance: readonly string[] | '' = '';
 
+    @Input()
+    public hiddenOptions: Array<TuiLooseUnion<keyof TuiAppearanceOptions>> = [];
+
     public state: TuiInteractiveState | null = null;
     public focus: boolean | null = null;
     public mode: string | readonly string[] | null = null;

projects/demo/src/components/dropdown/index.html

@@ -0,0 +1,82 @@
+<tr>
+    <td colspan="3">
+        <span tuiTitle>
+            <a
+                tuiLink
+                [routerLink]="routes.Dropdown"
+            >
+                <strong>Dropdown</strong>
+            </a>
+            <span tuiSubtitle>Applied as a host directive</span>
+        </span>
+    </td>
+</tr>
+<tr
+    *ngIf="!hiddenOptions.includes('open')"
+    name="[(open)]"
+    tuiDocAPIItem
+    type="boolean"
+    [(value)]="open"
+>
+    Manual control/monitor for the dropdown being visible
+</tr>
+<tr
+    *ngIf="!hiddenOptions.includes('align')"
+    name="[tuiDropdownAlign]"
+    tuiDocAPIItem
+    type="tuiDropdownAlign"
+    [items]="aligns"
+    [(value)]="align"
+>
+    Align of dropdown (does not work together with
+    <code>limitWidth === 'fixed'</code>
+    )
+</tr>
+<tr
+    *ngIf="!hiddenOptions.includes('direction')"
+    name="[tuiDropdownDirection]"
+    tuiDocAPIItem
+    type="TuiVerticalDirection | null"
+    [items]="directions"
+    [(value)]="direction"
+>
+    Set a vertical direction of dropdown
+</tr>
+<tr
+    *ngIf="!hiddenOptions.includes('limitWidth')"
+    name="[tuiDropdownLimitWidth]"
+    tuiDocAPIItem
+    type="TuiDropdownWidth"
+    [items]="limitWidths"
+    [(value)]="limitWidth"
+>
+    Limit width of dropdown
+</tr>
+<tr
+    *ngIf="!hiddenOptions.includes('minHeight')"
+    name="[tuiDropdownMinHeight]"
+    tuiDocAPIItem
+    type="number"
+    [(value)]="minHeight"
+>
+    Minimum height to calculate that dropdown fits to set
+    <code>tuiDropdownDirection</code>
+</tr>
+<tr
+    *ngIf="!hiddenOptions.includes('maxHeight')"
+    name="[tuiDropdownMaxHeight]"
+    tuiDocAPIItem
+    type="number"
+    [(value)]="maxHeight"
+>
+    Maximum height of dropdown
+</tr>
+<tr
+    *ngIf="!hiddenOptions.includes('offset')"
+    name="[tuiDropdownOffset]"
+    tuiDocAPIItem
+    type="number"
+    [(value)]="offset"
+>
+    Dropdown offset
+</tr>

projects/demo/src/components/dropdown/index.ts

@@ -0,0 +1,50 @@
+import {NgIf} from '@angular/common';
+import {ChangeDetectionStrategy, Component, inject, Input} from '@angular/core';
+import {RouterLink} from '@angular/router';
+import {DemoRoute} from '@demo/routes';
+import {TuiDocAPIItem} from '@taiga-ui/addon-doc';
+import type {TuiLooseUnion} from '@taiga-ui/cdk';
+import {
+    TUI_DROPDOWN_OPTIONS,
+    TuiDropdown,
+    type TuiDropdownAlign,
+    type TuiDropdownOptions,
+    type TuiDropdownWidth,
+    TuiLink,
+    TuiTitle,
+    type TuiVerticalDirection,
+} from '@taiga-ui/core';
+
+@Component({
+    standalone: true,
+    selector: 'tbody[tuiDocDropdown]',
+    imports: [NgIf, RouterLink, TuiDocAPIItem, TuiDropdown, TuiLink, TuiTitle],
+    templateUrl: './index.html',
+    changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class TuiDocDropdown {
+    private readonly options = inject(TUI_DROPDOWN_OPTIONS);
+
+    protected readonly routes = DemoRoute;
+
+    protected readonly aligns: readonly TuiDropdownAlign[] = ['left', 'right', 'center'];
+    protected readonly directions: TuiVerticalDirection[] = ['bottom', 'top'];
+    protected readonly limitWidths: readonly TuiDropdownWidth[] = [
+        'auto',
+        'min',
+        'fixed',
+    ];
+
+    @Input()
+    public hiddenOptions: Array<TuiLooseUnion<keyof TuiDropdownOptions>> = [];
+
+    public align: TuiDropdownAlign = this.options.align;
+    public direction: TuiVerticalDirection | null = this.options.direction;
+    public minHeight = this.options.minHeight;
+    public maxHeight = this.options.maxHeight;
+    public offset = this.options.offset;
+    public appearance = this.options.appearance;
+    public limitWidth: TuiDropdownWidth = 'fixed';
+
+    public open = false;
+}

projects/demo/src/modules/directives/dropdown/index.html

@@ -49,13 +49,13 @@
                     tuiButton
                     type="button"
                     [tuiDropdown]="dropdownContent"
-                    [tuiDropdownAlign]="dropdownAlign"
-                    [tuiDropdownDirection]="dropdownDirection"
-                    [tuiDropdownLimitWidth]="dropdownLimitWidth"
+                    [tuiDropdownAlign]="dropdown.align"
+                    [tuiDropdownDirection]="dropdown.direction"
+                    [tuiDropdownLimitWidth]="dropdown.limitWidth"
                     [tuiDropdownManual]="open"
-                    [tuiDropdownMaxHeight]="dropdownMaxHeight"
-                    [tuiDropdownMinHeight]="dropdownMinHeight"
-                    [tuiDropdownOffset]="dropdownOffset"
+                    [tuiDropdownMaxHeight]="dropdown.maxHeight"
+                    [tuiDropdownMinHeight]="dropdown.minHeight"
+                    [tuiDropdownOffset]="dropdown.offset"
                     (click)="onClick()"
                     (tuiObscured)="onObscured($event)"
                 >
@@ -78,24 +78,28 @@
                 </ng-template>
             </span>
         </tui-doc-demo>
-        <tui-doc-documentation>
-            <ng-template
-                documentationPropertyMode="input"
-                documentationPropertyName="tuiDropdownManual"
-                documentationPropertyType="boolean"
-                [(documentationPropertyValue)]="open"
+        <table tuiDocAPI>
+            <tr
+                name="[tuiDropdownManual]"
+                tuiDocAPIItem
+                type="boolean"
+                [(value)]="open"
             >
                 Show dropdown (basic manual implementation, see related pages for other options)
-            </ng-template>
-            <ng-template
-                documentationPropertyMode="input"
-                documentationPropertyName="tuiDropdown"
-                documentationPropertyType="PolymorpheusContent"
+            </tr>
+            <tr
+                name="[tuiDropdown]"
+                tuiDocAPIItem
+                type="PolymorpheusContent"
             >
                 Content
-            </ng-template>
-            <dropdown-documentation />
-        </tui-doc-documentation>
+            </tr>
+            <tbody
+                #dropdown
+                tuiDocDropdown
+                [hiddenOptions]="['open']"
+            ></tbody>
+        </table>
     </ng-template>
 
     <tui-setup *pageTab />

projects/demo/src/modules/directives/dropdown/index.ts

@@ -1,4 +1,5 @@
 import {Component, forwardRef} from '@angular/core';
+import {TuiDocDropdown} from '@demo/components/dropdown';
 import {changeDetection} from '@demo/emulate/change-detection';
 import {DemoRoute} from '@demo/routes';
 import {TuiDemo} from '@demo/utils';
@@ -16,6 +17,7 @@ import {DropdownDocumentation} from '../../components/abstract/dropdown-document
         TuiActiveZone,
         TuiButton,
         TuiDemo,
+        TuiDocDropdown,
         TuiDropdown,
         TuiObscured,
     ],