@taiga-ui/legacy 4.65.0 → 5.0.0-rc.0

package/styles/mixins/textfield.scss

@@ -1,308 +0,0 @@
-$line-height-l: 1.25rem;
-
-@mixin textfield-host() {
-    @include text-basic();
-    position: relative;
-    display: block;
-    text-align: start;
-    border-radius: var(--tui-radius-m);
-    height: var(--tui-height);
-    min-height: var(--tui-height);
-    max-height: var(--tui-height);
-
-    &[data-size='s'] {
-        --tui-height: var(--tui-height-s);
-        font: var(--tui-font-text-s);
-    }
-
-    &[data-size='m'] {
-        --tui-height: var(--tui-height-m);
-        font: var(--tui-font-text-s);
-    }
-
-    &[data-size='l'] {
-        --tui-height: var(--tui-height-l);
-        font: var(--tui-font-text-m);
-        line-height: 1.25rem;
-    }
-}
-
-@mixin textfield-content() {
-    display: flex;
-    height: 100%;
-    width: 100%;
-    box-sizing: border-box;
-    align-items: center;
-    overflow: hidden;
-
-    :host[data-size='s'] & {
-        padding: 0 var(--tui-padding-s);
-    }
-
-    :host[data-size='m'] & {
-        padding: 0 var(--tui-padding-m);
-    }
-
-    :host[data-size='l'] & {
-        padding: 0 var(--tui-padding-l);
-    }
-}
-
-@mixin textfield-input() {
-    @include text-basic();
-    @include clearinput();
-    @include fullsize();
-    border: solid transparent;
-    border-inline-start-width: var(--t-border-start, 0);
-    border-inline-end-width: var(--t-border-end, 0);
-    text-indent: var(--t-text-indent);
-    text-align: inherit;
-    box-sizing: border-box;
-    white-space: nowrap;
-    overflow: hidden;
-    text-transform: inherit;
-    resize: none;
-
-    &[inputMode='none'] {
-        caret-color: transparent;
-    }
-
-    /* stylelint-disable */
-    /* Safari autofill icons */
-    //noinspection CssInvalidPseudoSelector
-    &:-webkit-autofill,
-    &:-webkit-autofill::first-line {
-        font-size: inherit;
-        line-height: inherit;
-    }
-    /* stylelint-enable */
-
-    //noinspection ALL
-    &::-webkit-caps-lock-indicator,
-    &::-webkit-contacts-auto-fill-button,
-    &::-webkit-credit-card-auto-fill-button,
-    &::-webkit-credentials-auto-fill-button,
-    &::-webkit-strong-password-auto-fill-button {
-        @include webkit-auto-fill-button-hidden();
-    }
-
-    &::placeholder {
-        color: var(--tui-text-tertiary);
-        opacity: 0;
-    }
-
-    :host._focused:not(._readonly) &::placeholder,
-    :host-context(tui-primitive-textfield._focused:not(._readonly)) &::placeholder,
-    :host-context(tui-textarea._focused:not(._readonly)) &::placeholder,
-    :host-context(tui-text-area._focused:not(._readonly)) &::placeholder {
-        opacity: 1;
-    }
-
-    :host[data-size='s'] &,
-    :host-context(tui-primitive-textfield[data-size='s']):not(tui-primitive-textfield),
-    :host-context(tui-textarea[data-size='s']):not(tui-textarea),
-    :host-context(tui-text-area[data-size='s']):not(tui-text-area) {
-        padding: 0 var(--tui-padding-s);
-    }
-
-    :host[data-size='m'] &,
-    :host-context(tui-primitive-textfield[data-size='m']):not(tui-primitive-textfield),
-    :host-context(tui-textarea[data-size='m']):not(tui-textarea),
-    :host-context(tui-text-area[data-size='m']):not(tui-text-area) {
-        padding: 0 var(--tui-padding-m);
-    }
-
-    :host[data-size='l'] &,
-    :host-context(tui-primitive-textfield[data-size='l']):not(tui-primitive-textfield),
-    :host-context(tui-textarea[data-size='l']):not(tui-textarea),
-    :host-context(tui-text-area[data-size='l']):not(tui-text-area) {
-        padding: 0 var(--tui-padding-l);
-    }
-
-    :host._disabled &,
-    :host-context(tui-primitive-textfield._disabled),
-    :host-context(tui-textarea._disabled),
-    :host-context(tui-text-area._disabled) {
-        // @bad TODO: research why you can reach disabled textfield with mask inside a label without that
-        pointer-events: none;
-    }
-
-    :host[data-size='l']:not(._label-outside) &,
-    :host-context(tui-primitive-textfield[data-size='l']:not(._label-outside)):not(tui-primitive-textfield) {
-        padding-block-start: 1.25rem;
-
-        // Workaround for raising placeholder in temporary autofill
-        &:-webkit-autofill + .t-content .t-placeholder {
-            font-size: 0.8156rem;
-            transform: translateY(-0.625rem);
-        }
-    }
-
-    :host[data-size='m']:not(._label-outside) &,
-    :host-context(tui-primitive-textfield[data-size='m']:not(._label-outside)):not(tui-primitive-textfield) {
-        padding-block-start: 1rem;
-
-        // Workaround for raising placeholder in temporary autofill
-        &:-webkit-autofill + .t-content .t-placeholder {
-            font-size: 0.69rem;
-            transform: translateY(-0.5rem);
-        }
-    }
-
-    :host._hidden input&,
-    :host-context(tui-primitive-textfield._hidden) {
-        opacity: 0;
-        text-indent: -10em; // Hide blinking caret even in IE
-        -webkit-user-select: none; // Hide blinking caret in mobile safari
-    }
-}
-
-@mixin textfield-wrapper() {
-    flex: 1;
-    min-width: 0;
-    padding-inline-end: 0.25rem;
-}
-
-@mixin textfield-label() {
-    @include transition('transform, font-size, color, letter-spacing');
-    @include text-overflow();
-    display: block;
-    width: 100%;
-    user-select: none;
-    font: var(--tui-font-text-s);
-    color: var(--tui-text-secondary);
-    pointer-events: none;
-    will-change: transform;
-    transform: translateY(0);
-
-    &_raised {
-        transform: translateY(-0.625rem);
-
-        :host[data-size='m'] & {
-            font: var(--tui-font-text-xs);
-            line-height: 1.25rem;
-            transform: translateY(-0.5rem);
-            letter-spacing: 0.025rem;
-        }
-
-        :host._invalid:not(._focused) &,
-        :host._invalid:not(._focused):hover & {
-            color: var(--tui-text-negative);
-        }
-    }
-
-    :host._focused &,
-    :host[data-size='m']._focused._label-outside &,
-    :host[data-size='l']._focused._label-outside & {
-        color: var(--tui-text-tertiary);
-    }
-
-    :host[data-size='l'] & {
-        font: var(--tui-font-text-m);
-        line-height: 1.25rem;
-
-        &_raised {
-            font-size: 0.8156rem;
-        }
-    }
-
-    :host[data-size='m']._focused:not(._label-outside) &,
-    :host[data-size='l']._focused:not(._label-outside) & {
-        color: var(--tui-text-primary);
-    }
-
-    @include safari-only {
-        & {
-            will-change: unset;
-            transition-property: transform, color, letter-spacing;
-        }
-    }
-}
-
-@mixin input-icon() {
-    position: relative;
-    display: flex;
-    width: 1.5rem;
-    height: 1.5rem;
-    align-items: center;
-    justify-content: center;
-    box-sizing: border-box;
-    cursor: pointer;
-    pointer-events: none;
-}
-
-@mixin input-icons() {
-    display: flex;
-    align-items: center;
-
-    :host[data-size='m'] & {
-        margin-inline-end: -0.125rem;
-    }
-
-    :host[data-size='s'] & {
-        margin-inline-end: -0.375rem;
-    }
-
-    :host:not([data-size='s']) & > :not(:first-child) {
-        margin-inline-start: 0.25rem;
-    }
-}
-
-@mixin icon-button() {
-    @include input-icon();
-    pointer-events: auto;
-
-    :host._readonly &,
-    :host._disabled & {
-        pointer-events: none;
-    }
-}
-
-@mixin textfield() {
-    :host {
-        @include textfield-host();
-    }
-
-    .t-input {
-        @include textfield-input();
-    }
-
-    .t-content {
-        @include textfield-content();
-    }
-
-    .t-wrapper {
-        @include textfield-wrapper();
-    }
-
-    .t-placeholder {
-        @include textfield-label();
-    }
-
-    .t-cleaner {
-        @include icon-button();
-    }
-
-    .t-icon {
-        @include input-icon();
-
-        &_left {
-            :host[data-size='s'] & {
-                margin: 0 0.125rem 0 -0.375rem;
-            }
-
-            :host[data-size='m'] & {
-                margin-inline-start: -0.125rem;
-                margin-inline-end: 0.375rem;
-            }
-
-            :host[data-size='l'] & {
-                margin-inline-end: 0.75rem;
-            }
-        }
-    }
-
-    .t-icons {
-        @include input-icons();
-    }
-}

