@koobiq/components 18.20.0 → 18.22.0

package/radio/radio.component.d.ts

@@ -2,7 +2,7 @@ import { FocusMonitor } from '@angular/cdk/a11y';
 import { UniqueSelectionDispatcher } from '@angular/cdk/collections';
 import { AfterContentInit, AfterViewInit, ChangeDetectorRef, ElementRef, EventEmitter, OnDestroy, OnInit, QueryList } from '@angular/core';
 import { ControlValueAccessor } from '@angular/forms';
-import { CanColor, CanColorCtor, CanDisable, CanDisableCtor, HasTabIndex, HasTabIndexCtor } from '@koobiq/components/core';
+import { KbqColorDirective } from '@koobiq/components/core';
 import * as i0 from "@angular/core";
 /** Change event object emitted by KbqRadio. */
 export declare class KbqRadioChange {
@@ -16,20 +16,13 @@ export declare class KbqRadioChange {
     /** The value of the KbqRadioButton. */
     value: any);
 }
-/** @docs-private */
-export declare class KbqRadioGroupBase {
-    elementRef: ElementRef;
-    constructor(elementRef: ElementRef);
-}
-/** @docs-private */
-export declare const KbqRadioGroupMixinBase: CanDisableCtor & typeof KbqRadioGroupBase;
 /**
  * Provider Expression that allows kbq-radio-group to register as a ControlValueAccessor. This
  * allows it to support [(ngModel)] and ngControl.
  * @docs-private
  */
 export declare const KBQ_RADIO_GROUP_CONTROL_VALUE_ACCESSOR: any;
