@taiga-ui/core 4.6.0 → 4.7.0-canary.5ce088a

package/pipes/flag/flag.pipe.d.ts

@@ -1,11 +1,14 @@
 import type { PipeTransform } from '@angular/core';
+import type { TuiLooseUnion } from '@taiga-ui/cdk/types';
 import type { TuiCountryIsoCode } from '@taiga-ui/i18n/types';
 import * as i0 from "@angular/core";
+type IsoCode = TuiLooseUnion<TuiCountryIsoCode>;
 export declare class TuiFlagPipe implements PipeTransform {
     private readonly staticPath;
-    transform(countryIsoCode: TuiCountryIsoCode | string): string;
-    transform(countryIsoCode: TuiCountryIsoCode | string | undefined): string | null;
-    transform(countryIsoCode?: TuiCountryIsoCode | string | null): string | null;
+    transform(countryIsoCode: IsoCode): string;
+    transform(countryIsoCode: IsoCode | undefined): string | null;
+    transform(countryIsoCode?: IsoCode | null): string | null;
     static ɵfac: i0.ɵɵFactoryDeclaration<TuiFlagPipe, never>;
     static ɵpipe: i0.ɵɵPipeDeclaration<TuiFlagPipe, "tuiFlag", true>;
 }
+export {};

package/styles/components/appearance.less

@@ -11,7 +11,7 @@
  * data-appearance — current appearance
  * data-state — manual interactive state override ('active' | 'disabled' | 'hover')
  * data-focus — manual :focus-visible state override
- * data-mode — arbitrary manual mode like 'checked', 'invalid' or 'readonly'
+ * data-mode — arbitrary manual mode like 'checked', 'invalid' or 'checked invalid'
  *
  * @example
  * <button tuiAppearance data-appearance='primary'></button>
@@ -27,6 +27,10 @@
     outline: 0.125rem solid transparent;
     outline-offset: -0.125rem;
 
+    &.tui-appearance-initializing {
+        transition: none !important;
+    }
+
     .appearance-focus({
         outline-color: var(--tui-border-focus);
     });

package/styles/components/group.less

@@ -38,15 +38,15 @@
             z-index: 0;
         }
 