package/styles/taiga-ui-local.less

@@ -1,3 +0,0 @@
-@import '@taiga-ui/core/styles/taiga-ui-local.less';
-@import 'mixins/mixins.less';
-@import 'mixins/textfield.less';

package/styles/taiga-ui-local.scss

@@ -1,3 +0,0 @@
-@import '@taiga-ui/core/styles/taiga-ui-local.scss';
-@import 'mixins/mixins.scss';
-@import 'mixins/textfield.scss';

package/tokens/countries-masks.d.ts

@@ -1,9 +0,0 @@
-import { InjectionToken } from '@angular/core';
-import { type TuiCountryIsoCode } from '@taiga-ui/i18n/types';
-/**
- * @deprecated: drop in v5.0
- * Use new version of {@link https://taiga-ui.dev/components/input-phone-international InputPhoneInternational}.
- * The new version is based on Google Open Source solution {@link https://github.com/google/libphonenumber libphonenumber}.
- * This token (and all other hard-coded values) and related utils are no more required.
- */
-export declare const TUI_COUNTRIES_MASKS: InjectionToken<Record<TuiCountryIsoCode, string>>;

package/tokens/focusable-item-accessor.d.ts

@@ -1,25 +0,0 @@
-import { InjectionToken, type Provider, type Type } from '@angular/core';
-import { type Observable } from 'rxjs';
-/**
- * @deprecated: drop in v5.0
- */
-export interface TuiNativeFocusableElement extends Element, HTMLOrSVGElement {
-}
-/**
- * @deprecated: drop in v5.0
- * Public interface for any focusable component or directive
- */
-export interface TuiFocusableElementAccessor {
-    focused: boolean;
-    readonly focusedChange: Observable<boolean>;
-    nativeFocusableElement: TuiNativeFocusableElement | null;
-}
-/**
- * @deprecated: drop in v5.0
- * A component that can be focused
- */
-export declare const TUI_FOCUSABLE_ITEM_ACCESSOR: InjectionToken<TuiFocusableElementAccessor>;
-/**
- * @deprecated: drop in v5.0
- */
-export declare function tuiAsFocusableItemAccessor(accessor: Type<TuiFocusableElementAccessor>): Provider;

