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

package/schematics/ng-update/v4/migrate-css-vars/palette.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.DEPRECATE_VARS_WITH_COMMENT = exports.NIGHT_VAR_COMMENT = exports.DEPRECATED_VARS = void 0;
+exports.DEPRECATE_VARS_WITH_COMMENT = exports.NIGHT_VAR_COMMENT = exports.DEPRECATED_NUMERIC_VARS = exports.DEPRECATED_VARS = void 0;
 exports.DEPRECATED_VARS = {
     '--tui-font-text-l-2': '--tui-font-text-ui-l',
     '--tui-font-text-m-2': '--tui-font-text-ui-m',
@@ -26,7 +26,7 @@ exports.DEPRECATED_VARS = {
     '--tui-accent-hover': '--tui-background-accent-2-hover',
     '--tui-accent-active': '--tui-background-accent-2-pressed',
     '--tui-accent-text': '--tui-text-primary-on-accent-2',
-    '--tui-selection': '--tui-service-selected-text',
+    '--tui-selection': '--tui-service-selection-background',
     '--tui-focus': '--tui-border-focus',
     '--tui-clear': '--tui-background-neutral-1',
     '--tui-clear-disabled': '--tui-background-neutral-1',
@@ -54,12 +54,10 @@ exports.DEPRECATED_VARS = {
     '--tui-text-03': '--tui-text-tertiary',
     '--tui-link': '--tui-text-action',
     '--tui-link-hover': '--tui-text-action-hover',
-    '--tui-positive': '--tui-status-positive',
-    '--tui-positive-hover': '--tui-status-positive',
-    '--tui-negative': '--tui-status-negative',
-    '--tui-negative-hover': '--tui-status-negative',
-    '--tui-support-': '--tui-chart-categorical-',
-    '--tui-chart-': '--tui-chart-categorical-0',
+    '--tui-positive': '--tui-text-positive',
+    '--tui-positive-hover': '--tui-text-positive-hover',
+    '--tui-negative': '--tui-text-negative',
+    '--tui-negative-hover': '--tui-text-negative-hover',
     '--tui-clear-inverse': '--tui-background-neutral-1',
     '--tui-clear-inverse-hover': '--tui-background-neutral-1-hover',
     '--tui-clear-inverse-active': '--tui-background-neutral-1-pressed',
@@ -87,6 +85,18 @@ exports.DEPRECATED_VARS = {
     '--tui-positive-night-hover': '--tui-status-positive',
     '--tui-negative-night': '--tui-status-negative',
     '--tui-negative-night-hover': '--tui-status-negative',
+    '--tui-shadow': 'var(--tui-shadow-small)',
+    '--tui-shadow-hover': 'var(--tui-shadow-small-hover)',
+    '--tui-shadow-dropdown': 'var(--tui-shadow-medium)',
+    '--tui-shadow-modal': 'var(--tui-shadow-popup)',
+    '--tui-shadow-sidebar': 'var(--tui-shadow-medium)',
+    '--tui-shadow-navigation': 'var(--tui-shadow-small)',
+    '--tui-shadow-sheet': 'var(--tui-shadow-popup)',
+};
+// warning: order is important
+exports.DEPRECATED_NUMERIC_VARS = {
+    '--tui-chart-': '--tui-chart-categorical-0',
+    '--tui-support-': '--tui-chart-categorical-',
 };
 exports.NIGHT_VAR_COMMENT = 'TODO: use tuiTheme="dark" on an element to switch colors to dark theme';
 exports.DEPRECATE_VARS_WITH_COMMENT = [

package/schematics/ng-update/v4/migrate-css-vars/rename-css-vars.js

@@ -7,11 +7,11 @@ const constants_1 = require("../../../constants");
 const palette_1 = require("./palette");
 function renameCssVars(pattern = constants_1.ALL_FILES) {
     const sourceFiles = (0, ng_morph_1.getSourceFiles)(pattern);
-    sourceFiles.forEach(file => {
+    sourceFiles.forEach((file) => {
         let text = file.getFullText();
         // leave comments
         if (!file.getFilePath().endsWith('html')) {
-            palette_1.DEPRECATE_VARS_WITH_COMMENT.forEach(variable => {
+            palette_1.DEPRECATE_VARS_WITH_COMMENT.forEach((variable) => {
                 const wordRegex = new RegExp(`(^|\\n)(?=[^\\n]*\\b${variable}\\b)`, 'g');
                 text = text.replaceAll(wordRegex, `$1// ${palette_1.NIGHT_VAR_COMMENT}\n`);
             });
@@ -25,6 +25,14 @@ function renameCssVars(pattern = constants_1.ALL_FILES) {
             .forEach(({ from, to }) => {
             text = text.replaceAll(from, to);
         });
+        Object.entries(palette_1.DEPRECATED_NUMERIC_VARS)
+            .map(([from, to]) => ({
+            from: new RegExp(`${from}`, 'g'),
+            to,
+        }))
+            .forEach(({ from, to }) => {
+            text = text.replaceAll(from, to);
+        });
         file.replaceWithText(text);
     });
 }

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

@@ -6,17 +6,19 @@ const ng_morph_1 = require("ng-morph");
 const colored_log_1 = require("../../../utils/colored-log");
 const get_file_system_1 = require("../../utils/get-file-system");
 const rename_icons_1 = require("./rename-icons");
+const rename_proprietary_icons_1 = require("./rename-proprietary-icons");
 function migrateIcons(options) {
     return (0, schematics_1.chain)([
         (tree, _) => {
-            if (hasProprietaryIcons(tree)) {
-                // TODO: add proprietary-icons migration
-                return;
-            }
             const fileSystem = (0, get_file_system_1.getFileSystem)(tree);
             !options['skip-logs'] &&
-                (0, colored_log_1.infoLog)(`${colored_log_1.SMALL_TAB_SYMBOL}${colored_log_1.REPLACE_SYMBOL} replacing strings...`);
-            (0, rename_icons_1.renameIcons)();
+                (0, colored_log_1.infoLog)(`${colored_log_1.SMALL_TAB_SYMBOL}${colored_log_1.REPLACE_SYMBOL} replacing icons...`);
+            if (hasProprietaryIcons(tree)) {
+                (0, rename_proprietary_icons_1.renameProprietaryIcons)();
+            }
+            else {
+                (0, rename_icons_1.renameIcons)();
+            }
             fileSystem.commitEdits();
             (0, ng_morph_1.saveActiveProject)();
             !options['skip-logs'] &&

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

@@ -20,7 +20,7 @@ const CHANGED_ICONS = [
 ];
 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'),
@@ -29,7 +29,7 @@ function renameIcons(pattern = constants_1.ALL_FILES) {
             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));
+        text = text.replaceAll(regex, (match) => convertString(match));
         file.replaceWithText(text);
     });
 }

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

@@ -0,0 +1,2 @@
+/// <reference lib="es2021" />
+export declare function renameProprietaryIcons(pattern?: import("ng-morph").Pattern): void;

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

@@ -0,0 +1,66 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.renameProprietaryIcons = void 0;
+/// <reference lib="es2021" />
+const ng_morph_1 = require("ng-morph");
+const constants_1 = require("../../../constants");
+function renameProprietaryIcons(pattern = constants_1.ALL_FILES) {
+    const sourceFiles = (0, ng_morph_1.getSourceFiles)(pattern);
+    sourceFiles.forEach((file) => {
+        let text = file.getFullText();
+        const regex = /\btuiIcon(?!Button\b)[A-Z][a-zA-Z0-9]*\b/g;
+        text = text.replaceAll(regex, (match) => convertString(match));
+        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 `@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: {
@@ -54,9 +54,9 @@ exports.ATTRS_TO_DIRECTIVE_REPLACE = [
         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'),
     },
 ];

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

@@ -8,6 +8,14 @@ exports.ATTR_WITH_VALUES_TO_REPLACE = [
         newAttrName: '[style.border-radius.%]',
         values: [{ from: 'rounded', to: '100' }],
         withTagNames: ['button'],
-        filterFn: el => (0, elements_1.hasElementAttribute)(el, 'tuiButton'),
+        filterFn: (el) => (0, elements_1.hasElementAttribute)(el, 'tuiButton'),
+    },
+    {
+        attrNames: ['tuiMode'],
+        newAttrName: 'tuiTheme',
+        values: [
+            { from: 'onDark', to: 'dark' },
+            { from: 'onLight', to: 'light' },
+        ],
     },
 ];

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

@@ -8,14 +8,14 @@ exports.ATTRS_TO_REPLACE = [
             attrName: 'brandLogo',
             withTagNames: ['tui-card', 'tui-thumbnail-card'],
         },
-        to: { attrName: 'iconLeft' },
+        to: { attrName: 'iconStart' },
     },
     {
         from: {
             attrName: '[brandLogo]',
             withTagNames: ['tui-card', 'tui-thumbnail-card'],
         },
-        to: { attrName: '[iconLeft]' },
+        to: { attrName: '[iconStart]' },
     },
     {
         from: {
@@ -169,34 +169,35 @@ exports.ATTRS_TO_REPLACE = [
             attrName: 'icon',
             withAttrsNames: ['tuiButton'],
         },
-        to: { attrName: 'iconLeft' },
+        to: { attrName: 'iconStart' },
     },
     {
         from: {
             attrName: '[icon]',
             withAttrsNames: ['tuiButton'],
         },
-        to: { attrName: '[iconLeft]' },
+        to: { attrName: '[iconStart]' },
     },
     {
         from: {
             attrName: 'icon',
             withAttrsNames: ['tuiLink'],
-            filterFn: element => {
+            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 = element.attrs.find((attr) => attr.name === '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 = element.attrs.find((attr) => attr.name === 'iconalign')) === null || _a === void 0 ? void 0 : _a.value) === 'left'; },
         },
-        to: { attrName: 'iconLeft' },
+        to: { attrName: 'iconStart' },
     },
     {
         from: {

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,14 @@ 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',
+    },
 ];