@taiga-ui/core 2.37.1 → 2.40.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/types/direction.d.ts

@@ -1,4 +1,4 @@
 export declare type TuiHorizontalDirection = 'left' | 'right';
 export declare type TuiVerticalDirection = 'top' | 'bottom';
-export declare type TuiSideDirection = 'bottom-left' | 'bottom-right' | 'top-left' | 'top-right';
+export declare type TuiSideDirection = 'bottom-left' | 'bottom-right' | 'bottom-middle' | 'top-left' | 'top-right' | 'top-middle';
 export declare type TuiDirection = TuiHorizontalDirection | TuiSideDirection;

package/utils/format/capitalize-first-letter.d.ts

@@ -0,0 +1 @@
+export declare function capitalizeFirstLetter(value: string): string;

package/utils/format/index.d.ts

@@ -1,4 +1,5 @@
 export * from './capitalize';
+export * from './capitalize-first-letter';
 export * from './format-number';
 export * from './format-phone';
 export * from './get-fractional-part-padded';

package/utils/format/taiga-ui-core-utils-format.metadata.json

@@ -1 +1 @@
-{"__symbolic":"module","version":4,"metadata":{"capitalize":{"__symbolic":"function","parameters":["value"],"value":{"__symbolic":"call","expression":{"__symbolic":"select","expression":{"__symbolic":"call","expression":{"__symbolic":"select","expression":{"__symbolic":"reference","name":"value"},"member":"toLowerCase"}},"member":"replace"},"arguments":[{"__symbolic":"error","message":"Expression form not supported","line":8,"character":39,"module":"./capitalize"},{"__symbolic":"error","message":"Lambda not supported","line":8,"character":54,"module":"./capitalize"}]}},"formatNumber":{"__symbolic":"function"},"formatPhone":{"__symbolic":"function"},"getFractionPartPadded":{"__symbolic":"function"},"numberToStringWithoutExp":{"__symbolic":"function"},"otherDecimalSymbol":{"__symbolic":"function","parameters":["symbol"],"value":{"__symbolic":"if","condition":{"__symbolic":"binop","operator":"===","left":{"__symbolic":"reference","name":"symbol"},"right":"."},"thenExpression":",","elseExpression":"."}},"pluralize":{"__symbolic":"function"},"tuiPluralizeToICU":{"__symbolic":"function","parameters":["pluralize"],"value":{"one":{"__symbolic":"index","expression":{"__symbolic":"reference","name":"pluralize"},"index":0},"few":{"__symbolic":"index","expression":{"__symbolic":"reference","name":"pluralize"},"index":1},"many":{"__symbolic":"index","expression":{"__symbolic":"reference","name":"pluralize"},"index":2},"other":{"__symbolic":"index","expression":{"__symbolic":"reference","name":"pluralize"},"index":2}}}},"origins":{"capitalize":"./capitalize","formatNumber":"./format-number","formatPhone":"./format-phone","getFractionPartPadded":"./get-fractional-part-padded","numberToStringWithoutExp":"./number-to-string-without-exp","otherDecimalSymbol":"./other-decimal-symbol","pluralize":"./pluralize","tuiPluralizeToICU":"./pluralize-to-icu"},"importAs":"@taiga-ui/core/utils/format"}
+{"__symbolic":"module","version":4,"metadata":{"capitalize":{"__symbolic":"function","parameters":["value"],"value":{"__symbolic":"call","expression":{"__symbolic":"select","expression":{"__symbolic":"call","expression":{"__symbolic":"select","expression":{"__symbolic":"reference","name":"value"},"member":"toLowerCase"}},"member":"replace"},"arguments":[{"__symbolic":"error","message":"Expression form not supported","line":8,"character":39,"module":"./capitalize"},{"__symbolic":"error","message":"Lambda not supported","line":8,"character":54,"module":"./capitalize"}]}},"capitalizeFirstLetter":{"__symbolic":"function","parameters":["value"],"value":{"__symbolic":"binop","operator":"+","left":{"__symbolic":"call","expression":{"__symbolic":"select","expression":{"__symbolic":"call","expression":{"__symbolic":"select","expression":{"__symbolic":"reference","name":"value"},"member":"charAt"},"arguments":[0]},"member":"toUpperCase"}},"right":{"__symbolic":"call","expression":{"__symbolic":"select","expression":{"__symbolic":"reference","name":"value"},"member":"slice"},"arguments":[1]}}},"formatNumber":{"__symbolic":"function"},"formatPhone":{"__symbolic":"function"},"getFractionPartPadded":{"__symbolic":"function"},"numberToStringWithoutExp":{"__symbolic":"function"},"otherDecimalSymbol":{"__symbolic":"function","parameters":["symbol"],"value":{"__symbolic":"if","condition":{"__symbolic":"binop","operator":"===","left":{"__symbolic":"reference","name":"symbol"},"right":"."},"thenExpression":",","elseExpression":"."}},"pluralize":{"__symbolic":"function"},"tuiPluralizeToICU":{"__symbolic":"function","parameters":["pluralize"],"value":{"one":{"__symbolic":"index","expression":{"__symbolic":"reference","name":"pluralize"},"index":0},"few":{"__symbolic":"index","expression":{"__symbolic":"reference","name":"pluralize"},"index":1},"many":{"__symbolic":"index","expression":{"__symbolic":"reference","name":"pluralize"},"index":2},"other":{"__symbolic":"index","expression":{"__symbolic":"reference","name":"pluralize"},"index":2}}}},"origins":{"capitalize":"./capitalize","capitalizeFirstLetter":"./capitalize-first-letter","formatNumber":"./format-number","formatPhone":"./format-phone","getFractionPartPadded":"./get-fractional-part-padded","numberToStringWithoutExp":"./number-to-string-without-exp","otherDecimalSymbol":"./other-decimal-symbol","pluralize":"./pluralize","tuiPluralizeToICU":"./pluralize-to-icu"},"importAs":"@taiga-ui/core/utils/format"}

package/utils/mask/create-auto-corrected-money-pipe.d.ts

@@ -3,4 +3,4 @@ import { TuiDecimalSymbol } from '@taiga-ui/core/types';
 /**
  * Used to finish a number with zeros to a given precision
  */
-export declare function tuiCreateAutoCorrectedNumberPipe(decimalLimit?: number, decimalSymbol?: TuiDecimalSymbol, thousandSymbol?: string, nativeInput?: HTMLInputElement | null, allowNegative?: boolean): TuiTextMaskPipeHandler;
+export declare function tuiCreateAutoCorrectedNumberPipe(decimalLimit?: number, decimalSymbol?: TuiDecimalSymbol, thousandSymbol?: string, nativeInput?: HTMLInputElement | null, allowNegative?: boolean, isIOS?: boolean): TuiTextMaskPipeHandler;