package/tokens/fonts-ready.d.ts

@@ -1,6 +0,0 @@
-import { InjectionToken } from '@angular/core';
-import { type Observable } from 'rxjs';
-/**
- * @deprecated: drop in v5.0
- */
-export declare const TUI_FONTS_READY: InjectionToken<Observable<unknown>>;

package/tokens/icons.d.ts

@@ -1,6 +0,0 @@
-import { InjectionToken } from '@angular/core';
-/**
- * @deprecated: drop in v5.0
- * A key/value dictionary of icon names and src to be defined with TuiSvgService
- */
-export declare const TUI_ICON_STARTS: InjectionToken<Record<string, string>>;

package/tokens/index.d.ts

@@ -1,14 +0,0 @@
-export * from './countries-masks';
-export * from './focusable-item-accessor';
-export * from './fonts-ready';
-export * from './icons';
-export * from './is-apple';
-export * from './is-chromium';
-export * from './is-firefox';
-export * from './is-stackblitz';
-export * from './month-formatter';
-export * from './sanitizer';
-export * from './textfield-appearance';
-export * from './textfield-host';
-export * from './touch-supported';
-export * from './value-accessor';

package/tokens/is-apple.d.ts

@@ -1,6 +0,0 @@
-import { InjectionToken } from '@angular/core';
-/**
- * @deprecated: drop in v5.0
- * Apple(safari/webkit) detection
- */
-export declare const TUI_IS_APPLE: InjectionToken<boolean>;

