feat(cdk): implement tuiIsPresent pipe (#3002)

projects/cdk/pipes/index.ts

@@ -1,3 +1,4 @@
 export * from '@taiga-ui/cdk/pipes/filter';
+export * from '@taiga-ui/cdk/pipes/is-present';
 export * from '@taiga-ui/cdk/pipes/keys';
 export * from '@taiga-ui/cdk/pipes/mapper';

projects/cdk/pipes/is-present/index.ts

@@ -0,0 +1,2 @@
+export * from './is-present.module';
+export * from './is-present.pipe';

projects/cdk/pipes/is-present/is-present.module.ts

@@ -0,0 +1,9 @@
+import {NgModule} from '@angular/core';
+
+import {TuiIsPresentPipe} from './is-present.pipe';
+
+@NgModule({
+    declarations: [TuiIsPresentPipe],
+    exports: [TuiIsPresentPipe],
+})
+export class TuiIsPresentPipeModule {}

projects/cdk/pipes/is-present/is-present.pipe.ts

@@ -0,0 +1,9 @@
+import {Pipe, PipeTransform} from '@angular/core';
+import {tuiIsPresent} from '@taiga-ui/cdk/utils';
+
+@Pipe({name: `tuiIsPresent`})
+export class TuiIsPresentPipe implements PipeTransform {
+    transform<T>(value?: T | null): value is T {
+        return tuiIsPresent(value);
+    }
+}

projects/cdk/pipes/is-present/ng-package.json

@@ -0,0 +1,5 @@
+{
+    "lib": {
+        "entryFile": "index.ts"
+    }
+}

projects/demo/src/modules/app/app.routes.ts

@@ -1429,6 +1429,15 @@ export const ROUTES = [
             title: `FormatPhone`,
         },
     },
