docs(demo): display emission in @Output wherever possible

taiga-family · Dec 6, 2023 · 0dd7350 · 0dd7350
1 parent 95c92b9
commit 0dd7350
Show file tree

Hide file tree

Showing 18 changed files with 54 additions and 84 deletions.
diff --git a/projects/addon-doc/components/documentation/documentation-property-connector.directive.ts b/projects/addon-doc/components/documentation/documentation-property-connector.directive.ts
@@ -11,8 +11,9 @@ import {
 } from '@angular/core';
 import {ActivatedRoute, Params, UrlSerializer, UrlTree} from '@angular/router';
 import {TUI_DOC_URL_STATE_HANDLER} from '@taiga-ui/addon-doc/tokens';
-import {tuiCoerceValue} from '@taiga-ui/addon-doc/utils';
+import {tuiCoerceValue, tuiInspectAny} from '@taiga-ui/addon-doc/utils';
 import {tuiIsNumber, TuiStringHandler} from '@taiga-ui/cdk';
+import {TuiAlertService} from '@taiga-ui/core';
 import {BehaviorSubject, Subject} from 'rxjs';
 
 const SERIALIZED_SUFFIX = '$';
@@ -66,6 +67,7 @@ export class TuiDocDocumentationPropertyConnectorDirective<T>
         @Inject(UrlSerializer) private readonly urlSerializer: UrlSerializer,
         @Inject(TUI_DOC_URL_STATE_HANDLER)
         private readonly urlStateHandler: TuiStringHandler<UrlTree>,
