chore(experimental): refactor some components (#6005)

taiga-family · Nov 20, 2023 · f6e7877 · f6e7877
1 parent 7897114
commit f6e7877
Show file tree

Hide file tree

Showing 20 changed files with 212 additions and 340 deletions.
diff --git a/projects/demo/src/modules/experimental/badge/badge.module.ts b/projects/demo/src/modules/experimental/badge/badge.module.ts
@@ -7,10 +7,9 @@ import {
     TuiLabelModule,
     TuiModeModule,
     TuiNotificationModule,
-    TuiSvgModule,
     TuiTextfieldControllerModule,
 } from '@taiga-ui/core';
-import {TuiBadgeModule, TuiFadeModule} from '@taiga-ui/experimental';
+import {TuiBadgeModule, TuiFadeModule, TuiIconModule} from '@taiga-ui/experimental';
 import {TuiRadioListModule} from '@taiga-ui/kit';
 
 import {ExampleTuiBadgeComponent} from './badge.component';
@@ -26,7 +25,7 @@ import {TuiBadgeExample6} from './examples/6';
         TuiBadgeModule,
         TuiModeModule,
         TuiRepeatTimesModule,
-        TuiSvgModule,
+        TuiIconModule,
         TuiRadioListModule,
         FormsModule,
         CommonModule,

diff --git a/projects/demo/src/modules/experimental/badge/badge.template.html b/projects/demo/src/modules/experimental/badge/badge.template.html
@@ -70,7 +70,7 @@
                     [dot]="dot"
                     [size]="size"
                 >
-                    <tui-svg src="tuiIconCheck"></tui-svg>
+                    <tui-icon icon="tuiIconCheck"></tui-icon>
                     <div tuiFade>Taiga UI</div>
                 </tui-badge>
 
@@ -83,17 +83,15 @@
                     Taiga UI
                 </tui-badge>
 
-                <tui-badge
+                <img
                     *ngIf="contentType === 'image'"
+                    alt="market"
+                    src="assets/images/avatar.jpg"
+                    tuiBadge
                     [appearance]="appearance"
                     [dot]="dot"
                     [size]="size"
-                >
-                    <img
-                        alt="market"
-                        src="assets/images/avatar.jpg"
-                    />
-                </tui-badge>
+                />
             </p>
         </tui-doc-demo>
         <label

diff --git a/projects/demo/src/modules/experimental/badge/examples/3/index.html b/projects/demo/src/modules/experimental/badge/examples/3/index.html
@@ -4,7 +4,7 @@ <h4 class="tui-space_vertical-1">Value with icon</h4>
         appearance="primary"
         size="xl"
     >
-        <tui-svg src="tuiIconBox"></tui-svg>
+        <tui-icon icon="tuiIconBox"></tui-icon>
         x-large
     </tui-badge>
 
@@ -13,7 +13,7 @@ <h4 class="tui-space_vertical-1">Value with icon</h4>
         size="l"
         class="tui-space_left-1"
     >
-        <tui-svg src="tuiIconBox"></tui-svg>
+        <tui-icon icon="tuiIconBox"></tui-icon>
         large
     </tui-badge>
 
@@ -22,7 +22,7 @@ <h4 class="tui-space_vertical-1">Value with icon</h4>
         size="m"
         class="tui-space_left-1"
     >
-        <tui-svg src="tuiIconBox"></tui-svg>
+        <tui-icon icon="tuiIconBox"></tui-icon>
         medium
     </tui-badge>
 
@@ -31,81 +31,75 @@ <h4 class="tui-space_vertical-1">Value with icon</h4>
         size="s"
         class="tui-space_left-1"
     >
-        <tui-svg src="tuiIconBox"></tui-svg>
+        <tui-icon icon="tuiIconBox"></tui-icon>
         small
     </tui-badge>
 </div>
 
 <div>
     <h4 class="tui-space_top-3 tui-space_bottom-1">Icon only</h4>
-    <tui-badge
+    <tui-icon
         appearance="accent"
+        icon="tuiIconBox"
         size="xl"
-    >
-        <tui-svg src="tuiIconBox"></tui-svg>
-    </tui-badge>
+        tuiBadge
+    ></tui-icon>
 
-    <tui-badge
+    <tui-icon
         appearance="accent"
+        icon="tuiIconBox"
         size="l"
+        tuiBadge
         class="tui-space_left-1"
-    >
-        <tui-svg src="tuiIconBox"></tui-svg>
-    </tui-badge>
+    ></tui-icon>
 
-    <tui-badge
+    <tui-icon
         appearance="accent"
+        icon="tuiIconBox"
         size="m"
+        tuiBadge
         class="tui-space_left-1"
-    >
-        <tui-svg src="tuiIconBox"></tui-svg>
-    </tui-badge>
+    ></tui-icon>
 
-    <tui-badge
+    <tui-icon
         appearance="accent"
+        icon="tuiIconBox"
         size="s"
+        tuiBadge
         class="tui-space_left-1"
-    >
-        <tui-svg src="tuiIconBox"></tui-svg>
-    </tui-badge>
+    ></tui-icon>
 </div>
 
 <div>
     <h4 class="tui-space_top-3 tui-space_bottom-1">Image</h4>
-    <tui-badge size="xl">
-        <img
-            alt="market"
-            src="assets/images/avatar.jpg"
-        />
-    </tui-badge>
+    <img
+        alt="market"
+        size="xl"
+        src="assets/images/avatar.jpg"
+        tuiBadge
+    />
 
-    <tui-badge
+    <img
+        alt="market"
         size="l"
+        src="assets/images/avatar.jpg"
+        tuiBadge
         class="tui-space_left-1"
-    >
-        <img
-            alt="market"
-            src="assets/images/avatar.jpg"
-        />
-    </tui-badge>
+    />
 
-    <tui-badge
+    <img
+        alt="market"
         size="m"
+        src="assets/images/avatar.jpg"
+        tuiBadge
         class="tui-space_left-1"
-    >
-        <img
-            alt="market"
-            src="assets/images/avatar.jpg"
-        />
-    </tui-badge>
+    />
 
-    <tui-badge
+    <img
+        alt="market"
         size="s"
+        src="assets/images/avatar.jpg"
+        tuiBadge
         class="tui-space_left-1"
-    >
-        <img
-            alt="market"
-            src="assets/images/avatar.jpg"
-        />
-    </tui-badge>
+    />
 </div>
diff --git a/projects/demo/src/modules/experimental/badge/examples/4/index.html b/projects/demo/src/modules/experimental/badge/examples/4/index.html
@@ -11,6 +11,6 @@
     size="l"
     class="badge tui-space_top-3"
 >
-    <tui-svg src="tuiIconBox"></tui-svg>
+    <tui-icon icon="tuiIconBox"></tui-icon>
     <div class="t-ellipsis">Very long value in badge</div>
 </tui-badge>
diff --git a/projects/demo/src/modules/experimental/badge/examples/5/index.html b/projects/demo/src/modules/experimental/badge/examples/5/index.html
@@ -3,7 +3,7 @@
     size="xl"
     class="custom-1"
 >
-    <tui-svg src="tuiIconLock"></tui-svg>
+    <tui-icon icon="tuiIconLock"></tui-icon>
     10 000 000 $
 </tui-badge>
 

diff --git a/projects/demo/src/modules/experimental/badged-content/badged-content.module.ts b/projects/demo/src/modules/experimental/badged-content/badged-content.module.ts
@@ -3,14 +3,15 @@ import {NgModule} from '@angular/core';
 import {RouterModule} from '@angular/router';
 import {TuiAddonDocModule, tuiGenerateRoutes} from '@taiga-ui/addon-doc';
 import {TuiPlatformModule} from '@taiga-ui/cdk';
-import {TuiNotificationModule, TuiSvgModule} from '@taiga-ui/core';
+import {TuiNotificationModule} from '@taiga-ui/core';
 import {
     TuiAvatarModule,
     TuiBadgedContentModule,
     TuiBadgeModule,
     TuiBadgeNotificationModule,
     TuiButtonModule,
     TuiFallbackSrcModule,
+    TuiIconModule,
 } from '@taiga-ui/experimental';
 import {TuiInputModule} from '@taiga-ui/kit';
 
@@ -23,7 +24,7 @@ import {TuiBadgedContentExample3} from './examples/3';
     imports: [
         CommonModule,
         TuiBadgeNotificationModule,
-        TuiSvgModule,
+        TuiIconModule,
         TuiBadgeModule,
         TuiBadgedContentModule,
         TuiAvatarModule,

diff --git a/projects/demo/src/modules/experimental/badged-content/examples/1/index.html b/projects/demo/src/modules/experimental/badged-content/examples/1/index.html
@@ -27,13 +27,13 @@
 </tui-badged-content>
 
 <tui-badged-content>
-    <tui-badge
+    <tui-icon
         appearance="primary"
+        icon="tuiIconStar"
         size="l"
+        tuiBadge
         tuiSlot="top"
-    >
-        <tui-svg src="tuiIconStar"></tui-svg>
-    </tui-badge>
+    ></tui-icon>
     <tui-avatar
         size="l"
         src="tuiIconUserLarge"
@@ -53,11 +53,11 @@
         src="tuiIconUserLarge"
         [round]="false"
     ></tui-avatar>
-    <tui-badge
+    <tui-icon
         appearance="accent"
+        icon="tuiIconStar"
         size="l"
+        tuiBadge
         tuiSlot="bottom"
-    >
-        <tui-svg src="tuiIconStar"></tui-svg>
-    </tui-badge>
+    ></tui-icon>
 </tui-badged-content>
diff --git a/projects/demo/src/modules/experimental/badged-content/examples/2/index.html b/projects/demo/src/modules/experimental/badged-content/examples/2/index.html
@@ -13,13 +13,13 @@
 </tui-badged-content>
 
 <tui-badged-content [style.--tui-radius.%]="50">
-    <tui-badge
+    <tui-icon
         appearance="accent"
+        icon="tuiIconStar"
         size="m"
+        tuiBadge
         tuiSlot="bottom"
-    >
-        <tui-svg src="tuiIconStar"></tui-svg>
-    </tui-badge>
+    ></tui-icon>
     <tui-avatar
         size="m"
         src="tuiIconUserLarge"

diff --git a/projects/demo/src/modules/experimental/badged-content/examples/3/index.html b/projects/demo/src/modules/experimental/badged-content/examples/3/index.html
@@ -1,19 +1,18 @@
 <tui-badged-content>
     <tui-badge-notification
-        appearance="success"
         size="xs"
         tuiSlot="top"
     ></tui-badge-notification>
     <tui-input class="input">Input text</tui-input>
 </tui-badged-content>
 
 <tui-badged-content>
-    <tui-badge
+    <tui-icon
         appearance="accent"
+        icon="tuiIconCheck"
         size="s"
+        tuiBadge
         tuiSlot="bottom"
-    >
-        <tui-svg src="tuiIconCheckCircleLarge"></tui-svg>
-    </tui-badge>
+    ></tui-icon>
     <button tuiButton>Button</button>
 </tui-badged-content>
diff --git a/projects/experimental/components/avatar/avatar.component.ts b/projects/experimental/components/avatar/avatar.component.ts
@@ -1,6 +1,7 @@
 import {ChangeDetectionStrategy, Component, Inject, Input} from '@angular/core';
 import {SafeResourceUrl} from '@angular/platform-browser';
-import {TUI_PLATFORM, tuiIsString, TuiPlatform} from '@taiga-ui/cdk';
+import {tuiIsString, TuiStringHandler} from '@taiga-ui/cdk';
+import {TUI_ICON_RESOLVER} from '@taiga-ui/experimental/tokens';
 
 import {TUI_AVATAR_OPTIONS, TuiAvatarOptions} from './avatar.options';
 
@@ -13,9 +14,9 @@ import {TUI_AVATAR_OPTIONS, TuiAvatarOptions} from './avatar.options';
         tuiAppearance: '',
         '[attr.data-appearance]': 'appearance',
         '[attr.data-size]': 'size',
-        '[attr.data-platform]': 'platform',
+        '[attr.data-type]': 'type',
+        '[style.--t-mask]': '"url(" + resolver(src) + ")"',
         '[class._round]': 'round',
-        '[class._img]': 'type === "img"',
     },
 })
 export class TuiAvatarComponent {
@@ -33,7 +34,7 @@ export class TuiAvatarComponent {
 
     constructor(
         @Inject(TUI_AVATAR_OPTIONS) private readonly options: TuiAvatarOptions,
-        @Inject(TUI_PLATFORM) readonly platform: TuiPlatform,
+        @Inject(TUI_ICON_RESOLVER) readonly resolver: TuiStringHandler<string>,
     ) {}
 
     get value(): SafeResourceUrl | string {

diff --git a/projects/experimental/components/avatar/avatar.module.ts b/projects/experimental/components/avatar/avatar.module.ts
@@ -1,12 +1,12 @@
 import {CommonModule} from '@angular/common';
 import {NgModule} from '@angular/core';
-import {TuiSvgModule} from '@taiga-ui/core';
+import {TuiIconModule} from '@taiga-ui/experimental/components/icon';
 import {TuiLazyLoadingModule} from '@taiga-ui/kit';
 
 import {TuiAvatarComponent} from './avatar.component';
 
 @NgModule({
-    imports: [CommonModule, TuiSvgModule, TuiLazyLoadingModule],
+    imports: [CommonModule, TuiIconModule, TuiLazyLoadingModule],
     declarations: [TuiAvatarComponent],
     exports: [TuiAvatarComponent],
 })