+    {
+        path: `pipes/is-present`,
+        loadChildren: async () =>
+            (await import(`../pipes/is-present/is-present.module`))
+                .ExampleTuiIsPresentModule,
+        data: {
+            title: `IsPresent`,
+        },
+    },
     {
         path: `pipes/mapper`,
         loadChildren: async () =>

projects/demo/src/modules/app/pages.ts

@@ -1153,6 +1153,12 @@ export const pages: TuiDocPages = [
                 keywords: `format, форматирование, преобразование, phone, телефон, пайп, pipe`,
                 route: `/pipes/format-phone`,
             },
+            {
+                section: $localize`Tools`,
+                title: `IsPresent`,
+                keywords: `present, существует, ngif, if, пайп, pipe, null, undefined, nil`,
+                route: `/pipes/is-present`,
+            },
             {
                 section: $localize`Tools`,
                 title: `Mapper`,

projects/demo/src/modules/pipes/is-present/examples/1/component.ts

@@ -0,0 +1,22 @@
+import {Component} from '@angular/core';
+import {changeDetection} from '@demo/emulate/change-detection';
+import {encapsulation} from '@demo/emulate/encapsulation';
+import {of, Subject} from 'rxjs';
+import {delayWhen} from 'rxjs/operators';
+
+@Component({
+    selector: `tui-is-present-example1`,
+    templateUrl: `./template.html`,
+    changeDetection,
+    encapsulation,
+})
+export class TuiIsPresentExample1 {
+    private readonly loadCountSubject = new Subject<void>();
+
+    readonly count$ = of(0).pipe(delayWhen(() => this.loadCountSubject));
+
+    loadCount(): void {
+        this.loadCountSubject.next();
+        this.loadCountSubject.complete();
+    }
+}

projects/demo/src/modules/pipes/is-present/examples/1/template.html

@@ -0,0 +1,23 @@
+<ng-container *tuiLet="count$ | async as count">
+    <div *ngIf="count | tuiIsPresent; else loading">
+        count is
+        <code>{{ count | json }}</code>
+    </div>
+
+    <ng-template #loading>
+        <div>
+            count is
+            <code>{{ count | json }}</code>
+            while it's loading
+        </div>
+    </ng-template>
+</ng-container>
+
+<button
+    tuiButton
+    size="m"
+    class="tui-space_top-4"
+    (click)="loadCount()"
+>
+    Load count
+</button>

projects/demo/src/modules/pipes/is-present/examples/import/import-module.md

@@ -0,0 +1,14 @@
+```ts
+import {TuiIsPresentPipeModule} from '@taiga-ui/cdk';
+
+// ...
+
+@NgModule({
+  imports: [
+    // ...
+    TuiIsPresentPipeModule,
+  ],
+  // ...
+})
+export class MyModule {}
+```

projects/demo/src/modules/pipes/is-present/examples/import/insert-template.md

@@ -0,0 +1,3 @@
+```html
+<div *ngIf="item | tuiIsPresent">{{item}}</div>
+```

projects/demo/src/modules/pipes/is-present/is-present.component.ts

@@ -0,0 +1,18 @@
+import {Component} from '@angular/core';
+import {changeDetection} from '@demo/emulate/change-detection';
+import {TuiDocExample} from '@taiga-ui/addon-doc';
+
+@Component({
+    selector: `example-tui-is-present`,
+    templateUrl: `./is-present.template.html`,
+    changeDetection,
+})
+export class ExampleTuiIsPresentComponent {
+    readonly exampleModule = import(`./examples/import/import-module.md?raw`);
+    readonly exampleHtml = import(`./examples/import/insert-template.md?raw`);
+
+    readonly example1: TuiDocExample = {
+        TypeScript: import(`./examples/1/component.ts?raw`),
+        HTML: import(`./examples/1/template.html?raw`),
+    };
+}

projects/demo/src/modules/pipes/is-present/is-present.module.ts

@@ -0,0 +1,29 @@
+import {CommonModule} from '@angular/common';
+import {NgModule} from '@angular/core';
+import {ReactiveFormsModule} from '@angular/forms';
+import {RouterModule} from '@angular/router';
+import {TuiAddonDocModule, tuiGenerateRoutes} from '@taiga-ui/addon-doc';
+import {TuiIsPresentPipeModule, TuiLetModule} from '@taiga-ui/cdk';
+import {TuiButtonModule, TuiLinkModule} from '@taiga-ui/core';
+import {TuiDataListWrapperModule, TuiSelectModule} from '@taiga-ui/kit';
+
+import {TuiIsPresentExample1} from './examples/1/component';
+import {ExampleTuiIsPresentComponent} from './is-present.component';
+
+@NgModule({
+    imports: [
+        CommonModule,
+        TuiAddonDocModule,
+        RouterModule.forChild(tuiGenerateRoutes(ExampleTuiIsPresentComponent)),
+        ReactiveFormsModule,
+        TuiIsPresentPipeModule,
+        TuiLinkModule,
+        TuiSelectModule,
+        TuiDataListWrapperModule,
+        TuiButtonModule,
+        TuiLetModule,
+    ],
+    declarations: [ExampleTuiIsPresentComponent, TuiIsPresentExample1],
+    exports: [ExampleTuiIsPresentComponent],
+})
+export class ExampleTuiIsPresentModule {}

projects/demo/src/modules/pipes/is-present/is-present.template.html

@@ -0,0 +1,55 @@
+<tui-doc-page
+    header="IsPresent"
+    package="CDK"
+    type="pipes"
+>
+    <ng-template
+        i18n
+        pageTab
+    >
+        Pipe wrapper for
+        <a
+            tuiLink
+            routerLink="/utils/miscellaneous"
+            fragment="isPresent"
+        >
+            <code>IsPresent</code>
+        </a>
+        function
+
+        <tui-doc-example
+            id="base"
+            i18n-heading
+            heading="Basic"
+            [content]="example1"
+        >
+            <tui-is-present-example1></tui-is-present-example1>
+        </tui-doc-example>
+    </ng-template>
+
+    <ng-template pageTab="Setup">
+        <ol class="b-demo-steps">
+            <li>
+                <p i18n>
+                    Import
+                    <code>TuiIsPresentPipeModule</code>
+                    into a module where you want to use our pipe
+                </p>
+
+                <tui-doc-code
+                    filename="myComponent.module.ts"
+                    [code]="exampleModule"
+                ></tui-doc-code>
+            </li>
+
+            <li>
+                <p i18n>Use pipe in template:</p>
+
+                <tui-doc-code
+                    filename="myComponent.template.html"
+                    [code]="exampleHtml"
+                ></tui-doc-code>
+            </li>
+        </ol>
+    </ng-template>
+</tui-doc-page>