@taiga-ui/cdk 2.49.1 → 2.49.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@taiga-ui/cdk",
-  "version": "2.49.1",
+  "version": "2.49.2",
   "description": "Base library for creating Angular components and applications using Taiga UI principles regarding of actual visual appearance",
   "keywords": [
     "angular",
@@ -21,6 +21,8 @@
     "@tinkoff/ng-event-plugins": "^2.5.1",
     "@tinkoff/ng-polymorpheus": "^3.1.12",
     "@types/resize-observer-browser": "^0.1.7",
+    "ng-morph": "^2.0.0",
+    "parse5": "^6.0.1",
     "tslib": "^1.10.0"
   },
   "peerDependencies": {

package/schematics/ng-update/constants/templates.js

@@ -71,4 +71,22 @@ exports.ATTR_TO_DIRECTIVE = [
             moduleSpecifier: '@taiga-ui/cdk',
         },
     },
+    {
+        componentSelector: 'tui-input-slider',
+        inputProperty: 'size',
+        directive: 'tuiTextfieldSize',
+        directiveModule: {
+            name: 'TuiTextfieldControllerModule',
+            moduleSpecifier: '@taiga-ui/core',
+        },
+    },
+    {
+        componentSelector: 'tui-input-slider',
+        inputProperty: 'secondary',
+        directive: 'tuiTextfieldCustomContent',
+        directiveModule: {
+            name: 'TuiTextfieldControllerModule',
+            moduleSpecifier: '@taiga-ui/core',
+        },
+    },
 ];

package/schematics/ng-update/steps/migrate-sliders/migrate-input-slider.js

@@ -1,24 +1,69 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-const get_component_templates_1 = require("../../../utils/templates/get-component-templates");
+const ng_morph_1 = require("ng-morph");
 const devkit_file_system_1 = require("ng-morph/project/classes/devkit-file-system");
 const ng_component_input_manipulations_1 = require("../../../utils/templates/ng-component-input-manipulations");
+const ng_component_1 = require("../../../utils/angular/ng-component");
+const add_unique_import_1 = require("../../../utils/add-unique-import");
+const get_component_templates_1 = require("../../../utils/templates/get-component-templates");
+const elements_1 = require("../../../utils/templates/elements");
 function migrateInputSlider(tree) {
     const fileSystem = new devkit_file_system_1.DevkitFileSystem(tree);
     const templateResources = get_component_templates_1.getComponentTemplates('**/**');
     for (const templateResource of templateResources) {
-        ng_component_input_manipulations_1.replaceInputPropertyByDirective({
-            templateResource,
-            fileSystem,
-            componentSelector: 'tui-input-slider',
-            inputProperty: 'secondary',
-            directive: 'tuiTextfieldCustomContent',
-            directiveModule: {
-                name: 'TuiTextfieldControllerModule',
-                moduleSpecifier: '@taiga-ui/core',
-            },
-        });
+        replaceMinMaxLabels(templateResource, fileSystem);
     }
-    fileSystem.commitEdits();
 }
 exports.migrateInputSlider = migrateInputSlider;
+function replaceMinMaxLabels(templateResource, fileSystem) {
+    const wasMaxLabelModified = ng_component_input_manipulations_1.replaceInputProperty({
+        templateResource,
+        fileSystem,
+        componentSelector: 'tui-input-slider',
+        from: 'maxLabel',
+        to: '[valueContent]',
+        newValue: 'tuiMigrationMinMaxLabel',
+    });
+    const wasMinLabelModified = ng_component_input_manipulations_1.replaceInputProperty({
+        templateResource,
+        fileSystem,
+        componentSelector: 'tui-input-slider',
+        from: 'minLabel',
+        to: '[valueContent]',
+        newValue: 'tuiMigrationMinMaxLabel',
+        filterFn: element => !elements_1.hasElementAttribute(element, 'maxLabel'),
+    });
+    ng_component_input_manipulations_1.removeInputProperty({
+        templateResource,
+        fileSystem,
+        componentSelector: 'tui-input-slider',
+        inputProperty: 'minLabel',
+        filterFn: element => elements_1.hasElementAttribute(element, 'maxLabel'),
+    });
+    /**
+     * We should update virtual file tree
+     * otherwise all following ng-morph commands will overwrite all previous template manipulations
+     * */
+    fileSystem.commitEdits();
+    ng_morph_1.saveActiveProject();
+    ng_morph_1.setActiveProject(ng_morph_1.createProject(fileSystem.tree, '/', '**/**'));
+    const [ngComponent] = ng_component_1.getNgComponents(templateResource.componentPath);
+    if ((wasMaxLabelModified || wasMinLabelModified) && ngComponent) {
+        add_unique_import_1.addUniqueImport(templateResource.componentPath, 'TuiContextWithImplicit', '@taiga-ui/cdk');
+        ng_morph_1.addMethods(ngComponent, {
+            name: 'tuiMigrationMinMaxLabel',
+            returnType: 'string',
+            parameters: [{ name: 'context', type: 'TuiContextWithImplicit<number>' }],
+            statements: [
+                'const currentValue = context.$implicit;',
+                'const maxValue = 100; // TODO replace with the MAX value of the input',
+                'const maxLabelText = "Max"; // TODO replace with the required label',
+                'const minValue = 0; // TODO replace with the MIN value of the input',
+                'const minLabelText = "Min"; // TODO replace with the required label',
+                'if (currentValue === maxValue) return maxLabelText;',
+                'if (currentValue === minValue) return minLabelText;',
+                'return String(currentValue);',
+            ],
+        });
+    }
+}

