feat(layout): Navigation allow manual control of AsideGroup (#9412)

Co-authored-by: taiga-family-bot <[email protected]>
taiga-family · Oct 10, 2024 · b7f75d9 · b7f75d9
1 parent 83fcc5f
commit b7f75d9
Show file tree

Hide file tree

Showing 93 changed files with 459 additions and 234 deletions.
diff --git a/projects/cdk/services/theme-color.service.ts b/projects/cdk/services/theme-color.service.ts
@@ -16,15 +16,20 @@ interface TuiThemeColor {
     providedIn: 'root',
 })
 export class TuiThemeColorService implements TuiThemeColor {
-    private readonly current = inject(TUI_THEME_COLOR);
+    private current = inject(TUI_THEME_COLOR);
     private readonly doc = inject(DOCUMENT);
     private readonly meta = inject(Meta);
 
+    constructor() {
+        this.color = this.current;
+    }
+
     public get color(): string {
         return this.current;
     }
 
     public set color(content: string) {
+        this.current = content;
         this.meta.updateTag({name: 'theme-color', content});
         this.doc.documentElement.style.setProperty('--tui-theme-color', content);
     }

diff --git a/projects/core/components/data-list/data-list.component.ts b/projects/core/components/data-list/data-list.component.ts
@@ -96,7 +96,7 @@ export class TuiDataListComponent<T>
         timer(0)
             .pipe(tuiZonefree(this.ngZone), tuiTakeUntilDestroyed(this.destroyRef))
             .subscribe(() => {
-                this.empty.set(!this.el.querySelector('[tuiOption]'));
+                this.empty.set(!this.elements.length);
                 this.cdr.detectChanges();
             });
     }

diff --git a/projects/core/directives/surface/surface.directive.ts b/projects/core/directives/surface/surface.directive.ts
@@ -6,6 +6,7 @@ import {
     ViewEncapsulation,
 } from '@angular/core';
 import {tuiWithStyles} from '@taiga-ui/cdk/utils/miscellaneous';