-export declare class KbqRadioGroup extends KbqRadioGroupMixinBase implements AfterContentInit, ControlValueAccessor, CanDisable {
+export declare class KbqRadioGroup implements AfterContentInit, ControlValueAccessor {
     private readonly changeDetector;
     big: boolean;
     /** Name of the radio button group. All radio buttons inside this group will use this name. */
@@ -47,7 +40,6 @@ export declare class KbqRadioGroup extends KbqRadioGroupMixinBase implements Aft
     /** Whether the radio group is disabled */
     get disabled(): boolean;
     set disabled(value: boolean);
-    /** Whether the radio group is disabled. */
     private _disabled;
     /** Whether the radio group is required */
     get required(): boolean;
@@ -77,7 +69,7 @@ export declare class KbqRadioGroup extends KbqRadioGroupMixinBase implements Aft
     private isInitialized;
     /** Whether the labels should appear after or before the radio-buttons. Defaults to 'after' */
     private _labelPosition;
-    constructor(elementRef: ElementRef, changeDetector: ChangeDetectorRef);
+    constructor(changeDetector: ChangeDetectorRef);
     /** The method to be called in order to update ngModel */
     controlValueAccessorChangeFn: (value: any) => void;
     /**
@@ -128,15 +120,7 @@ export declare class KbqRadioGroup extends KbqRadioGroupMixinBase implements Aft
     static ngAcceptInputType_disabled: unknown;
     static ngAcceptInputType_required: unknown;
 }
-/** @docs-private */
-declare abstract class KbqRadioButtonBase {
-    elementRef: ElementRef;
-    abstract disabled: boolean;
-    constructor(elementRef: ElementRef);
-}
-/** @docs-private */
-export declare const KbqRadioButtonMixinBase: CanColorCtor & HasTabIndexCtor & typeof KbqRadioButtonBase;
-export declare class KbqRadioButton extends KbqRadioButtonMixinBase implements OnInit, AfterViewInit, OnDestroy, CanColor, HasTabIndex {
+export declare class KbqRadioButton extends KbqColorDirective implements OnInit, AfterViewInit, OnDestroy {
     private readonly changeDetector;
     private focusMonitor;
     private readonly radioDispatcher;
@@ -149,8 +133,10 @@ export declare class KbqRadioButton extends KbqRadioButtonMixinBase implements O
     /** Whether the radio button is disabled. */
     get disabled(): boolean;
     set disabled(value: boolean);
-    /** Whether this radio is disabled. */
     private _disabled;
+    get tabIndex(): number;
+    set tabIndex(value: number);
+    private _tabIndex;
     /** Whether the radio button is required. */
     get required(): boolean;
     set required(value: boolean);
@@ -182,7 +168,7 @@ export declare class KbqRadioButton extends KbqRadioButtonMixinBase implements O
     private _checked;
     /** Value assigned to this radio. */
     private _value;
-    constructor(radioGroup: KbqRadioGroup, elementRef: ElementRef, changeDetector: ChangeDetectorRef, focusMonitor: FocusMonitor, radioDispatcher: UniqueSelectionDispatcher);
+    constructor(radioGroup: KbqRadioGroup, changeDetector: ChangeDetectorRef, focusMonitor: FocusMonitor, radioDispatcher: UniqueSelectionDispatcher);
     ngOnInit(): void;
     ngAfterViewInit(): void;
     ngOnDestroy(): void;
@@ -200,10 +186,10 @@ export declare class KbqRadioButton extends KbqRadioButtonMixinBase implements O
     private readonly removeUniqueSelectionListener;
     /** Dispatch change event with current value. */
     private emitChangeEvent;
-    static ɵfac: i0.ɵɵFactoryDeclaration<KbqRadioButton, [{ optional: true; }, null, null, null, null]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<KbqRadioButton, "kbq-radio-button", ["kbqRadioButton"], { "color": { "alias": "color"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; "checked": { "alias": "checked"; "required": false; }; "value": { "alias": "value"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "required": { "alias": "required"; "required": false; }; "labelPosition": { "alias": "labelPosition"; "required": false; }; "name": { "alias": "name"; "required": false; }; "isFocused": { "alias": "isFocused"; "required": false; }; "id": { "alias": "id"; "required": false; }; }, { "change": "change"; }, never, ["*", "kbq-hint"], false, never>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqRadioButton, [{ optional: true; }, null, null, null]>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqRadioButton, "kbq-radio-button", ["kbqRadioButton"], { "checked": { "alias": "checked"; "required": false; }; "value": { "alias": "value"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; "required": { "alias": "required"; "required": false; }; "labelPosition": { "alias": "labelPosition"; "required": false; }; "name": { "alias": "name"; "required": false; }; "isFocused": { "alias": "isFocused"; "required": false; }; "id": { "alias": "id"; "required": false; }; }, { "change": "change"; }, never, ["*", "kbq-hint"], false, never>;
     static ngAcceptInputType_checked: unknown;
     static ngAcceptInputType_disabled: unknown;
+    static ngAcceptInputType_tabIndex: unknown;
     static ngAcceptInputType_required: unknown;
 }
-export {};

package/schematics/collection.json

@@ -21,6 +21,16 @@
             "description": "Updates prefixes and names of changed/removed icons",
             "factory": "./migrations/deprecated-icons/index",
             "schema": "./migrations/deprecated-icons/schema.json"
+        },
+        "empty-state-size-attr": {
+            "description": "Updates attr name and value in ts and html",
+            "factory": "./migrations/empty-state-size-attr/index",
+            "schema": "./migrations/empty-state-size-attr/schema.json"
+        },
+        "loader-overlay-size-attr": {
+            "description": "Updates attr name and value in ts and html",
+            "factory": "./migrations/loader-overlay-size-attr/index",
+            "schema": "./migrations/loader-overlay-size-attr/schema.json"
         }
     }
 }

package/schematics/migrations/css-selectors/README.md

@@ -0,0 +1,19 @@
+### New Icons Pack schematics
+
+This schematic provides migration for css-selectors of typography. It includes:
+
+-   Update css-classes for updated typography styles according to [mapping](data.ts)
+
+[Params](schema.ts)
+
+Usage for Angular Cli:
+
+```shell
+ng g @koobiq/components:css-selectors --fix=true --project <your project>
+```
+
+Usage for Nx:
+
+```shell
+nx g @koobiq/components:css-selectors --fix=true --project <your project>
+```

package/schematics/migrations/deprecated-icons/README.md

@@ -0,0 +1,21 @@
+### New Icons Pack schematics
+
+This schematic provides migration for update icons pack. It includes:
+
+-   Change prefixes from `mc` to `kbq` for ts, html, styles
+-   Update icon names for updated/removed icons according to [mapping](data.ts)
+-   Fix icons package prefix in styles
+
+[Params](schema.ts)
+
+Usage for Angular Cli:
+
+```shell
+ng g @koobiq/components:deprecated-icons --fix=true --project <your project>
+```
+
+Usage for Nx:
+
+```shell
+nx g @koobiq/components:deprecated-icons --fix=true --project <your project>
+```

package/schematics/migrations/empty-state-size-attr/README.md

@@ -0,0 +1,62 @@
+### Empty State Size Attr schematics
+
+This schematic provides migration for `KbqEmptyState` new `size` attribute. It includes:
+
+-   Removal of `big` attribute usage
+-   Replacement with `size` attribute
+
+[Params](schema.ts)
+
+Usage for Angular Cli:
+
+```shell
+ng g @koobiq/components:empty-state-size-attr --project <your project>
+```
+
+Usage for Nx:
+
+```shell
+nx g @koobiq/components:empty-state-size-attr --project <your project>
+```
+
+### Run locally
+
+Build package
+
+```shell
+yarn run build:schematics
+```
+
+Run command (for example, `koobiq-docs project`)
+
+```shell
+ng g ./dist/components/schematics/collection.json:empty-state-size-attr --project koobiq-docs
+```
+
+### Result
+
+#### Before
+
+```ts
+import { Component } from '@angular/core';
+
+@Component({
+    template: `
+        <kbq-empty-state [big]="true">...</kbq-empty-state>
+    `
+})
+export class MyComp {}
+```
+
+#### After
+
+```ts
+import { Component } from '@angular/core';
+
+@Component({
+    template: `
+        <kbq-empty-state size="big">...</kbq-empty-state>
+    `
+})
+export class MyComp {}
+```

package/schematics/migrations/empty-state-size-attr/index.js

@@ -0,0 +1,74 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var node_path = require('node:path');
+var process = require('node:process');
+var ts = require('typescript');
+var utils_angularParsing = require('../../utils/angular-parsing.js');
+var utils_packageConfig = require('../../utils/package-config.js');
+var utils_typescript = require('../../utils/typescript.js');
+require('path');
+require('../../utils/ast.js');
+require('@angular-devkit/schematics');
+require('@schematics/angular/utility');
+require('../../utils/messages.js');
+
+function _interopNamespaceDefault(e) {
+    var n = Object.create(null);
+    if (e) {
+        Object.keys(e).forEach(function (k) {
+            if (k !== 'default') {
+                var d = Object.getOwnPropertyDescriptor(e, k);
+                Object.defineProperty(n, k, d.get ? d : {
+                    enumerable: true,
+                    get: function () { return e[k]; }
+                });
+            }
+        });
+    }
+    n.default = e;
+    return Object.freeze(n);
+}
+
+var process__namespace = /*#__PURE__*/_interopNamespaceDefault(process);
+
+const migrationData = {
+    elementName: 'kbq-empty-state',
+    attrs: {
+        key: {
+            from: 'big',
+            to: 'size'
+        },
+        value: {
+            replacements: [
+                { from: 'true', to: 'big' },
+                { from: 'false', to: 'compact' }
+            ],
+            default: 'normal'
+        }
+    }
+};
+function migrate(options) {
+    return async (tree, context) => {
+        const { project } = options;
+        const { tsPaths, templatePaths, projectDefinition } = await utils_packageConfig.getParsingInfo(project, tree);
+        const program = ts.createProgram(Array.from(tsPaths, (item) => node_path.resolve(projectDefinition.root, `.${item}`)), {
+            baseUrl: projectDefinition.root,
+            rootDir: projectDefinition.root,
+            _enableTemplateTypeChecker: true, // Required for the template type checker to work.
+            compileNonExportedClasses: true, // We want to migrate non-exported classes too.
+            // Avoid checking libraries to speed up the migration.
+            skipLibCheck: true,
+            skipDefaultLibCheck: true
+        });
+        // Update external html
+        await utils_angularParsing.migrateTemplate(tree, Array.from(templatePaths), context, migrationData);
+        // Update inline html
+        await utils_angularParsing.migrateTs(tree, program.getSourceFiles().filter((sourceFile) => utils_typescript.canMigrateFile(sourceFile, program)), process__namespace.cwd(), context, migrationData);
+        context.logger.warn('Warning! Run linter in updated files since line breaks or indents maybe be broken.');
+    };
+}
+
+exports.default = migrate;
+exports.migrationData = migrationData;

package/schematics/migrations/empty-state-size-attr/schema.json

@@ -0,0 +1,15 @@
+{
+    "$schema": "http://json-schema.org/schema",
+    "$id": "koobiq-components-empty-state-size-attr",
+    "title": "koobiq-components empty-state-size-attr schematic",
+    "type": "object",
+    "properties": {
+        "project": {
+            "type": "string",
+            "description": "Name of the project",
+            "$default": {
+                "$source": "projectName"
+            }
+        }
+    }
+}

package/schematics/migrations/loader-overlay-size-attr/README.md

@@ -0,0 +1,62 @@
+### Loader Overlay Size Attr schematics
+
+This schematic provides migration for `KbqLoaderOverlay` new `size` attribute. It includes:
+
+-   Removal of `compact` attribute usage
+-   Replacement with `size` attribute
+
+[Params](schema.ts)
+
+Usage for Angular Cli:
+
+```shell
+ng g @koobiq/components:loader-overlay-size-attr --project <your project>
+```
+
+Usage for Nx:
+
+```shell
+nx g @koobiq/components:loader-overlay-size-attr --project <your project>
+```
+
+### Run locally
+
+Build package
+
+```shell
+yarn run build:schematics
+```
+
+Run command (for example, for `koobiq-docs` project)
+
+```shell
+ng g ./dist/components/schematics/collection.json:loader-overlay-size-attr --project koobiq-docs
+```
+
+### Result
+
+#### Before
+
+```ts
+import { Component } from '@angular/core';
+
+@Component({
+    template: `
+        <kbq-loader-overlay [compact]="true">...</kbq-loader-overlay>
+    `
+})
+export class MyComp {}
+```
+
+#### After
+
+```ts
+import { Component } from '@angular/core';
+
+@Component({
+    template: `
+        <kbq-loader-overlay size="compact">...</kbq-loader-overlay>
+    `
+})
+export class MyComp {}
+```

package/schematics/migrations/loader-overlay-size-attr/index.js

@@ -0,0 +1,74 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var node_path = require('node:path');
+var process = require('node:process');
+var ts = require('typescript');
+var utils_angularParsing = require('../../utils/angular-parsing.js');
+var utils_packageConfig = require('../../utils/package-config.js');
+var utils_typescript = require('../../utils/typescript.js');
+require('path');
+require('../../utils/ast.js');
+require('@angular-devkit/schematics');
+require('@schematics/angular/utility');
+require('../../utils/messages.js');
+
+function _interopNamespaceDefault(e) {
+    var n = Object.create(null);
+    if (e) {
+        Object.keys(e).forEach(function (k) {
+            if (k !== 'default') {
+                var d = Object.getOwnPropertyDescriptor(e, k);
+                Object.defineProperty(n, k, d.get ? d : {
+                    enumerable: true,
+                    get: function () { return e[k]; }
+                });
+            }
+        });
+    }
+    n.default = e;
+    return Object.freeze(n);
+}
+
+var process__namespace = /*#__PURE__*/_interopNamespaceDefault(process);
+
+const migrationData = {
+    elementName: 'kbq-loader-overlay',
+    attrs: {
+        key: {
+            from: 'compact',
+            to: 'size'
+        },
+        value: {
+            replacements: [
+                { from: 'true', to: 'compact' },
+                { from: 'false', to: 'big' }
+            ],
+            default: 'big'
+        }
+    }
+};
+function migrate(options) {
+    return async (tree, context) => {
+        const { project } = options;
+        const { tsPaths, templatePaths, projectDefinition } = await utils_packageConfig.getParsingInfo(project, tree);
+        const program = ts.createProgram(Array.from(tsPaths, (item) => node_path.resolve(projectDefinition.root, `.${item}`)), {
+            baseUrl: projectDefinition.root,
+            rootDir: projectDefinition.root,
+            _enableTemplateTypeChecker: true, // Required for the template type checker to work.
+            compileNonExportedClasses: true, // We want to migrate non-exported classes too.
+            // Avoid checking libraries to speed up the migration.
+            skipLibCheck: true,
+            skipDefaultLibCheck: true
+        });
+        // Update external html
+        await utils_angularParsing.migrateTemplate(tree, Array.from(templatePaths), context, migrationData);
+        // Update inline html
+        await utils_angularParsing.migrateTs(tree, program.getSourceFiles().filter((sourceFile) => utils_typescript.canMigrateFile(sourceFile, program)), process__namespace.cwd(), context, migrationData);
+        context.logger.warn('Warning! Run linter in updated files since line breaks or indents maybe be broken.');
+    };
+}
+
+exports.default = migrate;
+exports.migrationData = migrationData;

package/schematics/migrations/loader-overlay-size-attr/schema.json

@@ -0,0 +1,15 @@
+{
+    "$schema": "http://json-schema.org/schema",
+    "$id": "koobiq-components-loader-overlay-size-attr",
+    "title": "koobiq-components loader-overlay-size-attr schematic",
+    "type": "object",
+    "properties": {
+        "project": {
+            "type": "string",
+            "description": "Name of the project",
+            "$default": {
+                "$source": "projectName"
+            }
+        }
+    }
+}

package/schematics/migrations/new-icons-pack/README.md

@@ -0,0 +1,21 @@
+### New Icons Pack schematics
+
+This schematic provides migration for update icons pack. It includes:
+
+-   Change prefixes from `mc` to `kbq` for ts, html, styles
+-   Update icon names for updated/removed icons according to [mapping](data.ts)
+-   Fix icons package prefix in styles
+
+[Params](schema.ts)
+
+Usage for Angular Cli:
+
+```shell
+ng g @koobiq/components:new-icons-pack --fix=true --project <your project>
+```
+
+Usage for Nx:
+
+```shell
+nx g @koobiq/components:new-icons-pack --fix=true --project <your project>
+```

package/schematics/ng-add/index.js

@@ -27,11 +27,11 @@ function ngAdd(options) {
         }
         // Installing dependencies
         utils_packageConfig.addPackageToPackageJson(tree, '@angular/cdk', "^18.2.6");
-        utils_packageConfig.addPackageToPackageJson(tree, '@koobiq/cdk', "^18.20.0");
-        utils_packageConfig.addPackageToPackageJson(tree, '@koobiq/angular-luxon-adapter', "^18.20.0");
+        utils_packageConfig.addPackageToPackageJson(tree, '@koobiq/cdk', "^18.22.0");
+        utils_packageConfig.addPackageToPackageJson(tree, '@koobiq/angular-luxon-adapter', "^18.22.0");
         utils_packageConfig.addPackageToPackageJson(tree, '@koobiq/date-formatter', "^3.2.3");
         utils_packageConfig.addPackageToPackageJson(tree, '@koobiq/date-adapter', "^3.2.3");
-        utils_packageConfig.addPackageToPackageJson(tree, '@koobiq/icons', "^9.3.1");
+        utils_packageConfig.addPackageToPackageJson(tree, '@koobiq/icons', "^9.4.0");
         utils_packageConfig.addPackageToPackageJson(tree, '@koobiq/tokens-builder', "^3.11.0");
         utils_packageConfig.addPackageToPackageJson(tree, '@koobiq/design-tokens', "^3.12.1");
         utils_packageConfig.addPackageToPackageJson(tree, '@messageformat/core', "^3.0.1");

package/schematics/utils/angular-parsing.js

@@ -0,0 +1,153 @@
+'use strict';
+
+var path = require('path');
+var ts = require('typescript');
+var utils_ast = require('./ast.js');
+var utils_typescript = require('./typescript.js');
+
+/**
+ * Update separate html file
+ * @param tree
+ * @param filePaths
+ * @param context
+ * @param migrationData
+ */
+async function migrateTemplate(tree, filePaths, context, migrationData) {
+    for (const templatePath of filePaths) {
+        const parsedFilePath = `.${templatePath}`;
+        let res = Promise.resolve({
+            fileContent: '',
+            changed: false,
+            errors: []
+        });
+        const template = tree.read(parsedFilePath)?.toString();
+        if (!template) {
+            context.logger.error(`Cannot read "${parsedFilePath}" because it does not exist.`);
+            continue;
+        }
+        res = transformTemplateAttributes(template, parsedFilePath, migrationData);
+        const { fileContent, changed, errors } = await res;
+        if (changed) {
+            tree.overwrite(templatePath, fileContent);
+        }
+        if (errors.length > 0) {
+            context.logger.error(errors.map(({ error }) => error.toString()).join('\n'));
+        }
+    }
+}
+/**
+ * Update typescript file if classes with @Component decorator and `template` property exists
+ * @param tree
+ * @param sourceFiles
+ * @param basePath
+ * @param context
+ * @param migrationData
+ */
+async function migrateTs(tree, sourceFiles, basePath, context, migrationData) {
+    // run and track changed components
+    const analysis = new Map();
+    for (const sourceFile of sourceFiles) {
+        utils_typescript.forEachClass(sourceFile, (node) => {
+            analyzeDecorators(node, sourceFile, analysis);
+        });
+    }
+    // update source file
+    for (const path$1 of analysis.keys()) {
+        const file = analysis.get(path$1);
+        const ranges = file.getSortedRanges();
+        const relativePath = path.relative(basePath, path$1);
+        const content = tree.readText(relativePath);
+        const update = tree.beginUpdate(relativePath);
+        for (const { start, end } of ranges) {
+            const template = content.slice(start, end);
+            const length = (end ?? content.length) - start;
+            const { fileContent, changed, errors } = await transformTemplateAttributes(template, relativePath, migrationData);
+            if (changed) {
+                update.remove(start, length);
+                update.insertLeft(start, fileContent);
+            }
+            if (errors.length > 0) {
+                context.logger.error(errors.map(({ error }) => error.toString()).join('\n'));
+            }
+        }
+        tree.commitUpdate(update);
+    }
+}
+/**
+ * Analyzes the decorators of a given class declaration to find and save
+ * inline `template` metadata within `@Component` decorators.
+ */
+function analyzeDecorators(node, sourceFile, analyzedFiles) {
+    const decorator = ts.getDecorators(node)?.find((dec) => {
+        return (ts.isCallExpression(dec.expression) &&
+            ts.isIdentifier(dec.expression.expression) &&
+            dec.expression?.expression?.text === 'Component');
+    });
+    const metadata = decorator &&
+        decorator.expression.arguments.length > 0 &&
+        ts.isObjectLiteralExpression(decorator.expression.arguments[0])
+        ? decorator.expression.arguments[0]
+        : null;
+    // Exit early if there's no metadata or it's not an object literal
+    if (!metadata) {
+        return;
+    }
+    for (const prop of metadata.properties) {
+        // All the properties we care about should have static
+        // names and be initialized to a static string.
+        if (!ts.isPropertyAssignment(prop) || (!ts.isIdentifier(prop.name) && !ts.isStringLiteralLike(prop.name))) {
+            continue;
+        }
+        // check decorator 'template' property, check for text content parse
+        if (prop.name.text === 'template' && ts.isStringLiteralLike(prop.initializer) && prop.initializer.text) {
+            // +1/-1 to exclude the opening/closing characters from the range.
+            utils_typescript.AnalyzedFile.addRange(sourceFile.fileName, sourceFile, analyzedFiles, {
+                start: prop.initializer.getStart(sourceFile) + 1,
+                end: prop.initializer.getEnd() - 1,
+                node: prop,
+                type: 'template',
+                remove: true
+            });
+        }
+    }
+}
+/**
+ * Migrates attribute values in an Angular template based on predefined cases.
+ */
+async function transformTemplateAttributes(template, fileName, migrationData) {
+    const parsed = await utils_typescript.parseTemplate(template);
+    let updatedTemplate = template;
+    // extra text offset as result of text replacement;
+    let offset = 0;
+    if (parsed.tree !== undefined) {
+        const visitor = new utils_typescript.ElementCollector(migrationData, fileName);
+        utils_ast.visitAll(visitor, parsed.tree.rootNodes);
+        for (const el of visitor.elementsToMigrate) {
+            const migrationAttr = el.attrs.find((attr) => utils_ast.getSimpleAttributeName(attr.name) === migrationData.attrs.key.from);
+            let updatedAttrValue;
+            if (migrationAttr) {
+                const cleanAttrValue = utils_ast.getSimpleAttributeValue(migrationAttr.value);
+                const replacement = migrationData.attrs.value.replacements.find(({ from }) => from === cleanAttrValue);
+                if (replacement) {
+                    updatedAttrValue = replacement.to;
+                }
+                else {
+                    console.warn(`Element is using dynamic value. Check the code and change value on your own.${(fileName && ' File: ' + fileName) || ''}`);
+                    continue;
+                }
+                updatedTemplate =
+                    updatedTemplate.slice(0, migrationAttr.keySpan.start.offset - offset) +
+                        `${migrationData.attrs.key.to}="${updatedAttrValue}"` +
+                        updatedTemplate.slice(migrationAttr.valueSpan.end.offset + 1 - offset, updatedTemplate.length);
+                offset += migrationAttr.name.length - migrationData.attrs.key.to.length;
+                offset += migrationAttr.value.length - updatedAttrValue.length;
+            }
+        }
+        return { fileContent: updatedTemplate, changed: visitor.elementsToMigrate.length > 0, errors: parsed.errors };
+    }
+    return { fileContent: updatedTemplate, changed: undefined, errors: parsed.errors };
+}
+
+exports.analyzeDecorators = analyzeDecorators;
+exports.migrateTemplate = migrateTemplate;
+exports.migrateTs = migrateTs;