feat(experimental): Icon add new component (taiga-family#5872)

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

@@ -315,6 +315,14 @@ export const ROUTES: Routes = [
             title: `Fade`,
         },
     },
+    {
+        path: `experimental/icon`,
+        loadChildren: async () =>
+            (await import(`../experimental/icon/icon.module`)).ExampleTuiIconModule,
+        data: {
+            title: `Icon`,
+        },
+    },
     {
         path: `experimental/rating`,
         loadChildren: async () =>

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

@@ -885,6 +885,12 @@ export const pages: TuiDocPages = [
         keywords: `overflow, ellipsis, gradient, clamp, line`,
         route: `/experimental/fade`,
     },
+    {
+        section: `Experimental`,
+        title: `Icon`,
+        keywords: `icons, image, картинка, свг, svg, графика, иконка`,
+        route: `/experimental/icon`,
+    },
     {
         section: `Experimental`,
         title: `Rating `,

projects/demo/src/modules/experimental/icon/examples/1/index.html

@@ -0,0 +1,4 @@
+<tui-icon
+    [icon]="'tuiIconHeartLarge' | tuiIcon"
+    [style.color]="'var(--tui-primary)'"
+></tui-icon>

projects/demo/src/modules/experimental/icon/examples/1/index.ts

@@ -0,0 +1,11 @@
+import {Component} from '@angular/core';
+import {changeDetection} from '@demo/emulate/change-detection';
+import {encapsulation} from '@demo/emulate/encapsulation';
+
+@Component({
+    selector: 'tui-icon-example-1',
+    templateUrl: './index.html',
+    changeDetection,
+    encapsulation,
+})
+export class TuiIconExample1 {}

projects/demo/src/modules/experimental/icon/examples/2/index.html

@@ -0,0 +1,12 @@
+<tui-icon
+    icon="https://raw.githubusercontent.com/MarsiBarsi/readme-icons/main/github.svg"
+    class="red"
+></tui-icon>
+<tui-icon
+    icon="https://cdn-icons-png.flaticon.com/64/12710/12710759.png"
+    class="hover"
+></tui-icon>
+<tui-icon
+    class="text"
+    [icon]="'telegram' | tuiIcon"
+></tui-icon>

projects/demo/src/modules/experimental/icon/examples/2/index.less

@@ -0,0 +1,23 @@
+@import 'taiga-ui-local';
+
+:host {
+    display: flex;
+    gap: 1rem;
+}
+
+.red {
+    color: var(--tui-negative);
+}
+
+.hover {
+    .transition(color);
+    color: var(--tui-primary);
+
+    &:hover {
+        color: var(--tui-primary-hover);
+    }
+}
+
+.text {
+    color: var(--tui-text-02);
+}

projects/demo/src/modules/experimental/icon/examples/2/index.ts

@@ -0,0 +1,14 @@
+import {Component} from '@angular/core';
+import {changeDetection} from '@demo/emulate/change-detection';
+import {encapsulation} from '@demo/emulate/encapsulation';
+import {tuiIconResolverProvider} from '@taiga-ui/experimental';
+
+@Component({
+    selector: 'tui-icon-example-2',
+    templateUrl: './index.html',
+    styleUrls: ['./index.less'],
+    providers: [tuiIconResolverProvider(icon => `/assets/icons/${icon}.svg`)],
+    changeDetection,
+    encapsulation,
+})
+export class TuiIconExample2 {}

projects/demo/src/modules/experimental/icon/examples/3/index.html

@@ -0,0 +1,4 @@
+<tui-icon
+    icon="https://upload.wikimedia.org/wikipedia/commons/2/22/Wikipedia-Logo-black-and-white.png"
+    class="icon"
+></tui-icon>

projects/demo/src/modules/experimental/icon/examples/3/index.less

@@ -0,0 +1,10 @@
+.icon {
+    width: 3rem;
+    height: 3rem;
+    color: pink;
+    background: purple;
+
+    &:after {
+        mask-mode: luminance;
+    }
+}

projects/demo/src/modules/experimental/icon/examples/3/index.ts

@@ -0,0 +1,12 @@
+import {Component} from '@angular/core';
+import {changeDetection} from '@demo/emulate/change-detection';
+import {encapsulation} from '@demo/emulate/encapsulation';
+
+@Component({
+    selector: 'tui-icon-example-3',
+    templateUrl: './index.html',
+    styleUrls: ['./index.less'],
+    changeDetection,
+    encapsulation,
+})
+export class TuiIconExample3 {}

projects/demo/src/modules/experimental/icon/examples/import/import-module.md

@@ -0,0 +1,13 @@
+```ts
+import {NgModule} from '@angular/core';
+import {TuiIconModule} from '@taiga-ui/experimental';
+// ...
+
+@NgModule({
+  imports: [
+    // ...
+    TuiIconModule,
+  ],
+})
+export class MyModule {}
+```

projects/demo/src/modules/experimental/icon/examples/import/insert-template.md

@@ -0,0 +1,3 @@
+```html
+<tui-icon [icon]="'tuiIconCheck' | tuiIcon"></tui-icon>
+```

projects/demo/src/modules/experimental/icon/icon.component.ts

@@ -0,0 +1,36 @@
+import {Component} from '@angular/core';
+import {changeDetection} from '@demo/emulate/change-detection';
+import {TuiDocExample, TuiRawLoaderContent} from '@taiga-ui/addon-doc';
+
+@Component({
+    selector: 'example-icon',
+    templateUrl: './icon.template.html',
+    styleUrls: ['./icon.style.less'],
+    changeDetection,
+})
+export class ExampleTuiIconComponent {
+    readonly exampleModule: TuiRawLoaderContent = import(
+        './examples/import/import-module.md?raw'
+    );
+
+    readonly exampleHtml: TuiRawLoaderContent = import(
+        './examples/import/insert-template.md?raw'
+    );
+
+    readonly example1: TuiDocExample = {
+        TypeScript: import('./examples/1/index.ts?raw'),
+        HTML: import('./examples/1/index.html?raw'),
+    };
+
+    readonly example2: TuiDocExample = {
+        TypeScript: import('./examples/2/index.ts?raw'),
+        HTML: import('./examples/2/index.html?raw'),
+        LESS: import('./examples/2/index.less?raw'),
+    };
+
+    readonly example3: TuiDocExample = {
+        TypeScript: import('./examples/3/index.ts?raw'),
+        HTML: import('./examples/3/index.html?raw'),
+        LESS: import('./examples/3/index.less?raw'),
+    };
+}

projects/demo/src/modules/experimental/icon/icon.module.ts

@@ -0,0 +1,28 @@
+import {CommonModule} from '@angular/common';
+import {NgModule} from '@angular/core';
+import {tuiGetDocModules} from '@taiga-ui/addon-doc';
+import {TuiLinkModule, TuiNotificationModule} from '@taiga-ui/core';
+import {TuiIconModule} from '@taiga-ui/experimental';
+
+import {TuiIconExample1} from './examples/1';
+import {TuiIconExample2} from './examples/2';
+import {TuiIconExample3} from './examples/3';
+import {ExampleTuiIconComponent} from './icon.component';
+
+@NgModule({
+    imports: [
+        CommonModule,
+        TuiIconModule,
+        TuiLinkModule,
+        TuiNotificationModule,
+        tuiGetDocModules(ExampleTuiIconComponent),
+    ],
+    declarations: [
+        ExampleTuiIconComponent,
+        TuiIconExample1,
+        TuiIconExample2,
+        TuiIconExample3,
+    ],
+    exports: [ExampleTuiIconComponent],
+})
+export class ExampleTuiIconModule {}

projects/demo/src/modules/experimental/icon/icon.style.less

@@ -0,0 +1,5 @@
+@supports not (mask-mode: luminance) {
+    .luminance {
+        display: none;
+    }
+}

projects/demo/src/modules/experimental/icon/icon.template.html

@@ -0,0 +1,73 @@
+<tui-doc-page
+    header="Icon"
+    package="EXPERIMENTAL"
+    type="components"
+>
+    <ng-template pageTab>
+        <tui-notification status="warning">
+            This code is
+            <strong>experimental</strong>
+            and is a subject to change. Expect final solution to be shipped in the next major version
+        </tui-notification>
+
+        <p>A component to use icons and color them with CSS.</p>
+
+        <tui-doc-example
+            id="basic"
+            heading="Basic"
+            [content]="example1"
+        >
+            <tui-icon-example-1></tui-icon-example-1>
+        </tui-doc-example>
+
+        <tui-doc-example
+            id="external"
+            heading="External icons"
+            [content]="example2"
+        >
+            <tui-icon-example-2></tui-icon-example-2>
+        </tui-doc-example>
+
+        <tui-doc-example
+            id="duo"
+            heading="Two colors"
+            class="luminance"
+            [content]="example3"
+        >
+            <tui-notification class="tui-space_bottom-4">
+                This example only works in
+                <a
+                    href="https://caniuse.com/?search=mask-mode"
+                    rel="noreferrer"
+                    target="_blank"
+                    tuiLink
+                >
+                    modern browsers
+                </a>
+            </tui-notification>
+            <tui-icon-example-3></tui-icon-example-3>
+        </tui-doc-example>
+    </ng-template>
+
+    <ng-template pageTab="Setup">
+        <ol class="b-demo-steps">
+            <li>
+                <p>Import module:</p>
+
+                <tui-doc-code
+                    filename="myComponent.module.ts"
+                    [code]="exampleModule"
+                ></tui-doc-code>
+            </li>
+
+            <li>
+                <p>Add to the template:</p>
+
+                <tui-doc-code
+                    filename="myComponent.template.html"
+                    [code]="exampleHtml"
+                ></tui-doc-code>
+            </li>
+        </ol>
+    </ng-template>
+</tui-doc-page>

projects/experimental/components/icon/icon.component.ts

@@ -0,0 +1,13 @@
+import {ChangeDetectionStrategy, Component, Input} from '@angular/core';
+
+@Component({
+    selector: 'tui-icon',
+    template: '',
+    host: {'[style.--t-mask]': '"url(" + icon + ")"'},
+    styleUrls: ['./icon.style.less'],
+    changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class TuiIconComponent {
+    @Input()
+    icon = '';
+}

projects/experimental/components/icon/icon.module.ts

@@ -0,0 +1,10 @@
+import {NgModule} from '@angular/core';
+
+import {TuiIconComponent} from './icon.component';
+import {TuiIconPipe} from './icon.pipe';
+
+@NgModule({
+    declarations: [TuiIconComponent, TuiIconPipe],
+    exports: [TuiIconComponent, TuiIconPipe],
+})
+export class TuiIconModule {}

projects/experimental/components/icon/icon.pipe.ts

@@ -0,0 +1,26 @@
+import {Inject, Pipe, PipeTransform, Provider} from '@angular/core';
+import {tuiCreateTokenFromFactory, TuiStringHandler} from '@taiga-ui/cdk';
+
+export const TUI_ICON_RESOLVER = tuiCreateTokenFromFactory<TuiStringHandler<string>>(
+    () => icon => `/assets/taiga-ui/icons/${icon}.svg`,
+);
+
+export function tuiIconResolverProvider(useValue: TuiStringHandler<string>): Provider {
+    return {
+        provide: TUI_ICON_RESOLVER,
+        useValue,
+    };
+}
+
+@Pipe({
+    name: `tuiIcon`,
+})
+export class TuiIconPipe implements PipeTransform {
+    constructor(
+        @Inject(TUI_ICON_RESOLVER) private readonly resolver: TuiStringHandler<string>,
+    ) {}
+
+    transform(icon: string): string {
+        return this.resolver(icon);
+    }
+}

projects/experimental/components/icon/icon.style.less

@@ -0,0 +1,17 @@
+@import 'taiga-ui-local';
+
+:host {
+    position: relative;
+    display: inline-block;
+    width: 1.5rem;
+    height: 1.5rem;
+    vertical-align: middle;
+    mask: var(--t-mask) no-repeat center/contain;
+
+    &:after {
+        .fullsize();
+        content: '';
+        mask: inherit;
+        background: currentColor;
+    }
+}

projects/experimental/components/icon/index.ts

@@ -0,0 +1,3 @@
+export * from './icon.component';
+export * from './icon.module';
+export * from './icon.pipe';

projects/experimental/components/icon/ng-package.json

@@ -0,0 +1,8 @@
+{
+    "lib": {
+        "entryFile": "index.ts",
+        "styleIncludePaths": [
+            "../../../core/styles"
+        ]
+    }
+}

projects/experimental/components/index.ts

@@ -6,6 +6,7 @@ export * from '@taiga-ui/experimental/components/badged-content';
 export * from '@taiga-ui/experimental/components/button';
 export * from '@taiga-ui/experimental/components/checkbox';
 export * from '@taiga-ui/experimental/components/compass';
+export * from '@taiga-ui/experimental/components/icon';
 export * from '@taiga-ui/experimental/components/radio';
 export * from '@taiga-ui/experimental/components/rating';
 export * from '@taiga-ui/experimental/components/thumbnail-card';