package/schematics/ng-update/steps/migrate-templates.js

@@ -6,6 +6,7 @@ const elements_1 = require("../../utils/templates/elements");
 const devkit_file_system_1 = require("ng-morph/project/classes/devkit-file-system");
 const ng_component_input_manipulations_1 = require("../../utils/templates/ng-component-input-manipulations");
 const template_resource_1 = require("../../utils/templates/template-resource");
+const ng_morph_1 = require("ng-morph");
 const START_TAG_OFFSET = 1;
 const END_TAG_OFFSET = 2;
 function migrateTemplates(tree) {
@@ -19,7 +20,13 @@ function migrateTemplates(tree) {
         replaceTags(template, recorder, offset);
         replaceAttrs(template, recorder, offset);
         replaceAttrsByDirective(fileSystem, resource);
+        /**
+         * We should update virtual file tree
+         * otherwise all following ng-morph commands will overwrite all previous template manipulations
+         * */
         fileSystem.commitEdits();
+        ng_morph_1.saveActiveProject();
+        ng_morph_1.setActiveProject(ng_morph_1.createProject(fileSystem.tree, '/', '**/**'));
     });
 }
 exports.migrateTemplates = migrateTemplates;

package/schematics/utils/templates/elements.d.ts

@@ -9,11 +9,13 @@ export declare function findElementsWithAttribute(html: string, attributeName: s
  * Finds elements with explicit tag names that also contain the specified attribute. Returns the
  * attribute start offset based on the specified HTML.
  */
-export declare function findAttributeOnElementWithTag(html: string, name: string, tagNames: string[]): number[];
+export declare function findAttributeOnElementWithTag(html: string, name: string, tagNames: string[], filterFn?: (element: Element) => boolean): number[];
 /**
  * Finds elements that contain the given attribute and contain at least one of the other
  * specified attributes. Returns the primary attribute's start offset based on the specified HTML.
  */
-export declare function findAttributeOnElementWithAttrs(html: string, name: string, attrs: string[]): number[];
+export declare function findAttributeOnElementWithAttrs(html: string, name: string, attrs: string[], filterFn?: (element: Element) => boolean): number[];
+/** Shorthand function that checks if the specified element contains the given attribute. */
+export declare function hasElementAttribute(element: Element, attributeName: string): boolean;
 /** Gets the start offset of the given attribute from a Parse5 element. */
 export declare function getStartOffsetOfAttribute(element: Element, attributeName: string): number;

package/schematics/utils/templates/elements.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const parse5_1 = require("parse5");
+const ALWAYS_TRUE_HANDLER = () => true;
 function findElementsByTagName(html, tagName) {
     const document = parse5_1.parseFragment(html, { sourceCodeLocationInfo: true });
     const elements = [];
@@ -46,9 +47,9 @@ exports.findElementsWithAttribute = findElementsWithAttribute;
  * Finds elements with explicit tag names that also contain the specified attribute. Returns the
  * attribute start offset based on the specified HTML.
  */
-function findAttributeOnElementWithTag(html, name, tagNames) {
+function findAttributeOnElementWithTag(html, name, tagNames, filterFn = ALWAYS_TRUE_HANDLER) {
     return findElementsWithAttribute(html, name)
-        .filter(element => tagNames.includes(element.tagName))
+        .filter(element => tagNames.includes(element.tagName) && filterFn(element))
         .map(element => getStartOffsetOfAttribute(element, name));
 }
 exports.findAttributeOnElementWithTag = findAttributeOnElementWithTag;
@@ -56,9 +57,10 @@ exports.findAttributeOnElementWithTag = findAttributeOnElementWithTag;
  * Finds elements that contain the given attribute and contain at least one of the other
  * specified attributes. Returns the primary attribute's start offset based on the specified HTML.
  */
-function findAttributeOnElementWithAttrs(html, name, attrs) {
+function findAttributeOnElementWithAttrs(html, name, attrs, filterFn = ALWAYS_TRUE_HANDLER) {
     return findElementsWithAttribute(html, name)
-        .filter(element => attrs.some(attr => hasElementAttribute(element, attr)))
+        .filter(element => attrs.some(attr => hasElementAttribute(element, attr)) &&
+        filterFn(element))
         .map(element => getStartOffsetOfAttribute(element, name));
 }
 exports.findAttributeOnElementWithAttrs = findAttributeOnElementWithAttrs;
@@ -67,6 +69,7 @@ function hasElementAttribute(element, attributeName) {
     return (element.attrs &&
         element.attrs.some(attr => attr.name === attributeName.toLowerCase()));
 }
+exports.hasElementAttribute = hasElementAttribute;
 /** Gets the start offset of the given attribute from a Parse5 element. */
 function getStartOffsetOfAttribute(element, attributeName) {
     var _a, _b;

package/schematics/utils/templates/ng-component-input-manipulations.d.ts

@@ -1,4 +1,5 @@
 import { DevkitFileSystem } from 'ng-morph/project/classes/devkit-file-system';
+import { Element } from 'parse5';
 import { TemplateResource } from '../../ng-update/interfaces/template-resourse';
 /**
  * Replace component input property by new value
@@ -25,13 +26,31 @@ import { TemplateResource } from '../../ng-update/interfaces/template-resourse';
  * ___
  * @return true if something was changed
  */
-export declare function replaceInputProperty({ templateResource, fileSystem, componentSelector, from, to, }: {
+export declare function replaceInputProperty({ templateResource, fileSystem, componentSelector, from, to, newValue, filterFn, }: {
     templateResource: TemplateResource;
     fileSystem: DevkitFileSystem;
     componentSelector: string | string[];
     from: string;
     to: string;
+    newValue?: string;
+    filterFn?: (element: Element) => boolean;
 }): boolean;
+/**
+ * @example
+ * // 10 symbols before property `size` and string `size="s"` has 8-symbols length
+ * const template = '<tui-card size="s"></tui-card>';
+ *
+ * getInputPropertyOffsets(template, 'size', ['tui-card']) // [[10, 18]]
+ */
+export declare function getInputPropertyOffsets(html: string, attrName: string, tags: string[], filterFn?: (element: Element) => boolean): [number, number][];
+/**
+ * @example
+ * // `<tui-card size="` has 16-symbols length
+ * const template = '<tui-card size="xl"></tui-card>';
+ *
+ * getInputPropertyValueOffsets(template, 'size', ['tui-card']) // [ [16, 18] ]
+ */
+export declare function getInputPropertyValueOffsets(template: string, attrName: string, tags: string[]): [number, number][];
 export declare function replaceInputPropertyByDirective({ templateResource, fileSystem, componentSelector, inputProperty, directive, directiveModule, }: {
     templateResource: TemplateResource;
     fileSystem: DevkitFileSystem;
@@ -43,3 +62,15 @@ export declare function replaceInputPropertyByDirective({ templateResource, file
         moduleSpecifier: string;
     };
 }): void;
+/**
+ * After removing property from the tag (which uses multi lines inside template) it can leave redundant space.
+ * It is not critical because html is valid even with this extra space.
+ * TODO: Find a way to fix it
+ */
+export declare function removeInputProperty({ templateResource, fileSystem, componentSelector, inputProperty, filterFn, }: {
+    templateResource: TemplateResource;
+    fileSystem: DevkitFileSystem;
+    componentSelector: string;
+    inputProperty: string;
+    filterFn?: (element: Element) => boolean;
+}): void;

package/schematics/utils/templates/ng-component-input-manipulations.js

@@ -31,7 +31,7 @@ const elements_1 = require("./elements");
  * ___
  * @return true if something was changed
  */
-function replaceInputProperty({ templateResource, fileSystem, componentSelector, from, to, }) {
+function replaceInputProperty({ templateResource, fileSystem, componentSelector, from, to, newValue = '', filterFn, }) {
     const template = template_resource_1.getTemplateFromTemplateResource(templateResource, fileSystem);
     const path = fileSystem.resolve(template_resource_1.getPathFromTemplateResource(templateResource));
     const recorder = fileSystem.edit(path);
@@ -40,27 +40,67 @@ function replaceInputProperty({ templateResource, fileSystem, componentSelector,
         ? componentSelector
         : [componentSelector];
     const stringProperties = [
-        ...elements_1.findAttributeOnElementWithTag(template, from, selector),
-        ...elements_1.findAttributeOnElementWithAttrs(template, from, selector),
-    ];
+        ...elements_1.findAttributeOnElementWithTag(template, from, selector, filterFn),
+        ...elements_1.findAttributeOnElementWithAttrs(template, from, selector, filterFn),
+    ].map(offset => templateOffset + offset);
     const propertyBindings = [
-        ...elements_1.findAttributeOnElementWithTag(template, `[${from}]`, selector),
-        ...elements_1.findAttributeOnElementWithAttrs(template, `[${from}]`, selector),
-    ];
+        ...elements_1.findAttributeOnElementWithTag(template, `[${from}]`, selector, filterFn),
+        ...elements_1.findAttributeOnElementWithAttrs(template, `[${from}]`, selector, filterFn),
+    ].map(offset => templateOffset + offset);
+    const propertyValues = newValue
+        ? getInputPropertyValueOffsets(template, from, selector).map(([start, end]) => [
+            templateOffset + start,
+            templateOffset + end,
+        ])
+        : [];
     if (!stringProperties.length && !propertyBindings.length) {
         return false;
     }
     stringProperties.forEach(offset => {
-        recorder.remove(offset + templateOffset, from.length);
-        recorder.insertRight(offset + templateOffset, to);
+        recorder.remove(offset, from.length);
+        recorder.insertRight(offset, to);
     });
     propertyBindings.forEach(offset => {
-        recorder.remove(offset + templateOffset, `[${from}]`.length);
-        recorder.insertRight(offset + templateOffset, `[${to}]`);
+        recorder.remove(offset, `[${from}]`.length);
+        recorder.insertRight(offset, to.startsWith('[') ? to : `[${to}]`);
+    });
+    propertyValues.forEach(([startOffset, endOffset]) => {
+        recorder.remove(startOffset, endOffset - startOffset);
+        recorder.insertRight(startOffset, newValue);
     });
     return true;
 }
 exports.replaceInputProperty = replaceInputProperty;
+/**
+ * @example
+ * // 10 symbols before property `size` and string `size="s"` has 8-symbols length
+ * const template = '<tui-card size="s"></tui-card>';
+ *
+ * getInputPropertyOffsets(template, 'size', ['tui-card']) // [[10, 18]]
+ */
+function getInputPropertyOffsets(html, attrName, tags, filterFn = () => true) {
+    return elements_1.findElementsWithAttribute(html, attrName)
+        .filter(element => tags.includes(element.tagName) && filterFn(element))
+        .map((element) => {
+        var _a, _b;
+        const { startOffset = 0, endOffset = 0 } = ((_b = (_a = element.sourceCodeLocation) === null || _a === void 0 ? void 0 : _a.attrs) === null || _b === void 0 ? void 0 : _b[attrName.toLowerCase()]) || {};
+        return [startOffset, endOffset];
+    });
+}
+exports.getInputPropertyOffsets = getInputPropertyOffsets;
+/**
+ * @example
+ * // `<tui-card size="` has 16-symbols length
+ * const template = '<tui-card size="xl"></tui-card>';
+ *
+ * getInputPropertyValueOffsets(template, 'size', ['tui-card']) // [ [16, 18] ]
+ */
+function getInputPropertyValueOffsets(template, attrName, tags) {
+    const stringProperties = getInputPropertyOffsets(template, attrName, tags).map(([start, end]) => [start + attrName.length + '="'.length, end - 1]);
+    const propertyBindings = getInputPropertyOffsets(template, `[${attrName}]`, tags).map(([start, end]) => [start + `[${attrName}]`.length + '="'.length, end - 1]);
+    return [...stringProperties, ...propertyBindings];
+}
+exports.getInputPropertyValueOffsets = getInputPropertyValueOffsets;
 function replaceInputPropertyByDirective({ templateResource, fileSystem, componentSelector, inputProperty, directive, directiveModule, }) {
     const wasModified = replaceInputProperty({
         templateResource,
@@ -81,3 +121,22 @@ function replaceInputPropertyByDirective({ templateResource, fileSystem, compone
     }
 }
 exports.replaceInputPropertyByDirective = replaceInputPropertyByDirective;
+/**
+ * After removing property from the tag (which uses multi lines inside template) it can leave redundant space.
+ * It is not critical because html is valid even with this extra space.
+ * TODO: Find a way to fix it
+ */
+function removeInputProperty({ templateResource, fileSystem, componentSelector, inputProperty, filterFn, }) {
+    const template = template_resource_1.getTemplateFromTemplateResource(templateResource, fileSystem);
+    const templateOffset = template_resource_1.getTemplateOffset(templateResource);
+    const path = fileSystem.resolve(template_resource_1.getPathFromTemplateResource(templateResource));
+    const recorder = fileSystem.edit(path);
+    const propertyOffsets = [
+        ...getInputPropertyOffsets(template, inputProperty, [componentSelector], filterFn),
+        ...getInputPropertyOffsets(template, `[${inputProperty}]`, [componentSelector], filterFn),
+    ].map(([start, end]) => [templateOffset + start, templateOffset + end]);
+    propertyOffsets.forEach(([start, end]) => {
+        recorder.remove(start, end - start);
+    });
+}
+exports.removeInputProperty = removeInputProperty;