@taiga-ui/cdk 4.0.0-rc.1 → 4.0.0-rc.10

package/schematics/ng-update/v4/migrate-icons/rename-icons.js

@@ -17,26 +17,34 @@ const CHANGED_ICONS = [
     { from: 'tuiIconDragLarge', to: ' @tui.grip-vertical' },
     { from: 'tuiIconGrid', to: '@tui.layout-grid' },
     { from: 'tuiIconGridLarge', to: '@tui.layout-grid' },
+    { from: 'tuiIconTool', to: '@tui.wrench' },
+    { from: 'tuiIconUnlock', to: '@tui.lock-open' },
+    { from: 'tuiIconMessageCircle', to: '@tui.message-circle' },
+    { from: 'tuiIconSliders', to: '@tui.sliders-vertical' },
+    { from: 'tuiIconPlusSquare', to: '@tui.square-plus' },
+    { from: 'tuiIconAlertTriangle', to: '@tui.triangle-alert' },
+    { from: 'tuiIconUploadCloud', to: '@tui.cloud-upload' },
+    { from: 'tuiIconDownloadCloud', to: '@tui.cloud-download' },
 ];
 function renameIcons(pattern = constants_1.ALL_FILES) {
     const sourceFiles = (0, ng_morph_1.getSourceFiles)(pattern);
-    sourceFiles.forEach(file => {
+    sourceFiles.forEach((file) => {
         let text = file.getFullText();
         CHANGED_ICONS.map(({ from, to }) => ({
-            from: new RegExp(`\\b${from}\\b`, 'g'),
+            from: new RegExp(`["'\`]${from}["'\`]`, 'g'),
             to,
         })).forEach(({ from, to }) => {
-            text = text.replaceAll(from, to);
+            text = text.replaceAll(from, `"${to}"`);
         });
-        const regex = /\btuiIcon(?!Button\b)[A-Z][a-zA-Z0-9]*\b/g;
-        text = text.replaceAll(regex, match => convertString(match));
+        const regex = /['"`]tuiIcon(?!Button\b)[A-Z][a-zA-Z0-9]*\b/g;
+        text = text.replaceAll(regex, (match) => convertString(match));
         file.replaceWithText(text);
     });
 }
 exports.renameIcons = renameIcons;
 function convertString(input) {
     let result = input
-        .replace(/^tuiIcon/, '')
+        .replace(/["'`]tuiIcon/, '')
         .replace(/Large$/, '')
         .replaceAll(/([A-Z0-9])/g, '-$1')
         .toLowerCase();
@@ -45,5 +53,5 @@ function convertString(input) {
         result = result.replace('-circle', '');
         result = `circle${result}`;
     }
-    return `@tui.${result.startsWith('-') ? result.slice(1) : result}`;
+    return `${input.slice(0, 1)}@tui.${result.startsWith('-') ? result.slice(1) : result}`;
 }

package/schematics/ng-update/v4/migrate-icons/rename-proprietary-icons.d.ts

@@ -0,0 +1,3 @@
+/// <reference lib="es2021" />
+import type { SchematicContext } from '@angular-devkit/schematics';
+export declare function renameProprietaryIcons({ logger }: SchematicContext, pattern?: import("ng-morph").Pattern): void;

package/schematics/ng-update/v4/migrate-icons/rename-proprietary-icons.js

@@ -0,0 +1,79 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.renameProprietaryIcons = void 0;
+const ng_morph_1 = require("ng-morph");
+const constants_1 = require("../../../constants");
+function renameProprietaryIcons({ logger }, pattern = constants_1.ALL_FILES) {
+    const sourceFiles = (0, ng_morph_1.getSourceFiles)(pattern);
+    sourceFiles.forEach((file) => {
+        let text = file.getFullText();
+        const regex = /['"`]tuiIcon(?!Button\b)[A-Z][a-zA-Z0-9]*\b/g;
+        text = text.replaceAll(regex, (icon) => {
+            if (icon.match(/['"`]tuiIcon(?!Tds)\w*/)) {
+                logger.warn(`[WARNING] in ${file.getSourceFile().getFilePath()}: Invalid icon name ${icon}. Please select an icon from the proprietary pack.`);
+                return icon;
+            }
+            return convertString(icon);
+        });
+        const invalidIcons = [...new Set(text.match(/\b(tuiIcon(?!Tds|Button)\w*)\b/g))];
+        if (invalidIcons.length) {
+            const message = `TODO (Taiga UI migration): invalid icons ${invalidIcons.join(', ')}. Please select an icon from the proprietary pack`;
+            const todo = file.getFilePath().endsWith('html')
+                ? `<!-- ${message} -->`
+                : `// ${message}`;
+            text = `${todo}\n${text}`;
+        }
+        file.replaceWithText(text);
+    });
+}
+exports.renameProprietaryIcons = renameProprietaryIcons;
+function convertString(input) {
+    const result = input
+        .replace(/['"`]tuiIconTds/, '')
+        .replace(/SmallPragmatic$/, '')
+        .replace(/MediumPragmatic$/, '')
+        .replace(/Small$/, '')
+        .replace(/Medium$/, '')
+        .replace(/Flags$/, '')
+        .replace(/Service$/, '')
+        .replace(/Logo$/, '')
+        .replace(/LogoSiteheader$/, '')
+        .replace(/LogoSquare$/, '')
+        .replaceAll(/([A-Z0-9])/g, '-$1')
+        .toLowerCase();
+    const pack = extractPackName(input);
+    const subfolder = extractSubfolder(input);
+    return `${input.slice(0, 1)}@tui.${pack}${subfolder ? `.${subfolder}` : ''}.${result.startsWith('-') ? result.slice(1) : result}`;
+}
+function extractPackName(input) {
+    if (input.endsWith('Pragmatic')) {
+        return 'pragmatic';
+    }
+    if (input.endsWith('Service')) {
+        return 'service';
+    }
+    if (input.endsWith('Logo') ||
+        input.endsWith('LogoSquare') ||
+        input.endsWith('LogoSiteheader')) {
+        return 'logo';
+    }
+    if (input.endsWith('Flags')) {
+        return 'flags';
+    }
+    return 'fancy';
+}
+function extractSubfolder(input) {
+    if (input.includes('Medium')) {
+        return 'medium';
+    }
+    if (input.includes('Small')) {
+        return 'small';
+    }
+    if (input.includes('LogoSquare')) {
+        return 'square';
+    }
+    if (input.includes('LogoSiteheader')) {
+        return 'siteheader';
+    }
+    return null;
+}

package/schematics/ng-update/v4/steps/constants/attr-to-directive-replace.js

@@ -41,7 +41,7 @@ exports.ATTRS_TO_DIRECTIVE_REPLACE = [
     },
     {
         componentSelector: ['a', 'button'],
-        filterFn: el => (0, elements_1.hasElementAttribute)(el, 'tuiLink'),
+        filterFn: (el) => (0, elements_1.hasElementAttribute)(el, 'tuiLink'),
         inputProperty: 'iconRotated',
         directive: 'tuiChevron',
         directiveModule: {
@@ -50,13 +50,14 @@ exports.ATTRS_TO_DIRECTIVE_REPLACE = [
         },
     },
     {
-        componentSelector: ['button'],
+        componentSelector: ['button', 'a'],
         inputProperty: 'showLoader',
         directive: 'loading',
         directiveModule: {
-            name: 'TuiButtonLoadingComponent',
+            name: 'TuiButtonLoading',
             moduleSpecifier: '@taiga-ui/kit',
         },
-        filterFn: el => (0, elements_1.hasElementAttribute)(el, 'tuiButton'),
+        filterFn: (el) => (0, elements_1.hasElementAttribute)(el, 'tuiButton') ||
+            (0, elements_1.hasElementAttribute)(el, 'tuiIconButton'),
     },
 ];

package/schematics/ng-update/v4/steps/constants/attr-with-values-to-replace.js

@@ -2,12 +2,61 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ATTR_WITH_VALUES_TO_REPLACE = void 0;
 const elements_1 = require("../../../../utils/templates/elements");
+const hasPseudo = [
+    'button',
+    'a',
+    'tui-checkbox',
+    'tui-checkbox-block',
+    'tui-radio',
+    'tui-radio-block',
+    'tui-radio-labeled',
+    'tui-checkbox-labeled',
+];
 exports.ATTR_WITH_VALUES_TO_REPLACE = [
     {
         attrNames: ['shape'],
         newAttrName: '[style.border-radius.%]',
-        values: [{ from: 'rounded', to: '100' }],
+        valueReplacer: [{ from: 'rounded', to: '100' }],
         withTagNames: ['button'],
-        filterFn: el => (0, elements_1.hasElementAttribute)(el, 'tuiButton'),
+        filterFn: (el) => (0, elements_1.hasElementAttribute)(el, 'tuiButton') ||
+            (0, elements_1.hasElementAttribute)(el, 'tuiIconButton'),
+    },
+    {
+        attrNames: ['tuiMode'],
+        newAttrName: 'tuiTheme',
+        valueReplacer: [
+            { from: 'onDark', to: 'dark' },
+            { from: 'onLight', to: 'light' },
+        ],
+    },
+    {
+        attrNames: ['[pseudoActive]'],
+        newAttrName: '[tuiAppearanceState]',
+        withTagNames: hasPseudo,
+        valueReplacer: (condition) => `${condition} ? 'active' : null`,
+    },
+    {
+        attrNames: ['[pseudoFocus]'],
+        newAttrName: '[tuiAppearanceState]',
+        withTagNames: hasPseudo,
+        valueReplacer: (condition) => `${condition} ? 'focus' : null`,
+    },
+    {
+        attrNames: ['[pseudoHover]'],
+        newAttrName: '[tuiAppearanceState]',
+        withTagNames: hasPseudo,
+        valueReplacer: (condition) => `${condition} ? 'hover' : null`,
+    },
+    {
+        attrNames: ['[pseudoInvalid]'],
+        newAttrName: '[tuiAppearanceState]',
+        withTagNames: hasPseudo,
+        valueReplacer: (condition) => `${condition} ? 'invalid' : null`,
+    },
+    {
+        attrNames: ['[pseudoDisabled]'],
+        newAttrName: '[tuiAppearanceState]',
+        withTagNames: ['tui-radio-block', 'tui-radio-labeled', 'tui-radio'],
+        valueReplacer: (condition) => `${condition} ? 'disabled' : null`,
     },
 ];

package/schematics/ng-update/v4/steps/constants/attrs-to-replace.js

@@ -2,20 +2,35 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ATTRS_TO_REPLACE = void 0;
 const elements_1 = require("../../../../utils/templates/elements");
+const inputs_1 = require("../../../../utils/templates/inputs");
 exports.ATTRS_TO_REPLACE = [
     {
         from: {
             attrName: 'brandLogo',
             withTagNames: ['tui-card', 'tui-thumbnail-card'],
         },
-        to: { attrName: 'iconLeft' },
+        to: { attrName: 'iconStart' },
+    },
+    {
+        from: {
+            attrName: 'src',
+            withTagNames: ['tui-svg'],
+        },
+        to: { attrName: 'icon' },
+    },
+    {
+        from: {
+            attrName: '[src]',
+            withTagNames: ['tui-svg'],
+        },
+        to: { attrName: '[icon]' },
     },
     {
         from: {
             attrName: '[brandLogo]',
             withTagNames: ['tui-card', 'tui-thumbnail-card'],
         },
-        to: { attrName: '[iconLeft]' },
+        to: { attrName: '[iconStart]' },
     },
     {
         from: {
@@ -34,17 +49,24 @@ exports.ATTRS_TO_REPLACE = [
     {
         from: {
             attrName: 'item',
-            withTagNames: ['tui-radio'],
+            withTagNames: ['tui-radio', 'tui-radio-labeled', 'tui-radio-block'],
         },
         to: { attrName: 'value' },
     },
     {
         from: {
             attrName: '[item]',
-            withTagNames: ['tui-radio'],
+            withTagNames: ['tui-radio', 'tui-radio-labeled', 'tui-radio-block'],
         },
         to: { attrName: '[value]' },
     },
+    {
+        from: {
+            attrName: '(removed)',
+            withTagNames: ['tui-file'],
+        },
+        to: { attrName: '(remove)' },
+    },
     {
         from: {
             attrName: '[rounded]',
@@ -59,20 +81,6 @@ exports.ATTRS_TO_REPLACE = [
         },
         to: { attrName: '(waResizeObserver)' },
     },
-    {
-        from: {
-            attrName: 'item',
-            withTagNames: ['tui-radio-labeled'],
-        },
-        to: { attrName: 'value' },
-    },
-    {
-        from: {
-            attrName: '[item]',
-            withTagNames: ['tui-radio-labeled'],
-        },
-        to: { attrName: '[value]' },
-    },
     // Hosted dropdown
     {
         from: {
@@ -156,6 +164,14 @@ exports.ATTRS_TO_REPLACE = [
         },
         to: { attrName: 'appearance' },
     },
+    {
+        from: {
+            attrName: '[mode]',
+            withTagNames: ['tui-marker-icon'],
+            withAttrsNames: ['tuiMarkerIcon'],
+        },
+        to: { attrName: '[appearance]' },
+    },
     {
         from: {
             attrName: 'tuiAction',
@@ -167,36 +183,84 @@ exports.ATTRS_TO_REPLACE = [
     {
         from: {
             attrName: 'icon',
-            withAttrsNames: ['tuiButton'],
+            withAttrsNames: ['tuiButton', 'tuiIconButton'],
         },
-        to: { attrName: 'iconLeft' },
+        to: { attrName: 'iconStart' },
     },
     {
         from: {
             attrName: '[icon]',
-            withAttrsNames: ['tuiButton'],
+            withAttrsNames: ['tuiButton', 'tuiIconButton'],
+        },
+        to: { attrName: '[iconStart]' },
+    },
+    {
+        from: {
+            attrName: 'iconLeft',
+            withAttrsNames: ['tuiButton', 'tuiIconButton'],
+        },
+        to: { attrName: 'iconStart' },
+    },
+    {
+        from: {
+            attrName: '[iconLeft]',
+            withAttrsNames: ['tuiButton', 'tuiIconButton'],
         },
-        to: { attrName: '[iconLeft]' },
+        to: { attrName: '[iconStart]' },
+    },
+    {
+        from: {
+            attrName: 'iconRight',
+            withAttrsNames: ['tuiButton', 'tuiIconButton'],
+        },
+        to: { attrName: 'iconEnd' },
+    },
+    {
+        from: {
+            attrName: '[iconRight]',
+            withAttrsNames: ['tuiButton', 'tuiIconButton'],
+        },
+        to: { attrName: '[iconEnd]' },
     },
     {
         from: {
             attrName: 'icon',
             withAttrsNames: ['tuiLink'],
-            filterFn: element => {
+            filterFn: (element) => {
+                var _a;
+                return !(0, elements_1.hasElementAttribute)(element, 'iconAlign') ||
+                    ((_a = (0, inputs_1.findAttr)(element.attrs, 'iconAlign')) === null || _a === void 0 ? void 0 : _a.value) === 'right';
+            },
+        },
+        to: { attrName: 'iconEnd' },
+    },
+    {
+        from: {
+            attrName: '[icon]',
+            withAttrsNames: ['tuiLink'],
+            filterFn: (element) => {
                 var _a;
                 return !(0, elements_1.hasElementAttribute)(element, 'iconAlign') ||
-                    ((_a = element.attrs.find(attr => attr.name === 'iconalign')) === null || _a === void 0 ? void 0 : _a.value) === 'right';
+                    ((_a = (0, inputs_1.findAttr)(element.attrs, 'iconAlign')) === null || _a === void 0 ? void 0 : _a.value) === 'right';
             },
         },
-        to: { attrName: 'iconRight' },
+        to: { attrName: '[iconEnd]' },
     },
     {
         from: {
             attrName: 'icon',
             withAttrsNames: ['tuiLink'],
-            filterFn: element => { var _a; return ((_a = element.attrs.find(attr => attr.name === 'iconalign')) === null || _a === void 0 ? void 0 : _a.value) === 'left'; },
+            filterFn: (element) => { var _a; return ((_a = (0, inputs_1.findAttr)(element.attrs, 'iconAlign')) === null || _a === void 0 ? void 0 : _a.value) === 'left'; },
         },
-        to: { attrName: 'iconLeft' },
+        to: { attrName: 'iconStart' },
+    },
+    {
+        from: {
+            attrName: '[icon]',
+            withAttrsNames: ['tuiLink'],
+            filterFn: (element) => { var _a; return ((_a = (0, inputs_1.findAttr)(element.attrs, 'iconAlign')) === null || _a === void 0 ? void 0 : _a.value) === 'left'; },
+        },
+        to: { attrName: '[iconStart]' },
     },
     {
         from: {
@@ -205,4 +269,27 @@ exports.ATTRS_TO_REPLACE = [
         },
         to: { attrName: '' },
     },
+    {
+        from: {
+            attrName: 'tuiTextfield',
+            withTagNames: ['input', 'textarea'],
+        },
+        to: { attrName: 'tuiTextfieldLegacy' },
+    },
+    {
+        from: {
+            attrName: 'status',
+            withTagNames: ['tui-notification'],
+            withAttrsNames: ['tuiNotification'],
+        },
+        to: { attrName: 'appearance' },
+    },
+    {
+        from: {
+            attrName: '[status]',
+            withTagNames: ['tui-notification'],
+            withAttrsNames: ['tuiNotification'],
+        },
+        to: { attrName: '[appearance]' },
+    },
 ];

package/schematics/ng-update/v4/steps/constants/enums.js

@@ -12,6 +12,37 @@ exports.ENUMS_TO_REPLACE = [
         },
         keepAsType: true,
     },
+    {
+        name: 'TuiNotification',
+        replaceValues: {
+            Error: 'error',
+            Info: 'info',
+            Success: 'success',
+            Warning: 'warning',
+        },
+        keepAsType: false,
+    },
+    {
+        name: 'TuiCard',
+        replaceValues: {
+            TinkoffAirlines: 't-airlines',
+            TinkoffAirlinesCredit: 't-airlines-credit',
+            TinkoffBlack: 't-black',
+            TinkoffBusiness: 't-business',
+            TinkoffJunior: 't-junior',
+            TinkoffPlatinum: 't-platinum',
+        },
+        keepAsType: true,
+    },
+    {
+        name: 'TuiTimelineStatus',
+        replaceValues: {
+            Completed: 'completed',
+            Declined: 'declined',
+            Normal: 'normal',
+        },
+        keepAsType: false,
+    },
     {
         name: 'TuiCountryIsoCode',
         replaceValues: {

package/schematics/ng-update/v4/steps/constants/html-comments.js

@@ -37,4 +37,23 @@ exports.HTML_COMMENTS = [
         withAttrs: ['[shape]'],
         comment: '[shape] input has been removed. Please use border-radius css property for rounding borders https://taiga-ui.dev/components/button',
     },
+    {
+        tag: '*',
+        withAttrs: ['tuiMode'],
+        comment: 'TuiMode has been removed. Please use tuiTheme attribute to set theme https://taiga-ui.dev/directives/theme',
+    },
+    {
+        tag: 'tui-theme-night',
+        withAttrs: [],
+        comment: 'TuiThemeNight has been removed. Please use tuiTheme attribute to set theme https://taiga-ui.dev/directives/theme',
+    },
+    {
+        tag: 'tui-input-files',
+        withAttrs: [],
+        comment: 'Native input inside is now required and the wrapper has changed from <tui-input-files to <label tuiInputFiles, control moved to native input. See interactive example https://taiga-ui.dev/components/input-files',
+    },
+    {
+        pattern: /\|\s?tuiFormatNumber\s?:/g,
+        comment: 'tuiFormatNumber pipe API has been changed. Learn how to migrate decimalLimit, decimal, zeroPadding: https://github.com/taiga-family/taiga-ui/issues/8335#migration',
+    },
 ];