@taiga-ui/cdk 3.44.0-canary.b3de48e → 3.44.1-canary.aa80e1e

package/schematics/ng-update/v3/tests/schematic-replace-services.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/schematics/ng-update/v3/tests/schematic-replace-services.spec.js

@@ -0,0 +1,102 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+/* eslint-disable rxjs/no-topromise */
+const schematics_1 = require("@angular-devkit/schematics");
+const testing_1 = require("@angular-devkit/schematics/testing");
+const ng_morph_1 = require("ng-morph");
+const path_1 = require("path");
+const create_angular_json_1 = require("../../../utils/create-angular-json");
+const collectionPath = path_1.join(__dirname, `../../../migration.json`);
+const BEFORE = `import { Component } from '@angular/core';
+import { TuiPortalService } from '@taiga-ui/cdk';
+import { PreviewDialogService } from '@taiga-ui/addon-preview';
+import { TuiNotificationsService } from '@taiga-ui/core';
+import { TuiCodeEditor } from '@taiga-ui/addon-doc';
+
+function etc(service: TuiNotificationsService) {
+    service
+    .show().subscribe();
+
+    let open = getService().show();
+}
+
+function getService(): TuiNotificationsService {
+    return new TuiNotificationsService();
+}
+
+@Component({templateUrl: './app.template.html'})
+export class AppComponent {
+    constructor(
+      @Inject(TuiPortalService) portalService: TuiPortalService,
+      @Inject(TuiNotificationsService) private notificationService: TuiNotificationsService,
+      @Inject(PreviewDialogService) private preview: PreviewDialogService,
+      @Inject(TUI_DOC_CODE_EDITOR) private editor: TuiCodeEditor
+    ) {
+      notificationService.show(arg, arg2);
+    }
+
+    method(): void {
+        this.notificationService.show(arg, arg2).subscribe();
+        this.editor.open(arg1, arg2);
+    }
+}`;
+const AFTER = `import { TuiPreviewDialogService } from "@taiga-ui/addon-preview";
+import { TuiCodeEditor } from "@taiga-ui/addon-doc";
+import { TuiAlertService } from "@taiga-ui/core";
+import { TuiDropdownPortalService } from "@taiga-ui/cdk";
+import { Component } from '@angular/core';
+
+function etc(service: TuiAlertService) {
+    service
+    .open().subscribe();
+
+    let open = getService().open();
+}
+
+function getService(): TuiAlertService {
+    return new TuiAlertService();
+}
+
+@Component({templateUrl: './app.template.html'})
+export class AppComponent {
+    constructor(
+      @Inject(TuiDropdownPortalService) portalService: TuiDropdownPortalService,
+      @Inject(TuiAlertService) private notificationService: TuiAlertService,
+      @Inject(TuiPreviewDialogService) private preview: TuiPreviewDialogService,
+      @Inject(TUI_DOC_CODE_EDITOR) private editor: TuiCodeEditor
+    ) {
+      notificationService.open(arg, arg2);
+    }
+
+    method(): void {
+        this.notificationService.open(arg, arg2).subscribe();
+        this.editor.edit(arg1, arg2);
+    }
+}`;
+describe(`ng-update`, () => {
+    let host;
+    let runner;
+    beforeEach(() => {
+        host = new testing_1.UnitTestTree(new schematics_1.HostTree());
+        runner = new testing_1.SchematicTestRunner(`schematics`, collectionPath);
+        ng_morph_1.setActiveProject(ng_morph_1.createProject(host));
+        createMainFiles();
+        ng_morph_1.saveActiveProject();
+    });
+    it(`should replace services`, () => tslib_1.__awaiter(void 0, void 0, void 0, function* () {
+        const tree = yield runner
+            .runSchematicAsync(`updateToV3`, { 'skip-logs': process.env[`TUI_CI`] === `true` }, host)
+            .toPromise();
+        expect(tree.readContent(`test/app/app.component.ts`)).toEqual(AFTER);
+    }));
+    afterEach(() => {
+        ng_morph_1.resetActiveProject();
+    });
+});
+function createMainFiles() {
+    ng_morph_1.createSourceFile(`test/app/app.component.ts`, BEFORE);
+    ng_morph_1.createSourceFile(`test/app/app.template.html`, `<app></app>`);
+    create_angular_json_1.createAngularJson();
+    ng_morph_1.createSourceFile(`package.json`, `{"dependencies": {"@angular/core": "~13.0.0"}}`);
+}

