@taiga-ui/core 2.36.0 → 2.38.0

package/styles/theme/wrapper/outline.less

@@ -1,4 +1,8 @@
-tui-wrapper[data-appearance='outline'] {
+@import '../../taiga-ui-local.less';
+
+/* stylelint-disable order/order */
+tui-wrapper[data-appearance='outline'],
+[tuiWrapper][data-appearance='outline'] {
     background: transparent;
     color: var(--tui-text-01);
 
@@ -6,23 +10,6 @@ tui-wrapper[data-appearance='outline'] {
         color: var(--tui-base-04);
     }
 
-    &[data-state='hovered'] {
-        &:after {
-            color: var(--tui-base-05);
-        }
-    }
-
-    &:active,
-    &[data-state='pressed'] {
-        &:after {
-            color: var(--tui-base-06);
-        }
-    }
-
-    &[data-state='disabled'] {
-        opacity: var(--tui-disabled-opacity);
-    }
-
     &[data-mode='onDark'] {
         color: var(--tui-text-01-night);
 
@@ -30,25 +17,25 @@ tui-wrapper[data-appearance='outline'] {
             color: var(--tui-text-01-night);
         }
 
-        &[data-state='hovered'] {
+        .wrapper-hover({
             background: var(--tui-clear-inverse-hover);
 
             &:after {
                 color: var(--tui-text-03-night);
             }
-        }
+        });
 
-        &[data-state='pressed'] {
+        .wrapper-active({
             background: var(--tui-clear-inverse-active);
 
             &:after {
                 color: var(--tui-text-03-night);
             }
-        }
+        });
 
-        &._focused:after {
-            color: var(--tui-text-01-night);
-        }
+        .wrapper-focus({
+            --tui-focus: var(--tui-text-01-night);
+        });
     }
 
     &[data-mode='onLight'] {
@@ -58,20 +45,32 @@ tui-wrapper[data-appearance='outline'] {
             color: var(--tui-text-01);
         }
 
-        &[data-state='hovered'] {
+        .wrapper-hover({
             background: var(--tui-clear-hover);
 
             &:after {
                 color: var(--tui-text-03);
             }
-        }
+        });
 
-        &[data-state='pressed'] {
+        .wrapper-active({
             background: var(--tui-clear-active);
 
             &:after {
                 color: var(--tui-text-03);
             }
-        }
+        });
     }
+
+    .wrapper-hover({
+        &:after {
+            color: var(--tui-base-05);
+        }
+    });
+
+    .wrapper-active({
+        &:after {
+            color: var(--tui-base-06);
+        }
+    });
 }

package/styles/theme/wrapper/primary.less

@@ -1,31 +1,33 @@
-tui-wrapper[data-appearance='primary'] {
+@import '../../taiga-ui-local';
+
+/* stylelint-disable order/order */
+tui-wrapper[data-appearance='primary'],
+[tuiWrapper][data-appearance='primary'] {
     background: var(--tui-primary);
     color: var(--tui-primary-text);
 
-    &[data-state='hovered'] {
+    .wrapper-hover({
         background: var(--tui-primary-hover);
-    }
+    });
 
-    &:active,
-    &[data-state='pressed'] {
+    .wrapper-active({
         background: var(--tui-primary-active);
-    }
-
-    &[data-state='disabled'] {
-        opacity: var(--tui-disabled-opacity);
-    }
+    });
 
-    &._invalid {
+    .wrapper-invalid({
         color: var(--tui-negative-night);
         background: var(--tui-error-bg);
 
-        &[data-state='hovered'],
-        &[data-state='pressed'] {
+        .wrapper-hover({
+            background: var(--tui-error-bg-hover);
+        });
+
+        .wrapper-active({
             background: var(--tui-error-bg-hover);
-        }
+        });
 
-        &._focused:after {
-            color: var(--tui-error-fill);
-        }
-    }
+        .wrapper-focus({
+            --tui-focus: var(--tui-error-fill);
+        })
+    });
 }

package/styles/theme/wrapper/secondary.less

@@ -1,68 +1,68 @@
+@import '../../taiga-ui-local';
+
+/* stylelint-disable order/order */
 tui-wrapper[data-appearance='secondary'],
-tui-wrapper[data-appearance='flat'] {
+tui-wrapper[data-appearance='flat'],
+[tuiWrapper][data-appearance='secondary'],
+[tuiWrapper][data-appearance='flat'] {
     background: var(--tui-secondary);
     color: var(--tui-link);
 
-    &[data-state='hovered'] {
-        background: var(--tui-secondary-hover);
-        color: var(--tui-link-hover);
-    }
-
-    &:active,
-    &[data-state='pressed'] {
-        background: var(--tui-secondary-active);
-    }
-
-    &[data-state='disabled'] {
-        opacity: var(--tui-disabled-opacity);
-    }
-
     &[data-mode='onDark'] {
         background: var(--tui-clear-inverse);
         color: var(--tui-text-01-night);
 
-        &[data-state='hovered'] {
+        .wrapper-hover({
             background: var(--tui-clear-inverse-hover);
-        }
+        });
 
-        &[data-state='pressed'] {
+        .wrapper-active({
             background: var(--tui-clear-inverse-active);
-        }
+        });
 
-        &._focused:after {
-            color: var(--tui-text-01-night);
-        }
+        .wrapper-focus({
+            --tui-focus: var(--tui-text-01-night);
+        });
     }
 
     &[data-mode='onLight'] {
         background: var(--tui-clear);
         color: var(--tui-text-01);
 
-        &[data-state='hovered'] {
+        .wrapper-hover({
             background: var(--tui-clear-hover);
-        }
+        });
 
-        &[data-state='pressed'] {
+        .wrapper-active({
             background: var(--tui-clear-active);
-        }
+        });
     }
 
-    &._invalid {
+    .wrapper-hover({
+        background: var(--tui-secondary-hover);
+        color: var(--tui-link-hover);
+    });
+
+    .wrapper-active({
+        background: var(--tui-secondary-active);
+    });
+
+    .wrapper-invalid({
         color: var(--tui-error-fill);
         background: var(--tui-error-bg);
 
-        &[data-state='hovered'],
-        &[data-state='pressed'] {
+        .wrapper-hover({
             background: var(--tui-error-bg-hover);
-        }
+        });
 
-        &._focused:after {
-            color: var(--tui-error-fill);
-        }
-    }
+        .wrapper-focus({
+            --tui-focus: var(--tui-error-fill);
+        });
+    });
 }
 
-tui-wrapper[data-appearance='flat'] {
+tui-wrapper[data-appearance='flat'],
+[tuiWrapper][data-appearance='flat'] {
     background: transparent;
 
     &[data-mode='onDark'],

package/styles/theme/wrapper/table.less

@@ -1,4 +1,8 @@
-tui-wrapper[data-appearance='table'] {
+@import '../../taiga-ui-local';
+
+/* stylelint-disable order/order */
+tui-wrapper[data-appearance='table'],
+[tuiWrapper][data-appearance='table'] {
     border-radius: 0;
     background: transparent;
     color: var(--tui-text-01);
@@ -16,24 +20,21 @@ tui-wrapper[data-appearance='table'] {
         color: var(--tui-base-04);
     }
 
-    &[data-state='hovered']:not(._focused) {
-        background: var(--tui-clear-disabled);
-    }
-
-    &[data-state='disabled'] {
-        color: var(--tui-text-03);
+    &[data-mode='onDark'] {
+        .wrapper-focus({
+            --tui-focus: var(--tui-text-01-night);
+        });
     }
 
-    &._focused:after {
-        border-width: 2px;
-        color: var(--tui-focus);
-    }
+    .wrapper-hover({
+        background: var(--tui-clear-disabled);
+    });
 
-    &[data-mode='onDark']._focused:after {
-        color: var(--tui-text-01-night);
-    }
+    .wrapper-focus({
+        background: transparent;
+    });
 
-    &._invalid {
+    .wrapper-invalid({
         background: var(--tui-error-bg);
 
         &:before {
@@ -42,33 +43,26 @@ tui-wrapper[data-appearance='table'] {
             top: 0;
             right: 0;
             z-index: 1;
-            // TODO: research if it can be used in rem units
-            /* stylelint-disable-next-line */
-            border-top: 8px solid var(--tui-error-fill);
-            // TODO: research if it can be used in rem units
-            /* stylelint-disable-next-line */
-            border-left: 8px solid transparent;
+            border-top: 0.5rem solid var(--tui-error-fill);
+            border-left: 0.5rem solid transparent;
         }
 
-        &[data-state='hovered'] {
+        .wrapper-hover({
             background: var(--tui-error-bg-hover);
+        });
 
-            &._focused {
-                background: transparent;
-            }
-        }
-
-        &[data-state='disabled'] {
+        .wrapper-disabled({
             background: transparent;
-        }
+        });
 
-        &._focused {
+        .wrapper-focus({
             background: transparent;
 
+            --tui-focus: var(--tui-error-fill);
+
             &:after {
                 border-width: 1px;
-                color: var(--tui-error-fill);
             }
-        }
-    }
+        });
+    });
 }

package/styles/theme/wrapper/textfield.less

@@ -1,110 +1,100 @@
-tui-wrapper[data-appearance='textfield'] {
-    transition: var(--tui-duration) ease-in-out;
-    transition-property: box-shadow, background;
+@import '../../taiga-ui-local';
+
+/* stylelint-disable order/order */
+tui-wrapper[data-appearance='textfield'],
+[tuiWrapper][data-appearance='textfield'] {
+    .transition('box-shadow, background');
     background: var(--tui-base-01);
     color: var(--tui-text-01);
     box-shadow: 0 0.125rem 0.1875rem rgba(0, 0, 0, 0.1);
 
     &[data-appearance='textfield']:after {
-        transition: color var(--tui-duration) ease-in-out;
-        border-width: 1px;
+        .transition(color);
         color: var(--tui-base-03);
     }
 
-    &[data-state='hovered'] {
+    .wrapper-hover({
         box-shadow: 0 0.125rem 0.3125rem rgba(0, 0, 0, 0.16);
-    }
+    });
 
-    &._focused {
+    .wrapper-focus({
         box-shadow: none;
 
-        &:after {
-            color: var(--tui-primary);
-            border-width: 2px;
-        }
-    }
+        --tui-focus: var(--tui-primary);
+    });
 
-    &[data-state='readonly'] {
+    .wrapper-readonly({
         box-shadow: none;
 
         &:after {
             color: var(--tui-base-04);
         }
-    }
+    });
 
-    &[data-state='disabled'] {
-        opacity: var(--tui-disabled-opacity);
+    .wrapper-disabled({
         box-shadow: none;
-    }
+    });
 
-    &._invalid._focused:after {
-        color: var(--tui-error-fill);
-        opacity: var(--tui-disabled-opacity);
-    }
+    .wrapper-invalid({
+        --tui-focus: var(--tui-error-fill-night);
+    });
 }
 
-tui-wrapper[data-appearance='textfield'][data-mode='onDark'] {
+tui-wrapper[data-appearance='textfield'][data-mode='onDark'],
+[tuiWrapper][data-appearance='textfield'][data-mode='onDark'] {
     background: var(--tui-clear-inverse);
     color: var(--tui-text-01-night);
 
-    &[data-appearance='textfield']:after {
+    &:after {
         color: var(--tui-text-03-night);
         opacity: var(--tui-disabled-opacity);
     }
 
-    &[data-state='hovered'] {
+    .wrapper-hover({
         background: var(--tui-clear-inverse-hover);
+    });
 
-        &:after {
-            color: var(--tui-text-02-night);
-        }
-    }
-
-    &[data-state='readonly'] {
+    .wrapper-readonly({
         background: transparent;
-    }
-
-    &._invalid._focused:after {
-        color: var(--tui-error-fill-night);
-    }
+    });
 
-    &._focused {
+    .wrapper-focus({
         background: rgba(255, 255, 255, 0.08);
 
+        --tui-focus: var(--tui-primary);
+
         &:after {
             transition: none;
-            color: var(--tui-primary);
             opacity: 1;
         }
-    }
+    });
+
+    .wrapper-invalid({
+        --tui-focus: var(--tui-error-fill-night);
+    });
 }
 
-tui-wrapper[data-appearance='textfield'][data-mode='onLight'] {
+tui-wrapper[data-appearance='textfield'][data-mode='onLight'],
+[tuiWrapper][data-appearance='textfield'][data-mode='onLight'] {
     background: var(--tui-clear);
 
-    &[data-state='hovered'] {
+    .wrapper-hover({
         background: var(--tui-clear-hover);
-    }
+    });
 
-    &[data-state='readonly'] {
+    .wrapper-readonly({
         background: transparent;
-    }
+    });
 
-    &._invalid {
+    .wrapper-invalid({
         &:after {
             color: var(--tui-error-fill);
         }
+    });
 
-        &._focused {
-            background: transparent;
-        }
-    }
-
-    &._focused {
+    .wrapper-focus({
         background: transparent;
 
-        &:after {
-            color: var(--tui-text-01);
-        }
-    }
+        --tui-focus: var(--tui-text-01);
+    });
 }

package/styles/theme/wrapper/whiteblock.less

@@ -1,5 +1,10 @@
+@import '../../taiga-ui-local';
+
+/* stylelint-disable order/order */
 tui-wrapper[data-appearance='whiteblock'],
-tui-wrapper[data-appearance='whiteblock-active'] {
+tui-wrapper[data-appearance='whiteblock-active'],
+[tuiWrapper][data-appearance='whiteblock'],
+[tuiWrapper][data-appearance='whiteblock-active'] {
     background: var(--tui-base-01);
     color: var(--tui-text-01);
 
@@ -7,33 +12,39 @@ tui-wrapper[data-appearance='whiteblock-active'] {
         color: var(--tui-base-03);
     }
 
-    &:active,
-    &[data-state='hovered'],
-    &[data-state='pressed'] {
+    .wrapper-hover({
         background: var(--tui-base-02);
 
         &:after {
             color: var(--tui-base-04);
         }
-    }
+    });
 
-    &[data-state='disabled'] {
-        opacity: var(--tui-disabled-opacity);
-    }
+    .wrapper-active({
+        background: var(--tui-base-02);
+
+        &:after {
+            color: var(--tui-base-04);
+        }
+    });
 }
 
-tui-wrapper[data-appearance='whiteblock-active'] {
+tui-wrapper[data-appearance='whiteblock-active'],
+[tuiWrapper][data-appearance='whiteblock-active'] {
     &:after {
         color: var(--tui-primary);
         border-width: 2px;
     }
 
-    &[data-state='hovered']:after {
-        color: var(--tui-primary-hover);
-    }
+    .wrapper-hover({
+        &:after {
+            color: var(--tui-primary-hover);
+        }
+    });
 
-    &:active,
-    &[data-state='pressed']:after {
-        color: var(--tui-primary-active);
-    }
+    .wrapper-active({
+        &:after {
+            color: var(--tui-primary-active);
+        }
+    });
 }

package/styles/theme/wrapper.less

@@ -6,3 +6,5 @@
 @import 'wrapper/table.less';
 @import 'wrapper/textfield.less';
 @import 'wrapper/whiteblock.less';
+
+@import 'wrapper/base.less';

package/tokens/notification-options.d.ts

@@ -1,15 +1,21 @@
-import { InjectionToken } from '@angular/core';
+import { InjectionToken, ValueProvider } from '@angular/core';
 import { TuiContextWithImplicit } from '@taiga-ui/cdk';
 import { TuiNotification } from '@taiga-ui/core/enums';
 import { TuiNotificationAutoClose } from '@taiga-ui/core/interfaces';
 import { PolymorpheusContent } from '@tinkoff/ng-polymorpheus';
-export interface NotificationTokenOptions {
+export interface TuiNotificationDefaultOptions {
     readonly autoClose: TuiNotificationAutoClose;
     readonly label: PolymorpheusContent<TuiContextWithImplicit<TuiNotification>>;
     readonly status: TuiNotification;
     readonly hasIcon: boolean;
     readonly hasCloseButton: boolean;
+    readonly defaultAutoCloseTime: number;
 }
+/**
+ * @deprecated: remove in v3.0, use TuiNotificationDefaultOptions
+ */
+export declare type NotificationTokenOptions = TuiNotificationDefaultOptions;
 /** Default values for the notification options. */
-export declare const TUI_NOTIFICATION_DEFAULT_OPTIONS: NotificationTokenOptions;
-export declare const TUI_NOTIFICATION_OPTIONS: InjectionToken<NotificationTokenOptions>;
+export declare const TUI_NOTIFICATION_DEFAULT_OPTIONS: TuiNotificationDefaultOptions;
+export declare const TUI_NOTIFICATION_OPTIONS: InjectionToken<TuiNotificationDefaultOptions>;
+export declare function tuiNotificationOptionsProvider(options: Partial<TuiNotificationDefaultOptions>): ValueProvider;