+        @Inject(TuiAlertService) private readonly alerts: TuiAlertService,
     ) {}
 
     ngOnInit(): void {
@@ -108,6 +110,14 @@ export class TuiDocDocumentationPropertyConnectorDirective<T>
         console.info(this.attrName, event);
 
         this.emits$.next(this.emits$.value + 1);
+
+        let content: string | undefined;
+
+        if (event !== undefined) {
+            content = tuiInspectAny(event, 2);
+        }
+
+        this.alerts.open(content, {label: this.attrName}).subscribe();
     }
 
     private parseParams(params: Params): void {

diff --git a/projects/demo/src/modules/components/calendar-month/calendar-month.component.ts b/projects/demo/src/modules/components/calendar-month/calendar-month.component.ts
@@ -1,4 +1,4 @@
-import {Component, Inject} from '@angular/core';
+import {Component} from '@angular/core';
 import {changeDetection} from '@demo/emulate/change-detection';
 import {TuiDocExample} from '@taiga-ui/addon-doc';
 import {
@@ -11,7 +11,6 @@ import {
     TuiMonthRange,
     TuiYear,
 } from '@taiga-ui/cdk';
-import {TuiAlertService} from '@taiga-ui/core';
 
 @Component({
     selector: 'example-tui-calendar-month',
@@ -68,13 +67,4 @@ export class ExampleTuiCalendarMonthComponent {
     ];
 
     year = this.yearVariants[0];
-
-    constructor(
-        @Inject(TuiAlertService)
-        private readonly alerts: TuiAlertService,
-    ) {}
-
-    onMonthClick(month: TuiMonth): void {
-        this.alerts.open(String(month)).subscribe();
-    }
 }
diff --git a/projects/demo/src/modules/components/calendar-month/calendar-month.template.html b/projects/demo/src/modules/components/calendar-month/calendar-month.template.html
@@ -39,7 +39,7 @@
                 [min]="min"
                 [value]="value"
                 [year]="year"
-                (monthClick)="onMonthClick($event)"
+                (monthClick)="documentationPropertyMonthClick.emitEvent($event)"
             ></tui-calendar-month>
         </tui-doc-demo>
         <tui-doc-documentation>
@@ -91,6 +91,7 @@
                 Current year
             </ng-template>
             <ng-template
+                #documentationPropertyMonthClick="documentationProperty"
                 documentationPropertyMode="output"
                 documentationPropertyName="monthClick"
                 documentationPropertyType="TuiMonth"

diff --git a/projects/demo/src/modules/components/calendar/calendar.component.ts b/projects/demo/src/modules/components/calendar/calendar.component.ts
@@ -1,4 +1,4 @@
-import {Component, Inject} from '@angular/core';
+import {Component} from '@angular/core';
 import {changeDetection} from '@demo/emulate/change-detection';
 import {TuiDocExample} from '@taiga-ui/addon-doc';
 import {
@@ -10,11 +10,7 @@ import {
     TuiDayRange,
     TuiMonth,
 } from '@taiga-ui/cdk';
-import {
-    TUI_DEFAULT_MARKER_HANDLER,
-    TuiAlertService,
-    TuiMarkerHandler,
-} from '@taiga-ui/core';
+import {TUI_DEFAULT_MARKER_HANDLER, TuiMarkerHandler} from '@taiga-ui/core';
 
 const TWO_DOTS: [string, string] = ['var(--tui-primary)', 'var(--tui-info-fill)'];
 const ONE_DOT: [string] = ['var(--tui-success-fill)'];
@@ -123,13 +119,4 @@ export class ExampleTuiCalendarComponent {
     month = TuiMonth.currentLocal();
 
     hoveredItem: TuiDay | null = null;
-
-    constructor(
-        @Inject(TuiAlertService)
-        private readonly alerts: TuiAlertService,
-    ) {}
-
-    onDayClick(day: TuiDay): void {
-        this.alerts.open(String(day)).subscribe();
-    }
 }
diff --git a/projects/demo/src/modules/components/calendar/calendar.template.html b/projects/demo/src/modules/components/calendar/calendar.template.html
@@ -110,7 +110,7 @@
                 [value]="value"
                 [(hoveredItem)]="hoveredItem"
                 [(month)]="month"
-                (dayClick)="onDayClick($event)"
+                (dayClick)="documentationPropertyDayClick.emitEvent($event)"
             ></tui-calendar>
         </tui-doc-demo>
         <tui-doc-documentation>
@@ -204,6 +204,7 @@
                 Selected day or range
             </ng-template>
             <ng-template
+                #documentationPropertyDayClick="documentationProperty"
                 documentationPropertyMode="output"
                 documentationPropertyName="dayClick"
                 documentationPropertyType="TuiDay"

diff --git a/projects/demo/src/modules/components/filter/filter.component.ts b/projects/demo/src/modules/components/filter/filter.component.ts
@@ -1,9 +1,9 @@
-import {Component, Inject} from '@angular/core';
+import {Component} from '@angular/core';
 import {FormControl} from '@angular/forms';
 import {changeDetection} from '@demo/emulate/change-detection';
 import {TuiDocExample} from '@taiga-ui/addon-doc';
 import {ALWAYS_FALSE_HANDLER, TuiBooleanHandler, TuiHandler} from '@taiga-ui/cdk';
-import {TuiAlertService, TuiSizeL, TuiSizeXS} from '@taiga-ui/core';
+import {TuiSizeL, TuiSizeXS} from '@taiga-ui/core';
 
 class ItemWithBadge {
     constructor(
@@ -86,13 +86,4 @@ export class ExampleTuiFilterComponent {
     readonly sizeVariants: ReadonlyArray<TuiSizeL | TuiSizeXS> = ['xs', 's', 'm', 'l'];
 
     size = this.sizeVariants[2];
-
-    constructor(
-        @Inject(TuiAlertService)
-        private readonly alerts: TuiAlertService,
-    ) {}
-
-    onToggledItemChange(item: unknown): void {
-        this.alerts.open(String(item)).subscribe();
-    }
 }
diff --git a/projects/demo/src/modules/components/filter/filter.template.html b/projects/demo/src/modules/components/filter/filter.template.html
@@ -52,7 +52,7 @@
                     [formControl]="control"
                     [items]="items"
                     [size]="size"
-                    (toggledItem)="onToggledItemChange($event)"
+                    (toggledItem)="documentationPropertyToggledItem.emitEvent($event)"
                 ></tui-filter>
             </ng-template>
         </tui-doc-demo>
@@ -118,6 +118,7 @@
                 Size
             </ng-template>
             <ng-template
+                #documentationPropertyToggledItem="documentationProperty"
                 documentationPropertyMode="output"
                 documentationPropertyName="toggledItem"
                 documentationPropertyType="T"

diff --git a/projects/demo/src/modules/components/input-card-grouped/input-card-grouped.component.ts b/projects/demo/src/modules/components/input-card-grouped/input-card-grouped.component.ts
@@ -1,10 +1,9 @@
-import {Component, forwardRef, Inject} from '@angular/core';
+import {Component, forwardRef} from '@angular/core';
 import {FormControl} from '@angular/forms';
 import {changeDetection} from '@demo/emulate/change-detection';
 import {TuiCodeCVCLength} from '@taiga-ui/addon-commerce';
 import {TuiDocExample} from '@taiga-ui/addon-doc';
 import {tuiIsString} from '@taiga-ui/cdk';
-import {TuiAlertService} from '@taiga-ui/core';
 import {PolymorpheusContent} from '@tinkoff/ng-polymorpheus';
 
 import {ABSTRACT_PROPS_ACCESSOR} from '../abstract/inherited-documentation/abstract-props-accessor';
@@ -77,13 +76,6 @@ export class ExampleTuiInputCardGroupedComponent extends AbstractExampleTuiInter
 
     control = new FormControl();
 
-    constructor(
-        @Inject(TuiAlertService)
-        private readonly alerts: TuiAlertService,
-    ) {
-        super();
-    }
-
     get cardSrc(): PolymorpheusContent {
         return tuiIsString(this.cardSrcSelected)
             ? this.cards[this.cardSrcSelected]
@@ -102,10 +94,6 @@ export class ExampleTuiInputCardGroupedComponent extends AbstractExampleTuiInter
         }
     }
 
-    onBinChange(bin: string | null): void {
-        this.alerts.open(`bin: ${bin}`).subscribe();
-    }
-
     getContentVariants(
         template: PolymorpheusContent,
     ): readonly PolymorpheusContent[] | null {

diff --git a/projects/demo/src/modules/components/input-card-grouped/input-card-grouped.template.html b/projects/demo/src/modules/components/input-card-grouped/input-card-grouped.template.html
@@ -65,7 +65,7 @@
                     [pseudoHover]="pseudoHovered"
                     [pseudoInvalid]="pseudoInvalid"
                     [readOnly]="readOnly"
-                    (binChange)="onBinChange($event)"
+                    (binChange)="documentationPropertyBinChange.emitEvent($event)"
                 ></tui-input-card-grouped>
             </ng-template>
         </tui-doc-demo>
@@ -131,6 +131,7 @@
                 Code length
             </ng-template>
             <ng-template
+                #documentationPropertyBinChange="documentationProperty"
                 documentationPropertyMode="output"
                 documentationPropertyName="binChange"
                 documentationPropertyType="string | null"

diff --git a/projects/demo/src/modules/components/input-card/input-card.component.ts b/projects/demo/src/modules/components/input-card/input-card.component.ts
@@ -1,9 +1,12 @@
-import {Component, forwardRef, Inject} from '@angular/core';
+import {Component, forwardRef, ViewChild} from '@angular/core';
 import {FormControl, FormGroup, Validators} from '@angular/forms';
 import {changeDetection} from '@demo/emulate/change-detection';
 import {TuiCodeCVCLength, tuiCreateLuhnValidator} from '@taiga-ui/addon-commerce';
-import {TuiDocExample} from '@taiga-ui/addon-doc';
-import {TuiAlertService, TuiHintOptions} from '@taiga-ui/core';
+import {
+    TuiDocDocumentationPropertyConnectorDirective,
+    TuiDocExample,
+} from '@taiga-ui/addon-doc';
+import {TuiHintOptions} from '@taiga-ui/core';
 
 import {AbstractExampleTuiControl} from '../abstract/control';
 import {ABSTRACT_PROPS_ACCESSOR} from '../abstract/inherited-documentation/abstract-props-accessor';
@@ -21,6 +24,11 @@ import {ABSTRACT_PROPS_ACCESSOR} from '../abstract/inherited-documentation/abstr
     ],
 })
 export class ExampleTuiInputCardComponent extends AbstractExampleTuiControl {
+    @ViewChild('documentationPropertyBinChange', {
+        read: TuiDocDocumentationPropertyConnectorDirective,
+    })
+    binChangeProperty?: TuiDocDocumentationPropertyConnectorDirective<unknown>;
+
     readonly exampleModule = import('./examples/import/import-module.md?raw');
     readonly exampleHtml = import('./examples/import/insert-template.md?raw');
 
@@ -73,13 +81,6 @@ export class ExampleTuiInputCardComponent extends AbstractExampleTuiControl {
         cvc: new FormControl('', Validators.required),
     });
 
-    constructor(
-        @Inject(TuiAlertService)
-        private readonly alerts: TuiAlertService,
-    ) {
-        super();
-    }
-
     get cardSrc(): string | null {
         return this.cardSrcSelected === null ? null : this.cards[this.cardSrcSelected];
     }
@@ -121,8 +122,4 @@ export class ExampleTuiInputCardComponent extends AbstractExampleTuiControl {
 
         this.control.get(control)!.enable();
     }
-
-    onBinChange(bin: string | null): void {
-        this.alerts.open(`bin: ${bin}`).subscribe();
-    }
 }
diff --git a/projects/demo/src/modules/components/input-card/input-card.template.html b/projects/demo/src/modules/components/input-card/input-card.template.html
@@ -47,7 +47,7 @@
                         [tuiTextfieldCleaner]="cleaner"
                         [tuiTextfieldLabelOutside]="labelOutside"
                         [tuiTextfieldSize]="size"
-                        (binChange)="onBinChange($event)"
+                        (binChange)="binChangeProperty?.emitEvent($event)"
                     >
                         Card number
                     </tui-input-card>
@@ -135,6 +135,7 @@
                             SVG card icon
                         </ng-template>
                         <ng-template
+                            #documentationPropertyBinChange
                             documentationPropertyMode="output"
                             documentationPropertyName="binChange"
                             documentationPropertyType="string | null"

diff --git a/projects/demo/src/modules/components/input-files/input-files.template.html b/projects/demo/src/modules/components/input-files/input-files.template.html
@@ -72,7 +72,7 @@
                 [pseudoActive]="pseudoPressed"
                 [pseudoFocus]="pseudoFocused"
                 [pseudoHover]="pseudoHovered"
-                (reject)="updateRejected($event)"
+                (reject)="updateRejected($event); documentationPropertyReject.emitEvent($event)"
             >
                 <input
                     tuiInputFiles
@@ -94,7 +94,7 @@
                             [showDelete]="showDelete"
                             [showSize]="showSize"
                             [size]="size"
-                            (removed)="removeFile(file)"
+                            (removed)="removeFile(file); documentationPropertyRemoved.emitEvent($event)"
                         ></tui-file>
                     </ng-container>
                 </ng-container>
@@ -161,6 +161,7 @@
                 Max file size in bytes (30 MB by default — 30 * 1000 * 1000)
             </ng-template>
             <ng-template
+                #documentationPropertyReject="documentationProperty"
                 documentationPropertyMode="output"
                 documentationPropertyName="reject"
                 documentationPropertyType="TuiFileLike"
@@ -263,6 +264,7 @@
                 Component size
             </ng-template>
             <ng-template
+                #documentationPropertyRemoved="documentationProperty"
                 documentationPropertyMode="output"
                 documentationPropertyName="removed"
                 documentationPropertyType="TuiFileLike"

diff --git a/projects/demo/src/modules/components/line-clamp/line-clamp.template.html b/projects/demo/src/modules/components/line-clamp/line-clamp.template.html
@@ -54,6 +54,7 @@
                 [lineHeight]="lineHeight"
                 [linesLimit]="linesLimit"
                 [style.maxWidth.px]="maxWidth"
+                (overflownChange)="documentationPropertyOverflownChange.emitEvent($event)"
             ></tui-line-clamp>
             <ng-template #defaultExampleContent>
                 Lorem ipsum
@@ -91,6 +92,7 @@
                 Number of visible lines
             </ng-template>
             <ng-template
+                #documentationPropertyOverflownChange="documentationProperty"
                 documentationPropertyMode="output"
                 documentationPropertyName="overflownChange"
                 documentationPropertyType="boolean"

diff --git a/projects/demo/src/modules/components/mobile-calendar/mobile-calendar.template.html b/projects/demo/src/modules/components/mobile-calendar/mobile-calendar.template.html
@@ -77,6 +77,8 @@
                 [max]="max"
                 [min]="min"
                 [single]="single"
+                (cancel)="documentationPropertyCancel.emitEvent($event)"
+                (confirm)="documentationPropertyConfirm.emitEvent($event)"
             ></tui-mobile-calendar>
         </tui-doc-demo>
 
@@ -119,13 +121,15 @@
                 Single date or a range
             </ng-template>
             <ng-template
+                #documentationPropertyCancel="documentationProperty"
                 documentationPropertyMode="output"
                 documentationPropertyName="cancel"
                 documentationPropertyType="void"
             >
                 "Cancel" clicked
             </ng-template>
             <ng-template
+                #documentationPropertyConfirm="documentationProperty"
                 documentationPropertyMode="output"
                 documentationPropertyName="confirm"
                 documentationPropertyType="TuiDayRange | TuiDay"

diff --git a/projects/demo/src/modules/components/push/push.component.ts b/projects/demo/src/modules/components/push/push.component.ts
@@ -1,8 +1,7 @@
-import {Component, Inject} from '@angular/core';
+import {Component} from '@angular/core';
 import {changeDetection} from '@demo/emulate/change-detection';
 import {encapsulation} from '@demo/emulate/encapsulation';
 import {TuiDocExample} from '@taiga-ui/addon-doc';
-import {TuiAlertService} from '@taiga-ui/core';
 
 @Component({
     selector: 'example-tui-push',
@@ -34,12 +33,4 @@ export class ExampleTuiPushComponent {
     heading = '';
     type = '';
     timestamp = 0;
-
-    constructor(@Inject(TuiAlertService) private readonly alert: TuiAlertService) {}
-
-    onClose(): void {
-        this.alert
-            .open('Close button is visible when you subscribe to (close) output')
-            .subscribe();
-    }
 }