package/schematics/ng-update/v3/tests/schematic-replace-styles.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/schematics/ng-update/v3/tests/schematic-replace-styles.spec.js

@@ -0,0 +1,286 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+/* eslint-disable rxjs/no-topromise */
+const schematics_1 = require("@angular-devkit/schematics");
+const testing_1 = require("@angular-devkit/schematics/testing");
+const ng_morph_1 = require("ng-morph");
+const path_1 = require("path");
+const create_angular_json_1 = require("../../../utils/create-angular-json");
+const replace_styles_1 = require("../steps/replace-styles");
+const collectionPath = path_1.join(__dirname, `../../../migration.json`);
+const BEFORE_GLOBAL_STYLE = `
+@import '~@taiga-ui/core/styles/taiga-ui-fonts';
+@import '~@taiga-ui/core/styles/taiga-ui-global';
+@import '~@taiga-ui/core/styles/taiga-ui-global.less';
+@import '~@taiga-ui/proprietary-core/styles/tinkoff-fonts';
+@import '~@taiga-ui/proprietary-core/styles/theme-tinkoff-v2';
+@import '~@taiga-ui/proprietary-core/styles/theme-tinkoff-mobile';
+`;
+const AFTER_GLOBAL_STYLE = `
+@import '@taiga-ui/core/styles/taiga-ui-fonts.less';
+${replace_styles_1.TUI_WARNING_NORMALIZE}
+@import '@taiga-ui/styles/taiga-ui-global.less';
+${replace_styles_1.TUI_WARNING_NORMALIZE}
+@import '@taiga-ui/styles/taiga-ui-global.less';
+@import '@taiga-ui/proprietary-core/styles/tinkoff-fonts.less';
+@import '@taiga-ui/proprietary-core/styles/theme-tinkoff-v2.less';
+@import '@taiga-ui/proprietary-core/styles/theme-tinkoff-mobile.less';
+`;
+const BEFORE_LOCAL_STYLE = `
+@import '~@taiga-ui/core/styles/taiga-ui-local';
+
+tui-wrapper[data-appearance='textfield'] {
+    background: var(--tui-secondary);
+    color: var(--tui-text-01);
+    box-shadow: none;
+
+    &[data-state='hovered'] {
+        background: var(--tui-secondary);
+
+        &:after {
+            color: var(--tui-accent-hover);
+        }
+    }
+
+    &[data-state='pressed'] {
+        background: var(--tui-secondary-hover);
+
+        &:after {
+            color: var(--tui-accent-active);
+        }
+    }
+}
+
+.legacy-breakpoints {
+    @media @mobile {
+        color: red;
+    }
+    @media @mobile-min {
+        color: red;
+    }
+    @media @mobile-interval {
+        color: red;
+    }
+    @media @tablet-s {
+        color: red;
+    }
+    @media @tablet-s-min {
+        color: red;
+    }
+    @media @tablet-s-interval {
+        color: red;
+    }
+    @media @tablet {
+        color: red;
+    }
+    @media @tablet-min {
+        color: red;
+    }
+    @media @tablet-interval {
+        color: red;
+    }
+    @media @desktop {
+        color: red;
+    }
+    @media @desktop-min {
+        color: red;
+    }
+    @media @desktop-interval {
+        color: red;
+    }
+    @media @desktop-lg-min {
+        color: red;
+    }
+}
+
+.actual-breakpoints {
+    @media @mobile-m {
+        color: red;
+    }
+    @media @mobile-m-min {
+        color: red;
+    }
+    @media @mobile-m-interval {
+        color: red;
+    }
+    @media @tablet-lg {
+        color: red;
+    }
+    @media @tablet-lg-min {
+        color: red;
+    }
+    @media @tablet-lg-interval {
+        color: red;
+    }
+    @media @desktop-s {
+        color: red;
+    }
+    @media @desktop-s-min {
+        color: red;
+    }
+    @media @desktop-s-interval {
+        color: red;
+    }
+    @media @desktop-m-min {
+        color: red;
+    }
+}
+
+.negative-media {
+    @media not @mobile-m {
+        color: green;
+    }
+
+    @media not @desktop {
+        color: green;
+    }
+}
+`;
+const AFTER_LOCAL_STYLE = `
+@import '@taiga-ui/core/styles/taiga-ui-local.less';
+
+${replace_styles_1.TUI_WARNING_WRAPPER_MIXINS}
+[tuiWrapper][data-appearance='textfield'] {
+    background: var(--tui-secondary);
+    color: var(--tui-text-01);
+    box-shadow: none;
+
+    &[data-state='hover'] {
+        background: var(--tui-secondary);
+
+        &:after {
+            color: var(--tui-accent-hover);
+        }
+    }
+
+    &[data-state='active'] {
+        background: var(--tui-secondary-hover);
+
+        &:after {
+            color: var(--tui-accent-active);
+        }
+    }
+}
+
+.legacy-breakpoints {
+    @media @tui-mobile {
+        color: red;
+    }
+    @media @tui-mobile-min {
+        color: red;
+    }
+    @media @tui-mobile-interval {
+        color: red;
+    }
+    @media @tui-mobile {
+        color: red;
+    }
+    @media @tui-mobile-min {
+        color: red;
+    }
+    @media @tui-mobile-interval {
+        color: red;
+    }
+    @media @tui-tablet {
+        color: red;
+    }
+    @media @tui-tablet-min {
+        color: red;
+    }
+    @media @tui-tablet-interval {
+        color: red;
+    }
+    @media @tui-desktop {
+        color: red;
+    }
+    @media @tui-desktop-min {
+        color: red;
+    }
+    @media @tui-desktop-interval {
+        color: red;
+    }
+    @media @tui-desktop-lg-min {
+        color: red;
+    }
+}
+
+.actual-breakpoints {
+    @media @tui-mobile {
+        color: red;
+    }
+    @media @tui-mobile-min {
+        color: red;
+    }
+    @media @tui-mobile-interval {
+        color: red;
+    }
+    @media @tui-tablet {
+        color: red;
+    }
+    @media @tui-tablet-min {
+        color: red;
+    }
+    @media @tui-tablet-interval {
+        color: red;
+    }
+    @media @tui-desktop {
+        color: red;
+    }
+    @media @tui-desktop-min {
+        color: red;
+    }
+    @media @tui-desktop-interval {
+        color: red;
+    }
+    @media @tui-desktop-lg-min {
+        color: red;
+    }
+}
+
+.negative-media {
+    @media not @tui-mobile {
+        color: green;
+    }
+
+    @media not @tui-desktop {
+        color: green;
+    }
+}
+`;
+describe(`replace styles`, () => {
+    let host;
+    let runner;
+    beforeEach(() => {
+        host = new testing_1.UnitTestTree(new schematics_1.HostTree());
+        runner = new testing_1.SchematicTestRunner(`schematics`, collectionPath);
+        ng_morph_1.setActiveProject(ng_morph_1.createProject(host, `/`, `**/**`));
+        createMainFiles();
+        ng_morph_1.saveActiveProject();
+    });
+    it(`should replace with new global styles`, () => tslib_1.__awaiter(void 0, void 0, void 0, function* () {
+        const tree = yield runner
+            .runSchematicAsync(`updateToV3`, { 'skip-logs': process.env[`TUI_CI`] === `true` }, host)
+            .toPromise();
+        expect(tree.readContent(`test/style.less`)).toBe(AFTER_GLOBAL_STYLE);
+        expect(tree.readContent(`test/app/app.template.less`)).toBe(AFTER_LOCAL_STYLE);
+    }));
+    afterEach(() => {
+        ng_morph_1.resetActiveProject();
+    });
+});
+function createMainFiles() {
+    ng_morph_1.createSourceFile(`test/app/app.component.ts`, `
+@Component({
+    templateUrl: './app.template.html',
+    styleUrls: ['./app.template.less']
+})
+export class AppComponent {
+}
+`);
+    ng_morph_1.createSourceFile(`test/app/app.template.html`, `<app></app>`);
+    ng_morph_1.createSourceFile(`test/style.less`, BEFORE_GLOBAL_STYLE);
+    ng_morph_1.createSourceFile(`test/app/app.template.less`, BEFORE_LOCAL_STYLE);
+    create_angular_json_1.createAngularJson();
+    ng_morph_1.createSourceFile(`package.json`, `{"dependencies": {"@angular/core": "~13.0.0"}}`);
+}

