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

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

Hide file tree

Showing 51 changed files with 188 additions and 111 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
@@ -13,6 +13,7 @@ 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 {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 {
@@ -103,11 +105,29 @@ export class TuiDocDocumentationPropertyConnectorDirective<T>
         this.setQueryParam(value);
     }
 
-    emitEvent(event: unknown): void {
+    emitEvent(event: unknown, showAlert = true): void {
         // For more convenient debugging
         console.info(this.attrName, event);
 
         this.emits$.next(this.emits$.value + 1);
+
+        if (!showAlert) {
+            return;
+        }
+
+        let content: string | undefined;
+
+        if (event !== undefined) {
+            content = String(event);
+
+            if (content === '[object Object]') {
+                try {
+                    content = JSON.stringify(event);
+                } catch {}
+            }
+        }
+
+        this.alerts.open(content, {label: this.attrName}).subscribe();
     }
 
     private parseParams(params: Params): void {

diff --git a/.../modules/components/abstract/inherited-documentation/inherited-documentation.component.ts b/.../modules/components/abstract/inherited-documentation/inherited-documentation.component.ts
@@ -1,5 +1,6 @@
-import {Component, Inject, Input} from '@angular/core';
+import {Component, Inject, Input, ViewChild} from '@angular/core';
 import {changeDetection} from '@demo/emulate/change-detection';
+import {TuiDocDocumentationPropertyConnectorDirective} from '@taiga-ui/addon-doc';
 import {TUI_HINT_DIRECTIONS} from '@taiga-ui/core';
 
 import {AbstractExampleTuiControl} from '../control';
@@ -14,6 +15,11 @@ import {TuiSupportingDocumentationComponent} from './supporting-documentation-co
     changeDetection,
 })
 export class InheritedDocumentationComponent {
+    @ViewChild('documentationPropertyFocusedChange', {
+        read: TuiDocDocumentationPropertyConnectorDirective,
+    })
+    propertyFocusedChange?: TuiDocDocumentationPropertyConnectorDirective<unknown>;
+
     @Input()
     dropdown = false;
 
@@ -51,4 +57,8 @@ export class InheritedDocumentationComponent {
     ): documentedComponent is AbstractExampleTuiHint {
         return documentedComponent instanceof AbstractExampleTuiHint;
     }
+
+    emitFocusedChange(event: boolean): void {
+        this.propertyFocusedChange?.emitEvent(event, false);
+    }
 }
diff --git a/...modules/components/abstract/inherited-documentation/inherited-documentation.template.html b/...modules/components/abstract/inherited-documentation/inherited-documentation.template.html
@@ -76,6 +76,7 @@ <h6 class="tui-text_h6">
             Visual pressed state
         </ng-template>
         <ng-template
+            #documentationPropertyFocusedChange
             documentationPropertyMode="output"
             documentationPropertyName="focusedChange"
             documentationPropertyType="boolean"

diff --git a/projects/demo/src/modules/components/button/button.template.html b/projects/demo/src/modules/components/button/button.template.html
@@ -97,6 +97,7 @@
                     [shape]="shape"
                     [showLoader]="showLoader"
                     [size]="size"
+                    (focusedChange)="inherited.emitFocusedChange($event)"
                 ></button>
                 <ng-template #button>
                     <button
@@ -113,6 +114,7 @@
                         [shape]="shape"
                         [showLoader]="showLoader"
                         [size]="size"
+                        (focusedChange)="inherited.emitFocusedChange($event)"
                     >
                         Content
                     </button>
@@ -198,7 +200,7 @@
                 Size
             </ng-template>
         </tui-doc-documentation>
-        <inherited-documentation></inherited-documentation>
+        <inherited-documentation #inherited></inherited-documentation>
     </ng-template>
 
     <ng-template pageTab>

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/checkbox-block/checkbox-block.template.html b/projects/demo/src/modules/components/checkbox-block/checkbox-block.template.html
@@ -51,6 +51,7 @@
                         [pseudoInvalid]="pseudoInvalid"
                         [readOnly]="readOnly"
                         [size]="currentSize"
+                        (focusedChange)="inherited.emitFocusedChange($event)"
                     >
                         One option
                     </tui-checkbox-block>
@@ -66,6 +67,7 @@
                         [pseudoInvalid]="pseudoInvalid"
                         [readOnly]="readOnly"
                         [size]="currentSize"
+                        (focusedChange)="inherited.emitFocusedChange($event)"
                     >
                         An alternative one
                     </tui-checkbox-block>
@@ -81,6 +83,7 @@
                         [pseudoInvalid]="pseudoInvalid"
                         [readOnly]="readOnly"
                         [size]="currentSize"
+                        (focusedChange)="inherited.emitFocusedChange($event)"
                     >
                         Other
                     </tui-checkbox-block>
@@ -125,6 +128,7 @@
             </ng-template>
         </tui-doc-documentation>
         <inherited-documentation
+            #inherited
             [withHint]="false"
             [withTextFieldController]="false"
         ></inherited-documentation>

diff --git a/projects/demo/src/modules/components/checkbox-labeled/checkbox-labeled.template.html b/projects/demo/src/modules/components/checkbox-labeled/checkbox-labeled.template.html
@@ -48,6 +48,7 @@
                         [pseudoInvalid]="pseudoInvalid"
                         [readOnly]="readOnly"
                         [size]="size"
+                        (focusedChange)="inherited.emitFocusedChange($event)"
                     >
                         An option
                     </tui-checkbox-labeled>
@@ -61,6 +62,7 @@
                         [pseudoInvalid]="pseudoInvalid"
                         [readOnly]="readOnly"
                         [size]="size"
+                        (focusedChange)="inherited.emitFocusedChange($event)"
                     >
                         An alternative one
                     </tui-checkbox-labeled>
@@ -74,6 +76,7 @@
                         [pseudoInvalid]="pseudoInvalid"
                         [readOnly]="readOnly"
                         [size]="size"
+                        (focusedChange)="inherited.emitFocusedChange($event)"
                     >
                         Other
                     </tui-checkbox-labeled>
@@ -101,6 +104,7 @@
             </ng-template>
         </tui-doc-documentation>
         <inherited-documentation
+            #inherited
             [withHint]="false"
             [withTextFieldController]="false"
         ></inherited-documentation>

diff --git a/projects/demo/src/modules/components/checkbox/checkbox.template.html b/projects/demo/src/modules/components/checkbox/checkbox.template.html
@@ -57,6 +57,7 @@
                         [pseudoInvalid]="pseudoInvalid"
                         [readOnly]="readOnly"
                         [size]="size"
+                        (focusedChange)="inherited.emitFocusedChange($event)"
                     ></tui-checkbox>
                     <tui-checkbox
                         formControlName="testValue2"
@@ -67,6 +68,7 @@
                         [pseudoInvalid]="pseudoInvalid"
                         [readOnly]="readOnly"
                         [size]="size"
+                        (focusedChange)="inherited.emitFocusedChange($event)"
                     ></tui-checkbox>
                     <tui-checkbox
                         formControlName="testValue3"
@@ -77,6 +79,7 @@
                         [pseudoInvalid]="pseudoInvalid"
                         [readOnly]="readOnly"
                         [size]="size"
+                        (focusedChange)="inherited.emitFocusedChange($event)"
                     ></tui-checkbox>
                 </form>
             </ng-template>
@@ -102,6 +105,7 @@
             </ng-template>
         </tui-doc-documentation>
         <inherited-documentation
+            #inherited
             [withHint]="false"
             [withTextFieldController]="false"
         ></inherited-documentation>

diff --git a/projects/demo/src/modules/components/combo-box/combo-box.template.html b/projects/demo/src/modules/components/combo-box/combo-box.template.html
@@ -131,6 +131,7 @@
                     [tuiTextfieldSize]="size"
                     [valueContent]="valueContent"
                     [(search)]="search"
+                    (focusedChange)="inherited.emitFocusedChange($event)"
                     (tuiDropdownOpenChange)="dropdownOpen.next($event)"
                 >
                     Choose an account
@@ -255,7 +256,10 @@
                 A template for custom view of selected value
             </ng-template>
         </tui-doc-documentation>
-        <inherited-documentation [dropdown]="true"></inherited-documentation>
+        <inherited-documentation
+            #inherited
+            [dropdown]="true"
+        ></inherited-documentation>
     </ng-template>
     <ng-template pageTab>
         <ol class="b-demo-steps">

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 {