package/tokens/is-chromium.d.ts

@@ -1,6 +0,0 @@
-import { InjectionToken } from '@angular/core';
-/**
- * @deprecated: drop in v5.0
- * Chromium browser engine detection
- */
-export declare const TUI_IS_CHROMIUM: InjectionToken<boolean>;

package/tokens/is-firefox.d.ts

@@ -1,6 +0,0 @@
-import { InjectionToken } from '@angular/core';
-/**
- * @deprecated: drop in v5.0
- * Firefox browser engine detection
- */
-export declare const TUI_IS_FIREFOX: InjectionToken<boolean>;

package/tokens/is-stackblitz.d.ts

@@ -1,5 +0,0 @@
-import { InjectionToken } from '@angular/core';
-/**
- * @deprecated: drop in v5.0
- */
-export declare const TUI_IS_STACKBLITZ: InjectionToken<boolean>;

package/tokens/month-formatter.d.ts

@@ -1,10 +0,0 @@
-import { type FactoryProvider, InjectionToken } from '@angular/core';
-import { type TuiMonth } from '@taiga-ui/cdk/date-time';
-import { type TuiHandler } from '@taiga-ui/cdk/types';
-import { type Observable } from 'rxjs';
-/**
- * @deprecated: drop in v5.0
- * A function to get localized formatted month
- */
-export declare const TUI_MONTH_FORMATTER: InjectionToken<TuiHandler<TuiMonth | null, Observable<string>>>;
-export declare const TUI_MONTH_FORMATTER_PROVIDER: FactoryProvider;

package/tokens/sanitizer.d.ts

@@ -1,6 +0,0 @@
-import { InjectionToken, type Sanitizer } from '@angular/core';
-/**
- * @deprecated: drop in v5.0
- * A custom Sanitizer to sanitize source before inlining
- */
-export declare const TUI_SANITIZER: InjectionToken<Sanitizer>;

package/tokens/textfield-appearance.d.ts

@@ -1,7 +0,0 @@
-import { InjectionToken } from '@angular/core';
-/**
- * @deprecated: drop in v5.0
- * Appearance for inputs
- * use {@link TUI_TEXTFIELD_APPEARANCE_DIRECTIVE} instead
- */
-export declare const TUI_TEXTFIELD_APPEARANCE: InjectionToken<string>;

package/tokens/textfield-host.d.ts

@@ -1,23 +0,0 @@
-import { InjectionToken, type Provider, type Type } from '@angular/core';
-/**
- * @deprecated: drop in v5.0
- */
-export interface TuiTextfieldHost {
-    readonly disabled: boolean;
-    readonly focusable: boolean;
-    readonly inputMode: 'decimal' | 'email' | 'none' | 'numeric' | 'search' | 'tel' | 'text' | 'url';
-    readonly invalid: boolean;
-    onValueChange(value: string): void;
-    process(input: HTMLInputElement): void;
-    readonly readOnly: boolean;
-    readonly value: string;
-}
-/**
- * @deprecated: drop in v5.0
- * An interface to communicate with textfield based controls
- */
-export declare const TUI_TEXTFIELD_HOST: InjectionToken<TuiTextfieldHost>;
-/**
- * @deprecated: drop in v5.0
- */
-export declare function tuiAsTextfieldHost(host: Type<TuiTextfieldHost>): Provider;

package/tokens/touch-supported.d.ts

@@ -1,5 +0,0 @@
-import { InjectionToken } from '@angular/core';
-/**
- * @deprecated: drop in v5.0
- */
-export declare const TUI_TOUCH_SUPPORTED: InjectionToken<boolean>;

package/tokens/value-accessor.d.ts