package/schematics/ng-update/v3/tests/schematic-textfield-icon.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/schematics/ng-update/v3/tests/schematic-textfield-icon.spec.js

@@ -0,0 +1,141 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+/* eslint-disable rxjs/no-topromise */
+const schematics_1 = require("@angular-devkit/schematics");
+const testing_1 = require("@angular-devkit/schematics/testing");
+const ng_morph_1 = require("ng-morph");
+const path_1 = require("path");
+const create_angular_json_1 = require("../../../utils/create-angular-json");
+const collectionPath = path_1.join(__dirname, `../../../migration.json`);
+const COMPONENT = `
+@Component({templateUrl: './test.template.html'})
+export class TestComponent {}
+`;
+const TEMPLATE_BEFORE = `
+<tui-input
+    formControlName="testValue"
+    icon="icon"
+    tuiTextfieldExampleText="House"
+    tuiHintContent="Write a number"
+    class="tui-group__inherit-item"
+>
+    House
+</tui-input>
+
+<tui-input-tag [icon]="icon" iconAlign="left"></tui-input-tag>
+
+<tui-input
+    formControlName="testValue"
+    icon="icon"
+    iconAlign="right"
+    tuiHintContent="Write a number"
+    class="tui-group__inherit-item"
+>
+    House
+</tui-input>
+
+<tui-primitive-textfield
+        class="textfield"
+        iconAlign="right"
+        [iconContent]="icon"
+    >
+ </tui-primitive-textfield>
+`;
+const TEMPLATE_AFTER = `
+<tui-input
+    formControlName="testValue"
+    tuiTextfieldIconLeft="icon"
+    ${``}
+    tuiHintContent="Write a number"
+    class="tui-group__inherit-item"
+>
+    House
+<input tuiTextfield placeholder="House"/> </tui-input>
+
+<tui-input-tag [tuiTextfieldIconLeft]="icon" ></tui-input-tag>
+
+<tui-input
+    formControlName="testValue"
+    tuiTextfieldIcon="icon"
+    ${``}
+    tuiHintContent="Write a number"
+    class="tui-group__inherit-item"
+>
+    House
+</tui-input>
+
+<tui-primitive-textfield
+        class="textfield"
+        ${``}
+        [tuiTextfieldIcon]="icon"
+    >
+ </tui-primitive-textfield>
+`;
+const MODULE_BEFORE = `import {CommonModule} from '@angular/common';
+import {NgModule} from '@angular/core';
+
+import {TestComponent} from './test.component';
+
+@NgModule({
+    imports: [
+        CommonModule,
+    ],
+    declarations: [
+        TestComponent,
+    ],
+    exports: [TestComponent],
+})
+export class ExampleModule {}
+`;
+const MODULE_AFTER = `import { TuiTextfieldControllerModule } from "@taiga-ui/core";
+import {CommonModule} from '@angular/common';
+import {NgModule} from '@angular/core';
+
+import {TestComponent} from './test.component';
+
+@NgModule({
+    imports: [
+        CommonModule,
+        TuiTextfieldControllerModule
+    ],
+    declarations: [
+        TestComponent,
+    ],
+    exports: [TestComponent],
+})
+export class ExampleModule {}
+`;
+describe(`ng-update`, () => {
+    let host;
+    let runner;
+    beforeEach(() => {
+        host = new testing_1.UnitTestTree(new schematics_1.HostTree());
+        runner = new testing_1.SchematicTestRunner(`schematics`, collectionPath);
+        ng_morph_1.setActiveProject(ng_morph_1.createProject(host));
+        createMainFiles();
+        ng_morph_1.saveActiveProject();
+    });
+    it(`should edit templates`, () => tslib_1.__awaiter(void 0, void 0, void 0, function* () {
+        const tree = yield runner
+            .runSchematicAsync(`updateToV3`, { 'skip-logs': process.env[`TUI_CI`] === `true` }, host)
+            .toPromise();
+        expect(tree.readContent(`test/app/test.template.html`)).toEqual(TEMPLATE_AFTER);
+    }));
+    it(`should add directive to module`, () => tslib_1.__awaiter(void 0, void 0, void 0, function* () {
+        const tree = yield runner
+            .runSchematicAsync(`updateToV3`, { 'skip-logs': process.env[`TUI_CI`] === `true` }, host)
+            .toPromise();
+        expect(tree.readContent(`test/app/test.module.ts`)).toEqual(MODULE_AFTER);
+    }));
+    afterEach(() => {
+        ng_morph_1.resetActiveProject();
+    });
+});
+function createMainFiles() {
+    ng_morph_1.createSourceFile(`test/app/test.component.ts`, COMPONENT);
+    ng_morph_1.createSourceFile(`test/app/test.template.html`, TEMPLATE_BEFORE);
+    ng_morph_1.createSourceFile(`test/app/test.module.ts`, MODULE_BEFORE);
+    create_angular_json_1.createAngularJson();
+    ng_morph_1.createSourceFile(`package.json`, `{"dependencies": {"@angular/core": "~13.0.0"}}`);
+}