+import {TuiAppearance} from '@taiga-ui/core/directives/appearance';
 
 @Component({
     standalone: true,
@@ -22,6 +23,12 @@ class TuiSurfaceStyles {}
 @Directive({
     standalone: true,
     selector: '[tuiSurface]',
+    hostDirectives: [
+        {
+            directive: TuiAppearance,
+            inputs: ['tuiAppearance: tuiSurface'],
+        },
+    ],
     host: {
         tuiSurface: '',
         '[attr.data-surface]': 'tuiSurface',

diff --git a/projects/core/directives/surface/surface.style.less b/projects/core/directives/surface/surface.style.less
@@ -24,11 +24,11 @@
     }
 
     // Fix for https://bugs.chromium.org/p/chromium/issues/detail?id=1486408
-    @supports (not (-moz-appearance: none)) and (not (-webkit-hyphens: none)) {
+    .chrome-only({
         &::before {
             mix-blend-mode: multiply;
         }
-    }
+    })
 }
 
 button[data-surface] {
@@ -129,40 +129,42 @@ input[tuiSurfaceLayer] {
     }
 }
 
-[tuiSurface][data-surface='elevated'] {
+// TODO: Drop elevated and box-shadow/background-color
+[tuiSurface][data-surface='elevated'],
+[tuiSurface][data-surface='floating'] {
     box-shadow: var(--tui-shadow-small);
     background-color: var(--tui-background-elevation-1);
 
-    button&,
-    a& {
+    .interactive({
         &:active {
             box-shadow: var(--tui-shadow-small);
             transform: scale(0.95);
         }
 
-        @media (hover: hover) and (pointer: fine) {
+        @media (hover: hover) {
             &:hover {
                 box-shadow: var(--tui-shadow-small-hover);
                 transform: translate3d(0, -0.25rem, 0);
                 background: var(--tui-background-elevation-1);
             }
         }
-    }
+    });
 }
 
-[tuiSurface][data-surface='flat'] {
+// TODO: Drop flat and background-color
+[tuiSurface][data-surface='flat'],
+[tuiSurface][data-surface='neutral'] {
     background-color: var(--tui-background-neutral-1);
 
-    button&,
-    a& {
+    .interactive({
         &:active {
             transform: scale(0.95);
         }
 
-        @media (hover: hover) and (pointer: fine) {
+        @media (hover: hover) {
             &:hover {
                 transform: scale(1.15);
             }
         }
-    }
+    });
 }
diff --git a/projects/demo/src/modules/components/button-group/examples/1/index.html b/projects/demo/src/modules/components/button-group/examples/1/index.html
@@ -1,6 +1,6 @@
 <div
+    tuiAppearance="floating"
     tuiButtonGroup
-    tuiSurface="elevated"
 >
     <button type="button">
         <tui-icon icon="@tui.circle-plus" />
@@ -26,8 +26,8 @@
 </div>
 
 <div
+    tuiAppearance="floating"
     tuiButtonGroup
-    tuiSurface="elevated"
 >
     <button type="button">
         <tui-icon icon="@tui.circle-plus" />
@@ -41,8 +41,8 @@
 </div>
 
 <div
+    tuiAppearance="floating"
     tuiButtonGroup
-    tuiSurface="elevated"
 >
     <button type="button">
         <tui-icon icon="@tui.circle-plus" />

diff --git a/projects/demo/src/modules/components/button-group/examples/1/index.ts b/projects/demo/src/modules/components/button-group/examples/1/index.ts
@@ -1,12 +1,12 @@
 import {Component} from '@angular/core';
 import {changeDetection} from '@demo/emulate/change-detection';
 import {encapsulation} from '@demo/emulate/encapsulation';
-import {TuiButton, TuiIcon, TuiSurface} from '@taiga-ui/core';
+import {TuiAppearance, TuiButton, TuiIcon} from '@taiga-ui/core';
 import {TuiButtonGroup, TuiIconBadge} from '@taiga-ui/kit';
 
 @Component({
     standalone: true,
-    imports: [TuiButton, TuiButtonGroup, TuiIcon, TuiIconBadge, TuiSurface],
+    imports: [TuiAppearance, TuiButton, TuiButtonGroup, TuiIcon, TuiIconBadge],
     templateUrl: './index.html',
     styleUrls: ['./index.less'],
     encapsulation,

diff --git a/projects/demo/src/modules/components/button-group/examples/2/index.html b/projects/demo/src/modules/components/button-group/examples/2/index.html
@@ -1,6 +1,6 @@
 <div
+    tuiAppearance="secondary"
     tuiButtonGroup
-    tuiSurface="flat"
 >
     <button type="button">
         <tui-icon icon="@tui.circle-plus" />
@@ -19,8 +19,8 @@
 </div>
 
 <div
+    tuiAppearance="secondary"
     tuiButtonGroup
-    tuiSurface="flat"
 >
     <button type="button">
         <tui-icon icon="@tui.circle-plus" />
@@ -34,8 +34,8 @@
 </div>
 
 <div
+    tuiAppearance="secondary"
     tuiButtonGroup
-    tuiSurface="flat"
 >
     <button type="button">
         <tui-icon icon="@tui.circle-plus" />

diff --git a/projects/demo/src/modules/components/button-group/examples/2/index.ts b/projects/demo/src/modules/components/button-group/examples/2/index.ts
@@ -1,12 +1,12 @@
 import {Component} from '@angular/core';
 import {changeDetection} from '@demo/emulate/change-detection';
 import {encapsulation} from '@demo/emulate/encapsulation';
-import {TuiButton, TuiIcon, TuiSurface} from '@taiga-ui/core';
+import {TuiAppearance, TuiButton, TuiIcon} from '@taiga-ui/core';
 import {TuiButtonGroup} from '@taiga-ui/kit';
 
 @Component({
     standalone: true,
-    imports: [TuiButton, TuiButtonGroup, TuiIcon, TuiSurface],
+    imports: [TuiAppearance, TuiButton, TuiButtonGroup, TuiIcon],
     templateUrl: './index.html',
     styleUrls: ['./index.less'],
     encapsulation,

diff --git a/projects/demo/src/modules/components/card-large/examples/1/index.html b/projects/demo/src/modules/components/card-large/examples/1/index.html
@@ -2,8 +2,8 @@
     <h4>Desktop</h4>
 
     <div
+        tuiAppearance="floating"
         tuiCardLarge
-        tuiSurface="elevated"
     >
         <header tuiHeader>
             <h2 tuiTitle>Header</h2>
@@ -24,8 +24,8 @@ <h2 tuiTitle>Header</h2>
     </div>
 
     <div
+        tuiAppearance="floating"
         tuiCardLarge
-        tuiSurface="elevated"
         class="tui-space_top-4"
     >
         <header tuiHeader>
@@ -50,8 +50,8 @@ <h2 tuiTitle>Header</h2>
     <h4>iOS/Android</h4>
 
     <div
+        tuiAppearance="floating"
         tuiCardLarge
-        tuiSurface="elevated"
     >
         <header tuiHeader>
             <h2 tuiTitle>Header</h2>
@@ -81,8 +81,8 @@ <h2 tuiTitle>Header</h2>
     </div>
 
     <div
+        tuiAppearance="floating"
         tuiCardLarge
-        tuiSurface="elevated"
         class="tui-space_top-4"
     >
         <header tuiHeader>

diff --git a/projects/demo/src/modules/components/card-large/examples/1/index.ts b/projects/demo/src/modules/components/card-large/examples/1/index.ts
@@ -2,20 +2,20 @@ import {Component} from '@angular/core';
 import {changeDetection} from '@demo/emulate/change-detection';
 import {encapsulation} from '@demo/emulate/encapsulation';
 import {TuiPlatform} from '@taiga-ui/cdk';
-import {TuiButton, TuiLink, TuiSurface, TuiTitle} from '@taiga-ui/core';
+import {TuiAppearance, TuiButton, TuiLink, TuiTitle} from '@taiga-ui/core';
 import {TuiBadge} from '@taiga-ui/kit';
 import {TuiCardLarge, TuiHeader} from '@taiga-ui/layout';
 
 @Component({
     standalone: true,
     imports: [
+        TuiAppearance,
         TuiBadge,
         TuiButton,
         TuiCardLarge,
         TuiHeader,
         TuiLink,
         TuiPlatform,
-        TuiSurface,
         TuiTitle,
     ],
     templateUrl: './index.html',

diff --git a/projects/demo/src/modules/components/card-large/examples/10/index.html b/projects/demo/src/modules/components/card-large/examples/10/index.html
@@ -1,7 +1,7 @@
 <div
+    tuiAppearance="floating"
     tuiCardLarge
     tuiHeader
-    tuiSurface="elevated"
     class="image"
 >
     <h1 tuiTitle>

diff --git a/projects/demo/src/modules/components/card-large/examples/10/index.ts b/projects/demo/src/modules/components/card-large/examples/10/index.ts
@@ -1,13 +1,20 @@
 import {Component} from '@angular/core';
 import {changeDetection} from '@demo/emulate/change-detection';
 import {encapsulation} from '@demo/emulate/encapsulation';
-import {TuiButton, TuiSurface, TuiTitle} from '@taiga-ui/core';
+import {TuiAppearance, TuiButton, TuiTitle} from '@taiga-ui/core';
 import {TuiButtonClose} from '@taiga-ui/kit';
 import {TuiCardLarge, TuiHeader} from '@taiga-ui/layout';
 
 @Component({
     standalone: true,
-    imports: [TuiButton, TuiButtonClose, TuiCardLarge, TuiHeader, TuiSurface, TuiTitle],
+    imports: [
+        TuiAppearance,
+        TuiButton,
+        TuiButtonClose,
+        TuiCardLarge,
+        TuiHeader,
+        TuiTitle,
+    ],
     templateUrl: './index.html',
     styleUrls: ['./index.less'],
     encapsulation,

diff --git a/projects/demo/src/modules/components/card-large/examples/11/index.html b/projects/demo/src/modules/components/card-large/examples/11/index.html
@@ -1,7 +1,7 @@
 <div
+    tuiAppearance="floating"
     tuiCardLarge
     tuiHeader
-    tuiSurface="elevated"
     tuiTheme="dark"
     class="image"
 >

diff --git a/projects/demo/src/modules/components/card-large/examples/11/index.ts b/projects/demo/src/modules/components/card-large/examples/11/index.ts
@@ -1,13 +1,20 @@
 import {Component} from '@angular/core';
 import {changeDetection} from '@demo/emulate/change-detection';
 import {encapsulation} from '@demo/emulate/encapsulation';
-import {TuiButton, TuiSurface, TuiTitle} from '@taiga-ui/core';
+import {TuiAppearance, TuiButton, TuiTitle} from '@taiga-ui/core';
 import {TuiButtonClose} from '@taiga-ui/kit';
 import {TuiCardLarge, TuiHeader} from '@taiga-ui/layout';
 
 @Component({
     standalone: true,
-    imports: [TuiButton, TuiButtonClose, TuiCardLarge, TuiHeader, TuiSurface, TuiTitle],
+    imports: [
+        TuiAppearance,
+        TuiButton,
+        TuiButtonClose,
+        TuiCardLarge,
+        TuiHeader,
+        TuiTitle,
+    ],
     templateUrl: './index.html',
     styleUrls: ['./index.less'],
     encapsulation,

diff --git a/projects/demo/src/modules/components/card-large/examples/12/index.html b/projects/demo/src/modules/components/card-large/examples/12/index.html
@@ -2,8 +2,8 @@
     <h4>Desktop</h4>
 
     <div
+        tuiAppearance="floating"
         tuiCardLarge="normal"
-        tuiSurface="elevated"
     >
         <header tuiHeader>
             <h2 tuiTitle>
@@ -25,8 +25,8 @@ <h2 tuiTitle>
     </div>
 
     <div
+        tuiAppearance="floating"
         tuiCardLarge="compact"
-        tuiSurface="elevated"
         class="tui-space_top-4"
     >
         <header tuiHeader>
@@ -53,8 +53,8 @@ <h2 tuiTitle>
     <h4>iOS/Android</h4>
 
     <div
+        tuiAppearance="floating"
         tuiCardLarge="normal"
-        tuiSurface="elevated"
     >
         <header tuiHeader="xs">
             <h2 tuiTitle>
@@ -76,8 +76,8 @@ <h2 tuiTitle>
     </div>
 
     <div
+        tuiAppearance="floating"
         tuiCardLarge="compact"
-        tuiSurface="elevated"
         class="tui-space_top-4"
     >
         <header tuiHeader="xs">

diff --git a/projects/demo/src/modules/components/card-large/examples/12/index.ts b/projects/demo/src/modules/components/card-large/examples/12/index.ts
@@ -2,12 +2,12 @@ import {Component} from '@angular/core';
 import {changeDetection} from '@demo/emulate/change-detection';
 import {encapsulation} from '@demo/emulate/encapsulation';
 import {TuiPlatform} from '@taiga-ui/cdk';
-import {TuiButton, TuiSurface} from '@taiga-ui/core';
+import {TuiAppearance, TuiButton, TuiTitle} from '@taiga-ui/core';
 import {TuiCardLarge, TuiHeader} from '@taiga-ui/layout';
 
 @Component({
     standalone: true,
-    imports: [TuiButton, TuiCardLarge, TuiHeader, TuiPlatform, TuiSurface],
+    imports: [TuiAppearance, TuiButton, TuiCardLarge, TuiHeader, TuiPlatform, TuiTitle],
     templateUrl: './index.html',
     encapsulation,
     changeDetection,

diff --git a/projects/demo/src/modules/components/card-large/examples/13/index.html b/projects/demo/src/modules/components/card-large/examples/13/index.html
@@ -1,6 +1,6 @@
 <div
+    tuiAppearance="floating"
     tuiCardLarge
-    tuiSurface="elevated"
 >
     <header tuiHeader>
         <h1 tuiTitle>