chore(demo): Dropdown, Appearance add hiddenOptions input

taiga-family · Sep 25, 2024 · 2ea6ef3 · 2ea6ef3
1 parent 0d97543
commit 2ea6ef3
Show file tree

Hide file tree

Showing 5 changed files with 31 additions and 3 deletions.
diff --git a/projects/demo/src/components/appearance/index.html b/projects/demo/src/components/appearance/index.html
@@ -12,6 +12,7 @@
     </td>
 </tr>
 <tr
+    *ngIf="tuiDocAppearance && !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"

diff --git a/projects/demo/src/components/appearance/index.ts b/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;

diff --git a/projects/demo/src/components/dropdown/index.html b/projects/demo/src/components/dropdown/index.html
@@ -12,6 +12,7 @@
     </td>
 </tr>
 <tr
+    *ngIf="!hiddenOptions.includes('open')"
     name="[(tuiDropdownOpen)]"
     tuiDocAPIItem
     type="boolean"
@@ -20,6 +21,7 @@
     Manual control/monitor for the dropdown being visible
 </tr>
 <tr
+    *ngIf="!hiddenOptions.includes('align')"
     name="[tuiDropdownAlign]"
     tuiDocAPIItem
     type="tuiDropdownAlign"
@@ -31,6 +33,7 @@
     )
 </tr>
 <tr
+    *ngIf="!hiddenOptions.includes('direction')"
     name="[tuiDropdownDirection]"
     tuiDocAPIItem
     type="TuiVerticalDirection | null"
@@ -40,6 +43,7 @@
     Set a vertical direction of dropdown
 </tr>
 <tr
+    *ngIf="!hiddenOptions.includes('limitWidth')"
     name="[tuiDropdownLimitWidth]"
     tuiDocAPIItem
     type="TuiDropdownWidth"
@@ -49,6 +53,7 @@
     Limit width of dropdown
 </tr>
 <tr
+    *ngIf="!hiddenOptions.includes('minHeight')"
     name="[tuiDropdownMinHeight]"
     tuiDocAPIItem
     type="number"
@@ -58,6 +63,7 @@
     <code>tuiDropdownDirection</code>
 </tr>
 <tr
+    *ngIf="!hiddenOptions.includes('maxHeight')"
     name="[tuiDropdownMaxHeight]"
     tuiDocAPIItem
     type="number"
@@ -66,6 +72,7 @@
     Maximum height of dropdown
 </tr>
 <tr
+    *ngIf="!hiddenOptions.includes('offset')"
     name="[tuiDropdownOffset]"
     tuiDocAPIItem
     type="number"

diff --git a/projects/demo/src/components/dropdown/index.ts b/projects/demo/src/components/dropdown/index.ts
@@ -1,10 +1,13 @@
+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 {TuiLooseUnion} from '@taiga-ui/cdk';
 import {
     TuiDropdown,
     type TuiDropdownAlign,
+    type TuiDropdownOptions,
     type TuiDropdownWidth,
     TuiLink,
     TuiTitle,
@@ -14,7 +17,7 @@ import {
 @Component({
     standalone: true,
     selector: 'tbody[tuiDocDropdown]',
-    imports: [RouterLink, TuiDocAPIItem, TuiDropdown, TuiLink, TuiTitle],
+    imports: [NgIf, RouterLink, TuiDocAPIItem, TuiDropdown, TuiLink, TuiTitle],
     templateUrl: './index.html',
     changeDetection: ChangeDetectionStrategy.OnPush,
 })
@@ -32,6 +35,9 @@ export class TuiDocDropdown {
     @Input()
     public tuiDocDropdown: readonly string[] | '' = '';
 
+    @Input()
+    public hiddenOptions: Array<TuiLooseUnion<keyof TuiDropdownOptions>> = [];
+
     public open = false;
 
     public align: TuiDropdownAlign = 'left';

diff --git a/projects/demo/src/modules/directives/dropdown/index.html b/projects/demo/src/modules/directives/dropdown/index.html
@@ -97,6 +97,7 @@
             <tbody
                 #dropdown
                 tuiDocDropdown
+                [hiddenOptions]="['open']"
             ></tbody>
         </table>
     </ng-template>