package/schematics/ng-update/v3/tests/schematic-warnings.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/schematics/ng-update/v3/tests/schematic-warnings.spec.js

@@ -0,0 +1,104 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const schematics_1 = require("@angular-devkit/schematics");
+const testing_1 = require("@angular-devkit/schematics/testing");
+const ng_morph_1 = require("ng-morph");
+const path_1 = require("path");
+const create_angular_json_1 = require("../../../utils/create-angular-json");
+const warnings_1 = require("../constants/warnings");
+const replace_styles_1 = require("../steps/replace-styles");
+const collectionPath = path_1.join(__dirname, `../../../migration.json`);
+const BEFORE = `
+import {TUI_MOBILE_AWARE, COUNTRIES_MASKS} from '@taiga-ui/kit';
+import {
+    DumbEntity,
+    DUMB_CONSTANT,
+    awesomeFunction,
+    TUI_LAST_DAY,
+    TUI_DATE_FILLER,
+    MEGA_CONSTANT,
+    anotherAwesomeFunction
+    MagicClass,
+} from '@taiga-ui/cdk';
+import {DumbEntity, TUI_DATE_RANGE_FILLER, MEGA_CONSTANT, MagicClass} from '@taiga-ui/cdk';
+import {COUNTRIES} from '@taiga-ui/kit/components/input-phone-international';
+
+const lol = TUI_DATE_FILLER;
+const kek = TUI_MOBILE_AWARE;
+const variable1 = TUI_DATE_RANGE_FILLER;
+@Component({templateUrl: './app.template.html'})
+export class AppComponent {
+    aware = TUI_MOBILE_AWARE;
+}
+`;
+const AFTER = `
+// TODO: (Taiga UI migration) TUI_MOBILE_AWARE has been deleted in 3.0, please use TuiMobileTabsDirective from @taiga-ui/addon-mobile
+// TODO: (Taiga UI migration) Use DI-token TUI_COUNTRIES_MASKS to get phone mask by country iso code
+import {TUI_MOBILE_AWARE, COUNTRIES_MASKS} from '@taiga-ui/kit';
+import {
+    DumbEntity,
+    DUMB_CONSTANT,
+    awesomeFunction,
+    TUI_LAST_DAY,
+// TODO: (Taiga UI migration) TUI_DATE_FILLER has been deleted in 3.0, please use TUI_DATE_FORMAT + TUI_DATE_SEPARATOR from @taiga-ui/cdk. Read more: https://taiga-ui.dev/components/input-date
+    TUI_DATE_FILLER,
+    MEGA_CONSTANT,
+    anotherAwesomeFunction
+    MagicClass,
+} from '@taiga-ui/cdk';
+// TODO: (Taiga UI migration) TUI_DATE_RANGE_FILLER has been deleted in 3.0, please use TUI_DATE_FORMAT + TUI_DATE_SEPARATOR from @taiga-ui/cdk. Read more: https://taiga-ui.dev/components/input-date-range
+import {DumbEntity, TUI_DATE_RANGE_FILLER, MEGA_CONSTANT, MagicClass} from '@taiga-ui/cdk';
+// TODO: (Taiga UI migration) Use DI-token TUI_COUNTRIES_MASKS to get phone mask by country iso code. Use DI-token TUI_COUNTRIES to get localized country name by its iso code
+import { COUNTRIES } from '@taiga-ui/kit';
+
+const lol = TUI_DATE_FILLER;
+const kek = TUI_MOBILE_AWARE;
+const variable1 = TUI_DATE_RANGE_FILLER;
+@Component({templateUrl: './app.template.html'})
+export class AppComponent {
+    aware = TUI_MOBILE_AWARE;
+}
+`;
+describe(`ng-update`, () => {
+    let host;
+    let runner;
+    let logs;
+    let logSubscription;
+    beforeEach(() => {
+        logs = [];
+        host = new testing_1.UnitTestTree(new schematics_1.HostTree());
+        runner = new testing_1.SchematicTestRunner(`schematics`, collectionPath);
+        logSubscription = runner.logger.subscribe(log => logs.push(log));
+        ng_morph_1.setActiveProject(ng_morph_1.createProject(host));
+        createMainFiles();
+        ng_morph_1.saveActiveProject();
+    });
+    it(`should show warnings`, () => tslib_1.__awaiter(void 0, void 0, void 0, function* () {
+        const tree = yield runner
+            .runSchematicAsync(`updateToV3`, { 'skip-logs': process.env[`TUI_CI`] === `true` }, host)
+            .toPromise();
+        const expectedLogs = logs
+            .filter(log => log.level === `warn`)
+            .map(log => log.message);
+        expect(expectedLogs).toEqual([
+            `[WARNING] in /test/app/app.component.ts: ${warnings_1.MIGRATION_WARNINGS[0].message}`,
+            `[WARNING] in /test/app/app.component.ts: ${warnings_1.MIGRATION_WARNINGS[1].message}`,
+            `[WARNING] in /test/app/app.component.ts: ${warnings_1.MIGRATION_WARNINGS[2].message}`,
+            `[WARNING] in /test/app/app.component.ts: ${warnings_1.MIGRATION_WARNINGS[4].message}`,
+            `[WARNING] in /test/app/app.component.ts: ${warnings_1.MIGRATION_WARNINGS[5].message}`,
+            replace_styles_1.TUI_WARNING_NORMALIZE,
+        ]);
+        expect(tree.readContent(`test/app/app.component.ts`)).toBe(AFTER);
+    }));
+    afterEach(() => {
+        ng_morph_1.resetActiveProject();
+        logSubscription.unsubscribe();
+    });
+});
+function createMainFiles() {
+    ng_morph_1.createSourceFile(`test/app/app.component.ts`, BEFORE);
+    ng_morph_1.createSourceFile(`test/app/app.template.html`, `<app></app>`);
+    create_angular_json_1.createAngularJsonWithAssets();
+    ng_morph_1.createSourceFile(`package.json`, `{"dependencies": {"@angular/core": "~13.0.0"}}`);
+}

package/schematics/ng-update/v3-30/tests/schematic-migrate-icons.spec.d.ts

@@ -0,0 +1 @@
+export {};