@@ -1,7 +0,0 @@
-import { InjectionToken } from '@angular/core';
-import { type ControlValueAccessor } from '@angular/forms';
-/**
- * @deprecated: drop in v5.0
- * Buffer token to pass NG_VALUE_ACCESSOR to a different Injector
- */
-export declare const TUI_VALUE_ACCESSOR: InjectionToken<ControlValueAccessor>;

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

@@ -1,4 +0,0 @@
-/**
- * @deprecated: drop in v5.0
- */
-export declare function tuiCapitalizeFirstLetter(value: string): string;

package/utils/date-mode-maskito-adapter.d.ts

@@ -1,6 +0,0 @@
-import { type MaskitoDateMode } from '@maskito/kit';
-import { type TuiDateMode } from '@taiga-ui/cdk/date-time';
-/**
- * @deprecated: drop in v5.0
- */
-export declare const TUI_DATE_MODE_MASKITO_ADAPTER: Record<TuiDateMode, MaskitoDateMode>;

package/utils/format-phone.d.ts

@@ -1,30 +0,0 @@
-/**
- * @deprecated: drop in v5.0
- * Use {@link https://maskito.dev/core-concepts/transformer maskitoTransform} instead!
- * @example
- * import {maskitoTransform} from '@maskito/core';
- *
- * const mask = {
- *     mask: ['+', '1', ' ', /\d/, /\d/, /\d/, ')', ' ', /\d/, /\d/, /\d/, '-', /\d/, /\d/, /\d/, /\d/],
- * };
- * maskitoTransform('12125552368', mask); // +1 (212) 555-2368
- * ___
- * @example
- * import {maskitoTransform} from '@maskito/core';
- * import {maskitoPhoneOptionsGenerator} from '@maskito/phone';
- * import metadata from 'libphonenumber-js/min/metadata';
- *
- * const options = maskitoPhoneOptionsGenerator({countryIsoCode: 'US', metadata});
- *
- * maskitoTransform('12125552368', mask); // +1 (212) 555-2368
- * ___
- * @deprecated Use {@link https://maskito.dev/core-concepts/transformer maskitoTransform} instead<br/>
- * Formats a string with the phone format +7XXXXXXXXXXXX or XXXXXXXXXXXX,
- * adding parentheses and hyphens.
- *
- * @param value the input string
- * @param countryCode a country code
- * @param phoneMask a phone number mask
- * @return the formatted phone string of the form +7 XXX XXX-XX-XX
- */
-export declare function tuiFormatPhone(value: string, countryCode: string, phoneMask: string): string;

package/utils/get-border.d.ts

@@ -1,5 +0,0 @@
-import { type TuiSizeL, type TuiSizeS } from '@taiga-ui/core/types';
-/**
- * @deprecated: drop in v5.0
- */
-export declare function tuiGetBorder(hasIcon: boolean, hasCleaner?: boolean, hasTooltip?: boolean, hasContent?: boolean, size?: TuiSizeL | TuiSizeS): number;

package/utils/get-max-allowed-phone-length.d.ts

@@ -1,24 +0,0 @@
-import { type TuiCountryIsoCode } from '@taiga-ui/i18n/types';
-/**
- * @deprecated: drop in v5.0
- * use `validatePhoneNumberLength` from `libphonenumber-js` instead
- * ```
- * npm i libphonenumber-js
- * ```
- *
- * ```ts
- * import {validatePhoneNumberLength} from 'libphonenumber-js';
- * import metadata from 'libphonenumber-js/max/metadata';
- *
- * const validationError = validatePhoneNumberLength(
- *      '+7 777 777-7777',
- *      'KZ'
- * ) // undefined | 'INVALID_COUNTRY' | 'NOT_A_NUMBER' | 'TOO_SHORT' | 'TOO_LONG' | 'INVALID_LENGTH';
- *
- * validatePhoneNumberLength('+7777777', 'KZ'); // 'TOO_SHORT'
- * validatePhoneNumberLength('+7 777 777-7777', 'KZ'); // undefined
- * validatePhoneNumberLength('+77777777777', 'KZ'); // undefined
- * validatePhoneNumberLength('+777777777777777777', 'KZ'); // 'TOO_LONG'
- * ```
- */
-export declare function tuiGetMaxAllowedPhoneLength(countries: Record<TuiCountryIsoCode, string>, isoCode: TuiCountryIsoCode): number;

