@taiga-ui/cdk 3.44.1-canary.aef8c35 → 3.44.1-canary.fd7a856

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

@@ -0,0 +1,611 @@
+"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_WITHOUT_ANY_TEMPLATE = `
+@Component({ selector: 'i-am-invalid-component' })
+class ComponentWithoutTemplate {}
+`;
+const COMPONENT_WITH_TEMPLATE_URL = `
+@Component({templateUrl: './test.template.html'})
+export class TestComponent {}
+`;
+const COMPONENT_WITH_TEMPLATE_URL_AFTER = `import { TUI_EDITOR_EXTENSIONS, defaultEditorExtensions } from "@taiga-ui/addon-editor";
+
+@Component({templateUrl: './test.template.html',
+        providers: [{
+                        provide: TUI_EDITOR_EXTENSIONS,
+                        useValue: defaultEditorExtensions
+                    }]
+    })
+export class TestComponent {}
+`;
+const TEMPLATE_BEFORE = `
+<tui-table-bars-host ngProjectAs="tuiOverNotifications"></tui-table-bars-host>
+<tui-tooltip direction="top-middle"></tui-tooltip>
+<tui-svg
+    src="tuiIconSettingsLarge"
+    class="icon"
+    [tuiDropdownContext]="iconInfo"
+></tui-svg>
+<button
+    tuiButton
+    type="button"
+    iconRight="tuiIconChevronDown"
+    [tuiDropdownContent]="dropdownContent"
+    [tuiDropdown]="open"
+    [tuiDropdownSided]="true"
+    (click)="onClick()"
+>
+    Choose
+</button>
+<ng-template #dropdownContent>
+    <div class="dropdown">But there is nothing to choose...</div>
+</ng-template>
+
+<tui-hosted-dropdown
+    tuiDropdownAlign="right"
+    [tuiDropdownSided]="false"
+    [content]="dropdown"
+    [(open)]="open"
+>
+    <button
+        tuiButton
+        type="button"
+        appearance="flat"
+        [iconRight]="icon"
+    >
+        Button
+    </button>
+</tui-hosted-dropdown>
+
+<tui-hosted-dropdown
+    tuiDropdownAlign="right"
+    [tuiDropdownSided]="true"
+    [content]="dropdown"
+    [(open)]="open"
+>
+    <button
+        tuiButton
+        type="button"
+        appearance="flat"
+        [iconRight]="icon"
+    >
+        Button
+    </button>
+</tui-hosted-dropdown>
+
+<label
+    tuiLabel
+    label="Step"
+></label>
+
+<tui-field-error formControlName="control"></tui-field-error>
+<tui-field-error formControlName="control" [order]="order"></tui-field-error>
+
+<p>Formatted number: {{ 10500.33 | tuiFormatNumber: 4:'.':'_':false }}</p>
+
+<table>
+  <thead>
+        <tr tuiThGroup>
+            <th
+                tuiResizableColumn
+            >
+                Name
+            </th>
+            <th tuiTh>Balance</th>
+        </tr>
+  </thead>
+</table>
+<tui-editor new [formControl]="control">
+    <ng-container ngProjectAs="tools">
+        <smiles-tool tuiToolbarTool></smiles-tool>
+    </ng-container>
+</tui-editor>
+<tui-editor [formControl]="control"></tui-editor>
+<tui-group class="some_class">
+    <div class="content"></div>
+</tui-group>
+
+<tui-wrapper
+    [appearance]="appearance"
+    [disabled]="computedDisabled"
+    [focused]="computedFocusVisible"
+    [hovered]="computedHovered"
+    [pressed]="computedPressed"
+    [invalid]="computedInvalid"
+>any</tui-wrapper>
+
+<tui-primitive-textfield
+    (autofilledChange)="onAutofilledChange($event)">
+</tui-primitive-textfield>
+
+<div tuiWrapper
+    [hover]="computedHovered"
+>any</div>
+
+<tui-select (hoveredChange)="onHoverChange(event$)"></tui-select>
+<button tuiButton (pressedChange)="onPressChange($event)"></button>
+<tui-breadcrumbs [items]="items$ | async">
+</tui-breadcrumbs>
+
+<a
+    *ngFor="let item of pages"
+    tuiLink
+    [routerLink]="item.route"
+    [scrollIntoView]="isActive(item)">
+    {{ item.name }}
+</a>
+
+<div
+    *ngFor="let item of pages"
+    tuiLink
+    [routerLink]="item.route"
+    [scrollIntoView]="isActive(item)">
+    {{ item.name }}
+</div>
+
+<etc
+    *ngFor="let item of pages"
+    tuiLink
+    [routerLink]="item.route"
+    [scrollIntoView]="isActive(item)">
+    {{ item.name }}
+</etc>
+
+<tui-multi-select
+    #component
+    [formControl]="testValue"
+    (searchChange)="onSearchChange($event)"
+>
+    Rock Star Frontend Developers
+    <tui-data-list-wrapper
+        *tuiDataList
+        [items]="items$ | async | tuiHideSelected : component"
+        [itemContent]="itemContent"
+    ></tui-data-list-wrapper>
+</tui-multi-select>
+
+<tui-multi-select #component [(ngModel)]="value">
+    <tui-data-list *tuiDataList>
+        <tui-opt-group
+            tuiMultiSelectGroup
+            label="Jedi"
+        >
+            <button
+                *ngFor="let item of jedi"
+                tuiOption
+                [value]="item"
+            >
+                {{item}}
+            </button>
+        </tui-opt-group>
+        <tui-opt-group label="Sith">
+            <button
+                *ngFor="let item of sith | tuiHideSelected:component"
+                tuiOption
+                [value]="item"
+            >
+                {{item}}
+            </button>
+        </tui-opt-group>
+    </tui-data-list>
+</tui-multi-select>
+
+<tui-tabs-with-more
+    [itemsLimit]="3"
+    [(activeItemIndex)]="activeItemIndex"
+>
+    <button *tuiTab tuiTab>Maps</button>
+    <button
+        *tuiTab
+        tuiTab
+    >
+        Calls
+    </button>
+</tui-tabs-with-more>
+
+<tui-breadcrumbs>
+    <ng-container *ngFor="let item of items">
+        <a
+            *tuiBreadcrumb
+            tuiLink
+            [routerLink]="item.routerLink"
+        >
+            {{ item.caption }}
+        </a>
+    </ng-container>
+</tui-breadcrumbs>
+
+<tui-hosted-dropdown
+    tuiDropdownAlign="left"
+    tuiDropdownSided
+    [content]="dropdown"
+    [(open)]="open"
+>
+    <button
+        tuiButton
+        type="button"
+        appearance="flat"
+        [iconRight]="icon"
+    >
+        Button
+    </button>
+</tui-hosted-dropdown>
+`;
+const TEMPLATE_AFTER = `<!-- TODO: (Taiga UI migration) tuiFormatNumber pipe has new API. See https://taiga-ui.dev/pipes/format-number -->
+<tui-table-bars-host ngProjectAs="tuiOverAlerts"></tui-table-bars-host>
+<tui-tooltip direction="top"></tui-tooltip>
+<tui-svg
+    src="tuiIconSettingsLarge"
+    class="icon"
+    tuiDropdownContext [tuiDropdown]="iconInfo"
+></tui-svg>
+<button
+    tuiButton
+    type="button"
+    iconRight="tuiIconChevronDown"
+    [tuiDropdown]="dropdownContent"
+    [tuiDropdownManual]="open"
+    [tuiDropdownSided]="true"
+    (click)="onClick()"
+>
+    Choose
+</button>
+<ng-template #dropdownContent>
+    <div class="dropdown">But there is nothing to choose...</div>
+</ng-template>
+
+<tui-hosted-dropdown
+    tuiDropdownAlign="right"
+    [sided]="false"
+    [content]="dropdown"
+    [(open)]="open"
+>
+    <button
+        tuiButton
+        type="button"
+        appearance="flat"
+        [iconRight]="icon"
+    >
+        Button
+    </button>
+</tui-hosted-dropdown>
+
+<tui-hosted-dropdown
+    tuiDropdownAlign="right"
+    [sided]="true"
+    [content]="dropdown"
+    [(open)]="open"
+>
+    <button
+        tuiButton
+        type="button"
+        appearance="flat"
+        [iconRight]="icon"
+    >
+        Button
+    </button>
+</tui-hosted-dropdown>
+
+<label
+    ${``}
+    tuiLabel="Step"
+></label>
+
+<tui-error [error]="[] | tuiFieldError | async" formControlName="control"></tui-error>
+<tui-error [error]="order | tuiFieldError | async" formControlName="control"></tui-error>
+
+<p>Formatted number: {{ 10500.33 | tuiFormatNumber: 4:'.':'_':false }}</p>
+
+<table>
+  <thead>
+        <tr tuiThGroup>
+            <th
+                tuiTh [resizable]="true"
+            >
+                Name
+            </th>
+            <th tuiTh>Balance</th>
+        </tr>
+  </thead>
+</table>
+<tui-editor  [formControl]="control">
+    <ng-container ngProjectAs="tools">
+        <smiles-tool tuiItem></smiles-tool>
+    </ng-container>
+</tui-editor>
+<tui-editor [formControl]="control"></tui-editor>
+<div tuiGroup class="some_class">
+    <div class="content"></div>
+</div>
+
+<div tuiWrapper
+    [appearance]="appearance"
+    [disabled]="computedDisabled"
+    [focus]="computedFocusVisible"
+    [hover]="computedHovered"
+    [active]="computedPressed"
+    [invalid]="computedInvalid"
+>any</div>
+
+<tui-primitive-textfield
+    (tuiAutofilledChange)="onAutofilledChange($event)">
+</tui-primitive-textfield>
+
+<div tuiWrapper
+    [hover]="computedHovered"
+>any</div>
+
+<tui-select (tuiHoveredChange)="onHoverChange(event$)"></tui-select>
+<button tuiButton (tuiPressedChange)="onPressChange($event)"></button>
+<tui-breadcrumbs>
+    <ng-container *ngFor="let item of items$ | async">
+        <a
+            *tuiItem
+            tuiLink
+            [routerLink]="item.routerLink"
+        >
+            {{ item.caption }}
+        </a>
+    </ng-container>
+</tui-breadcrumbs>
+
+<a
+    *ngFor="let item of pages"
+    tuiLink
+    [routerLink]="item.route"
+    [tuiScrollIntoViewLink]="isActive(item)">
+    {{ item.name }}
+</a>
+
+<div
+    *ngFor="let item of pages"
+    tuiLink
+    [routerLink]="item.route"
+    [tuiScrollIntoViewLink]="isActive(item)">
+    {{ item.name }}
+</div>
+
+<etc
+    *ngFor="let item of pages"
+    tuiLink
+    [routerLink]="item.route"
+    [tuiScrollIntoViewLink]="isActive(item)">
+    {{ item.name }}
+</etc>
+
+<tui-multi-select
+    #component
+    [formControl]="testValue"
+    (searchChange)="onSearchChange($event)"
+>
+    Rock Star Frontend Developers
+    <tui-data-list-wrapper
+        *tuiDataList
+        [items]="items$ | async | tuiHideSelected"
+        [itemContent]="itemContent"
+    ></tui-data-list-wrapper>
+</tui-multi-select>
+
+<tui-multi-select #component [(ngModel)]="value">
+    <tui-data-list *tuiDataList>
+        <tui-opt-group
+            tuiMultiSelectGroup
+            label="Jedi"
+        >
+            <button
+                *ngFor="let item of jedi"
+                tuiOption
+                [value]="item"
+            >
+                {{item}}
+            </button>
+        </tui-opt-group>
+        <tui-opt-group label="Sith">
+            <button
+                *ngFor="let item of sith | tuiHideSelected"
+                tuiOption
+                [value]="item"
+            >
+                {{item}}
+            </button>
+        </tui-opt-group>
+    </tui-data-list>
+</tui-multi-select>
+
+<tui-tabs-with-more
+    [itemsLimit]="3"
+    [(activeItemIndex)]="activeItemIndex"
+>
+    <button *tuiItem tuiTab>Maps</button>
+    <button
+        *tuiItem
+        tuiTab
+    >
+        Calls
+    </button>
+</tui-tabs-with-more>
+
+<tui-breadcrumbs>
+    <ng-container *ngFor="let item of items">
+        <a
+            *tuiItem
+            tuiLink
+            [routerLink]="item.routerLink"
+        >
+            {{ item.caption }}
+        </a>
+    </ng-container>
+</tui-breadcrumbs>
+
+<tui-hosted-dropdown
+    tuiDropdownAlign="left"
+    [sided]="true"
+    [content]="dropdown"
+    [(open)]="open"
+>
+    <button
+        tuiButton
+        type="button"
+        appearance="flat"
+        [iconRight]="icon"
+    >
+        Button
+    </button>
+</tui-hosted-dropdown>
+`;
+const COMPONENT_BEFORE = `
+@Component({template: '<tui-group><div [data-value]="27.3333 | tuiFormatNumber: 2"></div></tui-group>'})
+export class TestComponentInline {
+    aware = TUI_MOBILE_AWARE;
+}
+`;
+const COMPONENT_AFTER = `
+@Component({template: '<!-- TODO: (Taiga UI migration) tuiFormatNumber pipe has new API. See https://taiga-ui.dev/pipes/format-number --><div tuiGroup><div [data-value]="27.3333 | tuiFormatNumber: 2"></div></div>'})
+export class TestComponentInline {
+    aware = TUI_MOBILE_AWARE;
+}
+`;
+const MODULE_BEFORE = `
+import {CommonModule} from '@angular/common';
+import {NgModule} from '@angular/core';
+import {TuiFieldErrorModule} from "@taiga-ui/kit";
+import {ScrollIntoViewModule} from "@taiga-ui/addon-doc";
+
+import {TestComponentInline} from './test-inline.component';
+import {TestComponent} from './test.component';
+
+@NgModule({
+    imports: [
+        CommonModule,
+        TuiFieldErrorModule,
+        ScrollIntoViewModule
+    ],
+    declarations: [
+        TestComponent,
+        TestComponentInline
+    ],
+    exports: [TestComponent],
+})
+export class ExampleModule {}
+`;
+const MODULE_AFTER = `import { TuiErrorModule } from "@taiga-ui/core";
+import { TuiAutofilledModule, TuiPressedModule, TuiHoveredModule } from "@taiga-ui/cdk";
+import { TuiFieldErrorPipeModule } from "@taiga-ui/kit";
+
+import {CommonModule} from '@angular/common';
+import {NgModule} from '@angular/core';
+import { TuiScrollIntoViewLinkModule } from "@taiga-ui/addon-doc";
+
+import {TestComponentInline} from './test-inline.component';
+import {TestComponent} from './test.component';
+
+@NgModule({
+    imports: [
+        CommonModule,
+        TuiFieldErrorPipeModule,
+        TuiAutofilledModule,
+        TuiPressedModule,
+        TuiHoveredModule,
+        TuiScrollIntoViewLinkModule,
+        TuiErrorModule
+    ],
+    declarations: [
+        TestComponent,
+        TestComponentInline
+    ],
+    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 edit components`, () => 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.component.ts`)).toEqual(COMPONENT_WITH_TEMPLATE_URL_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);
+    }));
+    it(`should edit inline 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-inline.component.ts`)).toEqual(COMPONENT_AFTER);
+    }));
+    it(`should NOT throw error if component without any template`, () => 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/no-template.component.ts`)).toEqual(COMPONENT_WITHOUT_ANY_TEMPLATE);
+    }));
+    it(`should add font style in angular.json`, () => 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(`angular.json`)).toEqual(`
+{
+  "version": 1,
+  "defaultProject": "demo",
+  "projects": {
+    "demo": {
+        "architect": {
+          "build": {
+            "options": {
+              "main": "test/main.ts",
+              "assets": [
+              {
+                "glob": "**/*",
+                "input": "node_modules/@taiga-ui/icons/src",
+                "output": "assets/taiga-ui/icons"
+              }
+            ],
+            "styles": [
+              "node_modules/@taiga-ui/core/styles/taiga-ui-fonts.less"
+            ]
+            }
+          }
+        }
+    }
+  }
+}`);
+    }));
+    afterEach(() => {
+        ng_morph_1.resetActiveProject();
+    });
+});
+function createMainFiles() {
+    ng_morph_1.createSourceFile(`test/app/no-template.component.ts`, COMPONENT_WITHOUT_ANY_TEMPLATE);
+    ng_morph_1.createSourceFile(`test/app/test.component.ts`, COMPONENT_WITH_TEMPLATE_URL);
+    ng_morph_1.createSourceFile(`test/app/test.template.html`, TEMPLATE_BEFORE);
+    ng_morph_1.createSourceFile(`test/app/test-inline.component.ts`, COMPONENT_BEFORE);
+    ng_morph_1.createSourceFile(`test/app/test.module.ts`, MODULE_BEFORE);
+    create_angular_json_1.createAngularJsonWithAssets();
+    ng_morph_1.createSourceFile(`package.json`, `{"dependencies": {"@angular/core": "~13.0.0"}}`);
+}

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

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

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

@@ -0,0 +1,100 @@
+"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 AFTER = `import { TuiAccountModule, TuiAccountComponent, TuiAccount, tuiAccountDelegate, TuiAccountDelegateComponent, CURRENCY_ICONS, TUI_ACCOUNT_PROJECTOR } from "@taiga-ui/proprietary-banking";
+
+@Component({
+    selector: 'tui-account-example-1',
+    template: '',
+})
+export class TuiAccountExample1 extends TuiAccountComponent {
+    readonly accountDelegate = tuiAccountDelegate;
+    readonly accounts: TuiAccount[] = [];
+    account = new FormControl(this.accounts[0]);
+
+    constructor(
+        @Inject(TUI_ACCOUNT_PROJECTOR)
+        readonly mapper: TuiMapper<T, TuiAccount>,
+    ) {}
+
+    getIcon({icon, currency = TuiCurrency.Ruble}: TuiAccount): PolymorpheusContent {
+        return icon ?? CURRENCY_ICONS[String(currency)] ?? \`tuiIconCurrencyDefaultMarker\`;
+    }
+}
+
+@NgModule({
+    imports: [TuiAccountModule],
+    declarations: [TuiAccountExample1],
+    entryComponents: [TuiAccountDelegateComponent]
+})
+export class ExampleTuiAccountModule {}
+`;
+const BEFORE = `import {
+    TuiAccountModule,
+    TuiAccountComponent,
+    TuiAccount,
+    tuiAccountDelegate,
+    TuiAccountDelegateComponent,
+    CURRENCY_ICONS,
+    TUI_ACCOUNT_PROJECTOR
+} from '@taiga-ui/proprietary-core';
+
+@Component({
+    selector: 'tui-account-example-1',
+    template: '',
+})
+export class TuiAccountExample1 extends TuiAccountComponent {
+    readonly accountDelegate = tuiAccountDelegate;
+    readonly accounts: TuiAccount[] = [];
+    account = new FormControl(this.accounts[0]);
+
+    constructor(
+        @Inject(TUI_ACCOUNT_PROJECTOR)
+        readonly mapper: TuiMapper<T, TuiAccount>,
+    ) {}
+
+    getIcon({icon, currency = TuiCurrency.Ruble}: TuiAccount): PolymorpheusContent {
+        return icon ?? CURRENCY_ICONS[String(currency)] ?? \`tuiIconCurrencyDefaultMarker\`;
+    }
+}
+
+@NgModule({
+    imports: [TuiAccountModule],
+    declarations: [TuiAccountExample1],
+    entryComponents: [TuiAccountDelegateComponent]
+})
+export class ExampleTuiAccountModule {}
+`;
+describe(`ng-update proprietary constants`, () => {
+    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 proprietary constants`, () => 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"}}`);
+}