@taiga-ui/core 4.7.0 → 4.8.1-canary.0ecc12f

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

@@ -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/link.less

@@ -46,6 +46,7 @@
         vertical-align: super;
         font-size: 0;
         line-height: 0;
+        box-sizing: border-box;
     }
 
     .appearance-focus({

package/styles/components/textfield.less

@@ -4,6 +4,7 @@ tui-textfield {
     .transition(color);
 
     --t-height: var(--tui-height-l);
+    --t-padding: var(--tui-padding-l);
 
     position: relative;
     display: flex;
@@ -12,7 +13,7 @@ tui-textfield {
     cursor: pointer;
     block-size: var(--t-height);
     color: var(--tui-text-tertiary);
-    padding: 0 var(--tui-padding-l);
+    padding: 0 var(--t-padding);
     border-radius: var(--tui-radius-l);
     font: var(--tui-font-text-m);
     box-sizing: border-box;
@@ -36,8 +37,8 @@ tui-textfield {
 
     &[data-size='s'] {
         --t-height: var(--tui-height-s);
+        --t-padding: var(--tui-padding-s);
 
-        padding: 0 var(--tui-padding-s);
         border-radius: var(--tui-radius-m);
         font: var(--tui-font-text-s);
 
@@ -72,8 +73,8 @@ tui-textfield {
 
     &[data-size='m'] {
         --t-height: var(--tui-height-m);
+        --t-padding: var(--tui-padding-m);
 
-        padding: 0 var(--tui-padding-m);
         border-radius: var(--tui-radius-m);
         font: var(--tui-font-text-s);
 
@@ -139,15 +140,13 @@ tui-textfield {
 
     &:has(label:not(:empty)) {
         .t-template,
-        input,
-        select {
+        input:defined,
+        select:defined {
             padding-top: calc(var(--t-height) / 3);
 
-            &:not(:-webkit-autofill)::placeholder,
+            &::placeholder,
             &._empty {
-                caret-color: var(--tui-text-primary);
-                color: transparent !important;
-                -webkit-text-fill-color: transparent !important;
+                color: transparent;
             }
         }
     }
@@ -155,15 +154,13 @@ tui-textfield {
     // TODO: Fallback until Safari 15.4
     &._with-label {
         .t-template,
-        input,
-        select {
+        input:defined,
+        select:defined {
             padding-top: calc(var(--t-height) / 3);
 
-            &:not(:-webkit-autofill)::placeholder,
+            &::placeholder,
             &._empty {
-                caret-color: var(--tui-text-primary);
-                color: transparent !important;
-                -webkit-text-fill-color: transparent !important;
+                color: transparent;
             }
         }
     }
@@ -171,15 +168,15 @@ tui-textfield {
     .t-template,
     input:defined,
     select:defined {
-        .fullsize(absolute, inset);
+        .fullsize();
 
         appearance: none;
         box-sizing: border-box;
-        border: none;
-        border-inline-start: var(--t-left, 0) solid transparent !important;
-        border-inline-end: calc(var(--t-right, var(--t-0, 0rem)) + var(--t-side)) solid transparent !important;
         border-radius: inherit;
         padding: inherit;
+        border: none;
+        text-indent: var(--t-left, 0);
+        padding-inline-end: calc(var(--t-right, var(--t-0, 0rem)) + var(--t-side) + var(--t-padding));
     }
 
     .t-template {
@@ -194,8 +191,7 @@ tui-textfield {
     input:defined,
     select:defined {
         pointer-events: auto;
-        background: transparent no-repeat center right 1rem / 2rem;
-        background-clip: border-box, padding-box;
+        background: transparent;
 
         &:read-only ~ .t-filler {
             display: none;
@@ -206,7 +202,7 @@ tui-textfield {
             & ~ .t-content {
                 opacity: var(--tui-disabled-opacity);
 
-                tui-icon {
+                > tui-icon {
                     display: none;
                 }
             }
@@ -233,9 +229,7 @@ tui-textfield {
             .appearance-focus({
                 &::placeholder,
                 &._empty {
-                    caret-color: var(--tui-text-primary);
-                    color: transparent !important;
-                    -webkit-text-fill-color: var(--tui-text-tertiary) !important;
+                    color: var(--tui-text-tertiary);
                 }
 
                 & ~ label {
@@ -286,7 +280,7 @@ tui-textfield {
         margin-inline-start: auto;
         isolation: isolate;
 
-        tui-icon {
+        > tui-icon {
             pointer-events: auto;
         }
     }

package/styles/mixins/date-picker.less

@@ -58,7 +58,7 @@
         }
 
         &[data-range]::before {
-            background: var(--tui-background-base-alt);
+            background: var(--tui-background-neutral-1);
         }
 
         :host._picking &[data-range]::before {
@@ -66,7 +66,7 @@
         }
 
         &[data-range='middle'] {
-            border-color: var(--tui-background-base-alt);
+            border-color: var(--tui-background-neutral-1);
 
             :host._picking & {
                 border-color: var(--tui-background-neutral-1-hover);
@@ -84,7 +84,7 @@
         }
 
         &[data-range='start'] {
-            border-inline-end-color: var(--tui-background-base-alt);
+            border-inline-end-color: var(--tui-background-neutral-1);
             color: var(--tui-text-primary-on-accent-1);
 
             :host._picking & {
@@ -101,7 +101,7 @@
         }
 
         &[data-range='end'] {
-            border-inline-start-color: var(--tui-background-base-alt);
+            border-inline-start-color: var(--tui-background-neutral-1);
             color: var(--tui-text-primary-on-accent-1);
 
             :host._picking & {

package/styles/mixins/mixins.less

@@ -129,3 +129,20 @@
     overflow: hidden;
     padding: 0;
 }
+
+// prevent scrolling to focused element on IOS
+.tui-prevent-ios-scroll() {
+    &:focus {
+        animation: tuiPreventIOSScroll 0.001s;
+    }
+
+    @keyframes tuiPreventIOSScroll {
+        0% {
+            opacity: 0;
+        }
+
+        100% {
+            opacity: 1;
+        }
+    }
+}

package/styles/mixins/mixins.scss

@@ -128,3 +128,20 @@
     overflow: hidden;
     padding: 0;
 }
+
+// prevent scrolling to focused element on IOS
+@mixin tui-prevent-ios-scroll() {
+    &:focus {
+        animation: tuiPreventIOSScroll 0.001s;
+    }
+
+    @keyframes tuiPreventIOSScroll {
+        0% {
+            opacity: 0;
+        }
+
+        100% {
+            opacity: 1;
+        }
+    }
+}

package/styles/theme/appearance/textfield.less

@@ -40,13 +40,8 @@
     &:-webkit-autofill {
         -webkit-text-fill-color: var(--tui-text-primary) !important;
         caret-color: var(--tui-text-primary) !important;
-        border-color: var(--tui-service-autofill-background) !important;
         box-shadow: 0 0 0 100rem var(--tui-service-autofill-background) inset !important;
         transition: background-color 600000s 0s;
-
-        &::placeholder {
-            -webkit-text-fill-color: var(--tui-text-secondary);
-        }
     }
 }
 

package/tokens/dark-mode.d.ts

@@ -1,6 +1,6 @@
-import { InjectionToken, type WritableSignal } from '@angular/core';
+import { type WritableSignal } from '@angular/core';
 export declare const TUI_DARK_MODE_DEFAULT_KEY = "tuiDark";
-export declare const TUI_DARK_MODE_KEY: InjectionToken<string>;
-export declare const TUI_DARK_MODE: InjectionToken<WritableSignal<boolean> & {
+export declare const TUI_DARK_MODE_KEY: import("@angular/core").InjectionToken<string>;
+export declare const TUI_DARK_MODE: import("@angular/core").InjectionToken<WritableSignal<boolean> & {
     reset(): void;
 }>;