-        &:invalid,
-        &[data-mode='invalid'] {
+        &:invalid:not([data-mode]),
+        &[data-mode~='invalid'] {
             z-index: 2;
 
             --t-group-clip: none;
         }
 
-        &:has(:invalid),
-        &:has([data-mode='invalid']) {
+        &:has(:invalid:not([data-mode])),
+        &:has([data-mode~='invalid']) {
             z-index: 2;
 
             --t-group-clip: none;
@@ -64,7 +64,8 @@
             --t-group-clip: none;
         }
 
-        &[data-mode='checked'] {
+        &:checked:not([data-mode]),
+        &[data-mode~='checked'] {
             z-index: 4;
 
             --t-group-clip: none;

package/styles/components/textfield.less

@@ -114,7 +114,7 @@ tui-textfield {
         color: var(--tui-text-secondary);
 
         &:has(input:read-only),
-        &:has(select[data-mode='readonly']) {
+        &:has(select[data-mode~='readonly']) {
             color: var(--tui-text-tertiary);
         }
     }
@@ -182,6 +182,15 @@ tui-textfield {
         padding: inherit;
     }
 
+    .t-template {
+        display: flex;
+        align-items: center;
+    }
+
+    &._with-template select {
+        color: transparent !important;
+    }
+
     input:defined,
     select:defined {
         pointer-events: auto;
@@ -197,7 +206,7 @@ tui-textfield {
             & ~ .t-content {
                 opacity: var(--tui-disabled-opacity);
 
-                tui-icon {
+                > tui-icon {
                     display: none;
                 }
             }
@@ -210,17 +219,17 @@ tui-textfield {
                 transform: translateY(-0.7em);
             }
 
-            &:not(:disabled)[data-mode='invalid'] ~ label,
+            &:not(:disabled)[data-mode~='invalid'] ~ label,
             &:invalid:not(:disabled):not([data-mode]) ~ label {
                 color: var(--tui-text-negative);
             }
 
-            &:not(:disabled):not([data-mode='readonly']) ~ .t-content .t-clear {
+            &:not(:disabled):not([data-mode~='readonly']) ~ .t-content .t-clear {
                 display: flex;
             }
         }
 
-        &:not([data-mode='readonly']) {
+        &:not([data-mode~='readonly']) {
             .appearance-focus({
                 &::placeholder,
                 &._empty {
@@ -261,7 +270,7 @@ tui-textfield {
         color: var(--tui-text-secondary);
     }
 
-    select:not([data-mode='readonly']) {
+    select:not([data-mode~='readonly']) {
         cursor: pointer;
     }
 
@@ -277,7 +286,7 @@ tui-textfield {
         margin-inline-start: auto;
         isolation: isolate;
 
-        tui-icon {
+        > tui-icon {
             pointer-events: auto;
         }
     }

package/styles/mixins/date-picker.less

@@ -0,0 +1,152 @@
+@import 'mixins.less';
+
+.date-picker() {
+    .t-row {
+        display: flex;
+        justify-content: flex-start;
+        font: var(--tui-font-text-m);
+
+        &:first-child {
+            justify-content: flex-end;
+        }
+
+        &:last-child {
+            justify-content: flex-start;
+        }
+    }
+
+    .t-cell {
+        position: relative;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        line-height: 2rem;
+        isolation: isolate;
+        cursor: pointer;
+        overflow: hidden;
+        border: 0.125rem solid transparent;
+        box-sizing: border-box;
+        mask: linear-gradient(
+            transparent calc(50% - 1rem),
+            #000 calc(50% - 1rem),
+            #000 calc(50% + 1rem),
+            transparent calc(50% + 1rem)
+        );
+
+        &:first-child {
+            border-inline-start-color: transparent !important;
+        }
+
+        &:last-child {
+            border-inline-end-color: transparent !important;
+        }
+
+        &::before,
+        &::after {
+            .fullsize(absolute, inset);
+
+            content: '';
+            z-index: -1;
+            border-radius: var(--tui-radius-m);
+        }
+
+        &::after {
+            mask:
+                url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 32"><path d="M0.2856 0L0.6763 0C2.9265 0 4.9876 1.259 6.0147 3.2611L10.2442 11.5048C11.5301 14.0113 11.5683 16.9754 10.3472 19.5141L5.9766 28.6007C4.9772 30.6786 2.8754 32 0.5696 32H0.285645V0Z"></path></svg>')
+                    right/0.75rem 100% no-repeat,
+                linear-gradient(#000, #000) left/calc(100% - 0.7rem) 100% no-repeat;
+        }
+
+        &[data-range]::before {
+            background: var(--tui-background-base-alt);
+        }
+
+        :host._picking &[data-range]::before {
+            background: var(--tui-background-neutral-1-hover);
+        }
+
+        &[data-range='middle'] {
+            border-color: var(--tui-background-base-alt);
+
+            :host._picking & {
+                border-color: var(--tui-background-neutral-1-hover);
+            }
+
+            &:not(:first-child)::before {
+                border-start-start-radius: 0;
+                border-end-start-radius: 0;
+            }
+
+            &:not(:last-child)::before {
+                border-start-end-radius: 0;
+                border-end-end-radius: 0;
+            }
+        }
+
+        &[data-range='start'] {
+            border-inline-end-color: var(--tui-background-base-alt);
+            color: var(--tui-text-primary-on-accent-1);
+
+            :host._picking & {
+                border-inline-end-color: var(--tui-background-neutral-1-hover);
+            }
+
+            &:not(:last-child)::before {
+                right: -1rem;
+            }
+
+            &::after {
+                background: var(--tui-background-accent-1);
+            }
+        }
+
+        &[data-range='end'] {
+            border-inline-start-color: var(--tui-background-base-alt);
+            color: var(--tui-text-primary-on-accent-1);
+
+            :host._picking & {
+                border-inline-start-color: var(--tui-background-neutral-1-hover);
+            }
+
+            &:not(:first-child)::before {
+                left: -1rem;
+            }
+
+            &::after {
+                background: var(--tui-background-accent-1);
+                transform: scale(-1, 1);
+            }
+        }
+
+        &[data-range='active'] {
+            color: var(--tui-text-primary-on-accent-1);
+
+            &::after {
+                background: var(--tui-background-accent-1);
+                mask: none;
+            }
+        }
+
+        &_disabled {
+            opacity: var(--tui-disabled-opacity);
+            pointer-events: none;
+        }
+
+        &_today {
+            text-decoration: underline;
+            text-underline-offset: 0.25rem;
+        }
+
+        @media (hover: hover) {
+            &:hover:not([data-range='start']):not([data-range='end'])::before {
+                background: var(--tui-background-neutral-1-hover);
+            }
+
+            &[data-range='start']:hover::after,
+            &[data-range='end']:hover::after,
+            &[data-range='active']:hover::after {
+                background: var(--tui-background-accent-1-hover);
+            }
+        }
+    }
+}

package/styles/mixins/picker.less

@@ -1,5 +1,6 @@
 @import 'mixins.less';
 
+// @deprecated
 .picker(@itemSize) {
     :host {
         display: block;

package/styles/mixins/picker.scss

@@ -1,5 +1,6 @@
 @import 'mixins.scss';
 
+// @deprecated
 @mixin picker($itemSize) {
     :host {
         display: block;

package/styles/taiga-ui-local.less

@@ -1,4 +1,5 @@
 @import 'mixins/browsers.less';
+@import 'mixins/date-picker.less';
 @import 'mixins/mixins.less';
 @import 'mixins/picker.less';
 @import 'mixins/slider.less';

package/styles/theme/appearance/floating.less

@@ -2,8 +2,8 @@
 
 [tuiAppearance][data-appearance='floating'] {
     background: #fff;
-    color: rgb(0 0 0 / 80%);
-    box-shadow: 0 0.25rem 1.25rem rgb(0 0 0 / 10%);
+    color: rgba(0, 0, 0, 0.8);
+    box-shadow: 0 0.25rem 1.25rem rgba(0, 0, 0, 0.1);
 
     .appearance-hover({
         box-shadow: 0 0.875rem 2.625rem rgba(0, 0, 0, 0.14);

package/styles/theme/appearance/glass.less

@@ -1,11 +1,11 @@
 @import '@taiga-ui/core/styles/taiga-ui-local.less';
 
 [tuiAppearance][data-appearance='glass'] {
-    background: rgb(0 0 0 / 40%);
+    background: rgba(0, 0, 0, 0.4);
     color: #fff;
     backdrop-filter: blur(1rem);
 
-    --tui-border-focus: rgb(255 255 255 / 64%);
+    --tui-border-focus: rgba(255, 255, 255, 0.64);
 
     .appearance-hover({
         background: rgba(0, 0, 0, 0.48);
@@ -18,7 +18,7 @@
 
 [tuiTheme='dark'] [tuiAppearance][data-appearance='glass'],
 [tuiTheme='dark'][tuiAppearance][data-appearance='glass'] {
-    background: rgb(255 255 255 / 30%);
+    background: rgba(255, 255, 255, 0.3);
 
     .appearance-hover({
         background: rgba(255, 255, 255, 0.4);

package/styles/theme/appearance/opposite.less

@@ -1,7 +1,7 @@
 @import '@taiga-ui/core/styles/taiga-ui-local.less';
 
 [tuiAppearance][data-appearance='opposite'] {
-    --tui-border-focus: rgb(255 255 255 / 64%);
+    --tui-border-focus: rgba(255, 255, 255, 0.64);
 
     background: var(--tui-background-accent-opposite);
     color: var(--tui-background-base);
@@ -17,5 +17,5 @@
 
 [tuiTheme='dark'] [tuiAppearance][data-appearance='opposite'],
 [tuiTheme='dark'][tuiAppearance][data-appearance='opposite'] {
-    --tui-border-focus: rgb(51 51 51 / 48%);
+    --tui-border-focus: rgba(51, 51, 51, 0.48);
 }

package/styles/theme/appearance/outline.less

@@ -7,8 +7,8 @@
     color: var(--tui-text-action);
     box-shadow: inset 0 0 0 1px var(--t-bs);
 
-    &:checked,
-    &[data-mode='checked'] {
+    &:checked:not([data-mode]),
+    &[data-mode~='checked'] {
         --t-bs: var(--tui-background-accent-1);
 
         box-shadow: inset 0 0 0 2px var(--t-bs);
@@ -22,12 +22,13 @@
         });
     }
 
-    &:invalid {
+    &:invalid:not([data-mode]),
+    &[data-mode~='invalid'] {
         box-shadow: inset 0 0 0 1px var(--tui-status-negative-pale-hover);
     }
 
-    &:checked:invalid,
-    &[data-mode='checked']:invalid {
+    &:checked:invalid:not([data-mode]),
+    &[data-mode~='checked'][data-mode~='invalid'] {
         box-shadow: inset 0 0 0 2px var(--tui-status-negative);
     }
 

package/styles/theme/appearance/primary.less

@@ -6,7 +6,8 @@
     background: var(--t-bg);
     color: var(--tui-text-primary-on-accent-1);
 
-    &:invalid {
+    &:invalid:not([data-mode]),
+    &[data-mode~='invalid'] {
         background: var(--tui-status-negative);
     }
 

package/styles/theme/appearance/secondary.less

@@ -14,8 +14,9 @@
         background: var(--tui-background-neutral-1-pressed);
     });
 
-    &:checked,
-    &[type='checkbox']:indeterminate {
+    &:checked:not([data-mode]),
+    &[data-mode~='checked'],
+    &[type='checkbox']:indeterminate:not([data-mode]) {
         background: var(--tui-background-accent-1);
         color: var(--tui-text-primary-on-accent-1);
 
@@ -27,7 +28,8 @@
             background: var(--tui-background-accent-1-pressed);
         });
 
-        &:invalid {
+        &:invalid:not([data-mode]),
+        &[data-mode~='invalid'] {
             background: var(--tui-status-negative);
             color: #fff;
 
@@ -43,7 +45,8 @@
         }
     }
 
-    &:invalid {
+    &:invalid:not([data-mode]),
+    &[data-mode~='invalid'] {
         color: var(--tui-text-negative);
         background: var(--tui-status-negative-pale);
 
@@ -60,11 +63,13 @@
 }
 
 [tuiAppearance][data-appearance='flat'],
-[tuiAppearance][data-appearance='flat']:invalid {
+[tuiAppearance][data-appearance='flat']:invalid:not([data-mode]),
+[tuiAppearance][data-appearance='flat'][data-mode~='invalid'] {
     background: transparent;
 }
 
-[tuiAppearance][data-appearance='flat']:checked {
+[tuiAppearance][data-appearance='flat']:checked:not([data-mode]),
+[tuiAppearance][data-appearance='flat'][data-mode~='checked'] {
     background: var(--tui-background-neutral-1);
 
     .appearance-hover({

package/styles/theme/appearance/status.less

@@ -7,7 +7,8 @@
 [tuiAppearance][data-appearance='neutral'] {
     background: var(--t-bg);
 
-    &:checked {
+    &:checked:not([data-mode]),
+    &[data-mode~='checked'] {
         color: #fff;
     }
 }
@@ -28,7 +29,8 @@
         --t-bg: var(--tui-status-negative-pale-hover);
     });
 
-    &:checked {
+    &:checked:not([data-mode]),
+    &[data-mode~='checked'] {
         background: var(--tui-status-negative);
     }
 }
@@ -49,7 +51,8 @@
         --t-bg: var(--tui-status-positive-pale-hover);
     });
 
-    &:checked {
+    &:checked:not([data-mode]),
+    &[data-mode~='checked'] {
         background: var(--tui-status-positive);
     }
 }
@@ -70,7 +73,8 @@
         --t-bg: var(--tui-status-warning-pale-hover);
     });
 
-    &:checked {
+    &:checked:not([data-mode]),
+    &[data-mode~='checked'] {
         background: var(--tui-status-warning);
     }
 }
@@ -91,7 +95,8 @@
         --t-bg: var(--tui-status-info-pale-hover);
     });
 
-    &:checked {
+    &:checked:not([data-mode]),
+    &[data-mode~='checked'] {
         background: var(--tui-status-info);
     }
 }
@@ -112,7 +117,8 @@
         --t-bg: var(--tui-background-neutral-1-pressed);
     });
 
-    &:checked {
+    &:checked:not([data-mode]),
+    &[data-mode~='checked'] {
         background: var(--tui-status-neutral);
     }
 }

package/styles/theme/appearance/textfield.less

@@ -3,7 +3,7 @@
 [tuiAppearance][data-appearance='textfield'] {
     .transition(~'box-shadow, background, outline-color, border-color');
 
-    --t-shadow: 0 0.125rem 0.1875rem rgb(0 0 0 / 10%);
+    --t-shadow: 0 0.125rem 0.1875rem rgba(0, 0, 0, 0.1);
 
     background-color: var(--tui-background-base);
     color: var(--tui-text-primary);
@@ -26,12 +26,12 @@
         box-shadow: none;
     });
 
-    &[data-mode='invalid'][data-mode='invalid'],
+    &[data-mode~='invalid'][data-mode~='invalid'],
     &:invalid:not([data-mode]) {
         outline-color: var(--tui-status-negative);
     }
 
-    &[data-mode='readonly'],
+    &[data-mode~='readonly'],
     input&:read-only:not([data-mode]) {
         box-shadow: none;
         outline-color: var(--tui-border-normal) !important;