package/utils/get-safe-area-size.d.ts

@@ -1,7 +0,0 @@
-/**
- * @deprecated: drop in v5.0
- * Calculates size of safe area on mobile devices (status bars)
- *
- * ATTENTION: Only use in browser environment
- */
-export declare function tuiGetSafeAreaSize(): number;

package/utils/icons-path-factory.d.ts

@@ -1,13 +0,0 @@
-import { type TuiStringHandler } from '@taiga-ui/cdk/types';
-/**
- * @deprecated: drop in v5.0
- */
-export declare const TUI_CACHE_BUSTING_PAYLOAD: "?v=4.65.0";
-/**
- * @deprecated: drop in v5.0
- */
-export declare const DEFAULT_ICONS_PATH: TuiStringHandler<string>;
-/**
- * @deprecated: drop in v5.0
- */
-export declare function tuiIconsPathFactory(staticPath: string): TuiStringHandler<string>;

package/utils/index.d.ts

@@ -1,14 +0,0 @@
-export * from './capitalize-first-letter';
-export * from './date-mode-maskito-adapter';
-export * from './format-phone';
-export * from './get-border';
-export * from './get-max-allowed-phone-length';
-export * from './get-safe-area-size';
-export * from './icons-path-factory';
-export * from './is-apple';
-export * from './is-presumed-html-string';
-export * from './iso-to-country-code';
-export * from './not-kz-region';
-export * from './process-icon';
-export * from './specific-dropdown-controllers';
-export type * from './status';

package/utils/is-apple.d.ts

@@ -1,5 +0,0 @@
-import { isApple } from '@ng-web-apis/platform';
-/**
- * @deprecated: drop in v5.0
- */
-export declare const tuiIsApple: typeof isApple;

package/utils/is-presumed-html-string.d.ts

@@ -1,4 +0,0 @@
-/**
- * @deprecated: drop in v5.0
- */
-export declare function tuiIsPresumedHTMLString(candidate: string): boolean;

package/utils/iso-to-country-code.d.ts

@@ -1,13 +0,0 @@
-import { type TuiCountryIsoCode } from '@taiga-ui/i18n/types';
-/**
- * @deprecated: drop in v5.0
- * Use `getCountryCallingCode` from `libphonenumber-js/core` instead
- * ```ts
- * import {getCountryCallingCode} from 'libphonenumber-js/core';
- * import metadata from 'libphonenumber-js/max/metadata';
- *
- * getCountryCallingCode('US', metadata) // 1
- * getCountryCallingCode('GB', metadata) // 44
- * ```
- */
-export declare function tuiIsoToCountryCode(countriesMasks: Record<TuiCountryIsoCode, string>, isoCode: TuiCountryIsoCode): string;

package/utils/not-kz-region.d.ts

@@ -1,20 +0,0 @@
-/**
- * @deprecated: drop in v5.0
- * use `maskitoGetCountryFromNumber` from `@maskito/phone` instead
- * ```
- * npm i @maskito/phone
- * ```
- *
- * ```ts
- * import {maskitoGetCountryFromNumber} from '@maskito/phone';
- * import metadata from 'libphonenumber-js/max/metadata';
- *
- * const countryIsoCode = maskitoGetCountryFromNumber(
- *      '+7 777 777-7777',
- *      metadata
- * );
- *
- * countryIsoCode !== 'KZ'
- * ```
- */
-export declare function tuiNotKzRegion(value: string): boolean;

package/utils/process-icon.d.ts

@@ -1,4 +0,0 @@
-/**
- * @deprecated: drop in v5.0
- */
-export declare function tuiProcessIcon(source: string, name: string): string;

package/utils/specific-dropdown-controllers.d.ts

@@ -1,4 +0,0 @@
-/**
- * @deprecated: drop in v5.0
- */
-export declare const FIXED_DROPDOWN_CONTROLLER_PROVIDER: import("@angular/core").FactoryProvider;

package/utils/status.d.ts

@@ -1,4 +0,0 @@
-/**
- * @deprecated: drop in v5.0
- */
-export type TuiStatus = 'custom' | 'default' | 'error' | 'info' | 'neutral' | 'primary' | 'success' | 'warning';