From 1aa382d505962c260c6f8a871bdb7d58d2b8b1cb Mon Sep 17 00:00:00 2001 From: Tomas Rimkus Date: Tue, 1 Jul 2025 20:41:29 +0300 Subject: [PATCH 01/16] feat: angular v20 and NX v21 --- .gitignore | 4 +- .global/integration-app.style.scss | 8 +- apps/cdk-demo/main.ts | 6 +- apps/cdk-demo/project.json | 62 +- apps/cdk-demo/src/app.component.ts | 1 + apps/cdk-demo/src/app.module.ts | 4 +- .../src/samples/guide/guide.component.ts | 1 + .../src/samples/guide/guide.module.ts | 12 +- apps/cdk-demo/tsconfig.app.json | 8 +- apps/excel-demo/main.ts | 6 +- apps/excel-demo/polyfills.ts | 1 - apps/excel-demo/project.json | 61 +- apps/excel-demo/src/app.component.ts | 1 + apps/excel-demo/src/app.module.ts | 5 +- apps/excel-demo/tsconfig.app.json | 8 +- apps/flex-layout-demo/main.ts | 6 +- apps/flex-layout-demo/polyfills.ts | 1 - apps/flex-layout-demo/project.json | 62 +- apps/flex-layout-demo/src/app.component.ts | 1 + .../src/samples/guide/guide.component.ts | 1 + .../sample-first/sample-first.component.ts | 1 + .../sample-first/sample-first.module.ts | 7 - apps/flex-layout-demo/tsconfig.app.json | 8 +- apps/http-demo/main.ts | 6 +- apps/http-demo/project.json | 68 +- apps/http-demo/src/app.component.ts | 1 + .../src/samples/guide/guide.component.ts | 1 + .../src/samples/guide/guide.module.ts | 4 +- apps/http-demo/tsconfig.app.json | 8 +- apps/logger-demo/main.ts | 6 +- apps/logger-demo/polyfills.ts | 1 - apps/logger-demo/project.json | 62 +- apps/logger-demo/src/app.component.ts | 1 + apps/logger-demo/src/app.module.ts | 7 +- apps/logger-demo/tsconfig.app.json | 8 +- apps/ngxs-demo/main.ts | 6 +- apps/ngxs-demo/polyfills.ts | 1 - apps/ngxs-demo/project.json | 66 +- apps/ngxs-demo/src/amount/amount.component.ts | 1 + apps/ngxs-demo/src/app.component.ts | 1 + apps/ngxs-demo/src/app.module.ts | 3 +- .../src/article/article.component.ts | 1 + apps/ngxs-demo/src/article/article.module.ts | 2 +- .../dialog/article-dialog.component.ts | 1 + apps/ngxs-demo/src/count/count.component.ts | 1 + .../src/person/person.component.html | 10 +- apps/ngxs-demo/src/person/person.component.ts | 1 + apps/ngxs-demo/src/todo/todo.component.html | 13 +- apps/ngxs-demo/src/todo/todo.component.ts | 1 + apps/ngxs-demo/src/user/user.component.html | 14 +- apps/ngxs-demo/src/user/user.component.ts | 1 + apps/ngxs-demo/tsconfig.app.json | 8 +- apps/tooltip-demo/main.ts | 6 +- apps/tooltip-demo/project.json | 68 +- apps/tooltip-demo/src/app.component.ts | 1 + .../src/samples/guide/guide.component.ts | 1 + .../src/samples/guide/guide.module.ts | 4 +- apps/tooltip-demo/tsconfig.app.json | 8 +- apps/virtual-table-demo/main.ts | 6 +- apps/virtual-table-demo/project.json | 67 +- apps/virtual-table-demo/src/app.component.ts | 1 + .../src/samples/guide/guide.component.ts | 1 + .../sample-eight/sample-eight.component.html | 42 +- .../sample-eight/sample-eight.component.ts | 2 +- .../sample-eighteen.component.ts | 3 +- .../sample-eleven.component.html | 749 +- .../sample-eleven/sample-eleven.component.ts | 1 + .../sample-fifteen.component.ts | 1 + .../sample-first-second.component.html | 23 +- .../sample-first-second.component.ts | 1 + .../sample-first/sample-first.component.html | 13 +- .../sample-first/sample-first.component.ts | 25 +- .../sample-five/sample-five.component.html | 12 +- .../sample-five/sample-five.component.ts | 1 + .../context-menu-sample.component.html | 148 +- .../context-menu-sample.component.ts | 1 + .../sample-fourteen/not-found.component.ts | 1 + .../sample-fourteen.component.html | 44 +- .../sample-fourteen.component.ts | 6 +- .../sample-fourteen/sample-fourteen.module.ts | 8 +- .../sample-fourth/sample-fourth.component.ts | 1 + .../sample-night/sample-night.component.html | 62 +- .../sample-night/sample-night.component.ts | 1 + .../sample-second.component.html | 231 +- .../sample-second/sample-second.component.ts | 3 +- .../sample-seven/sample-seven.component.html | 69 +- .../sample-seven/sample-seven.component.ts | 1 + .../sample-seventeen.component.ts | 1 + .../sample-six/sample-six.component.ts | 1 + .../sample-sixteen.component.html | 38 +- .../sample-sixteen.component.ts | 1 + .../sample-third/sample-third.component.html | 11 +- .../sample-third/sample-third.component.ts | 15 +- .../sample-thirteen.component.html | 174 +- .../sample-thirteen.component.ts | 1 + .../sample-twelve/sample-twelve.component.ts | 1 + .../dialog-template.component.ts | 6 +- .../dialog-template.template.html | 25 +- .../shared/dialog/code-dialog.component.ts | 3 +- .../shared/dialog/code-dialog.template.html | 7 +- .../src/shared/shared.module.ts | 2 +- apps/virtual-table-demo/tsconfig.app.json | 8 +- jest.config.ts | 3 +- libs/cdk/array/by-property-value.ts | 4 +- libs/cdk/array/update-array.ts | 4 +- .../domain/types/suggestion-strategy-map.ts | 7 +- libs/cdk/decorators/attribute-boolean.ts | 4 +- .../amount-format/amount-format.directive.ts | 10 +- .../convert-case/convert-case.directive.ts | 2 +- .../disable-control.directive.ts | 2 +- .../initial-focus/initial-focus.directive.ts | 2 +- .../input-filter/input-filter.directive.ts | 5 +- .../split-string/split-string.directive.ts | 1 + .../trim-input/trim-input.directive.ts | 6 +- libs/cdk/entity/typings/entity-types.ts | 10 +- libs/cdk/excel/excel-builder.service.ts | 4 +- .../flex-bottom-indent.directive.ts | 2 +- .../directives/flex-column.directive.ts | 2 +- .../directives/flex-container.directive.ts | 2 +- .../directives/flex-end.directive.ts | 2 +- .../directives/flex-full-width.directive.ts | 2 +- .../directives/flex-inline.directive.ts | 2 +- .../directives/flex-item.directive.ts | 2 +- .../flex-justify-normal.directive.ts | 2 +- .../directives/flex-none.directive.ts | 2 +- .../flex-space-between.directive.ts | 2 +- .../directives/flex-start.directive.ts | 2 +- libs/cdk/function/is-function-like.ts | 2 +- libs/cdk/http/decorators/delete.decorator.ts | 2 +- libs/cdk/http/decorators/get.decorator.ts | 2 +- .../internal/ensure-descriptor-by-type.ts | 2 +- libs/cdk/http/decorators/patch.decorator.ts | 2 +- libs/cdk/http/decorators/post.decorator.ts | 2 +- libs/cdk/http/decorators/put.decorator.ts | 2 +- .../services/data-configurator.service.ts | 2 +- .../utils/ensure-path-by-path-variables.ts | 2 +- .../replace-leading-and-trailing-slashes.ts | 2 +- libs/cdk/ivy/utils/use-injector.ts | 2 +- libs/cdk/logger/logger.config.ts | 2 +- .../cdk/number/number-format/number-format.ts | 2 +- libs/cdk/object/deep-clone.ts | 2 +- libs/cdk/object/utils.ts | 2 +- libs/cdk/pipes/at/at.pipe.ts | 2 +- libs/cdk/pipes/brace/brace.pipe.ts | 2 +- .../coerce-boolean/coerce-boolean.pipe.ts | 2 +- .../date-to-native/date-to-native.pipe.ts | 2 +- .../declination-of-number.pipe.ts | 2 +- libs/cdk/pipes/deep-path/deep-path.pipe.ts | 4 +- .../pipes/default-value/default-value.pipe.ts | 2 +- .../detect-browser/detect-browser.pipe.ts | 14 +- .../pipes/display-item/display-item.pipe.ts | 4 +- .../entry-single-set/entry-single-set.pipe.ts | 2 +- libs/cdk/pipes/file-size/file-size.pipe.ts | 2 +- .../pipes/filter-unique/filter-unique.pipe.ts | 2 +- .../cdk/pipes/format-date/format-date.pipe.ts | 2 +- .../has-at-most-one-item.pipe.ts | 2 +- libs/cdk/pipes/has-items/has-items.pipe.ts | 2 +- .../has-many-items/has-many-items.pipe.ts | 2 +- .../pipes/has-no-items/has-no-items.pipe.ts | 2 +- .../pipes/has-one-item/has-one-item.pipe.ts | 2 +- libs/cdk/pipes/has/has.pipe.ts | 4 +- .../pipes/http-replacer/http-replacer.pipe.ts | 2 +- libs/cdk/pipes/includes/includes.pipe.ts | 2 +- libs/cdk/pipes/is-array/is-array.pipe.ts | 2 +- libs/cdk/pipes/is-filled/is-filled.pipe.ts | 2 +- libs/cdk/pipes/is-nil/is-nil.pipe.ts | 2 +- .../cdk/pipes/is-not-null/is-not-null.pipe.ts | 2 +- libs/cdk/pipes/is-object/is-object.pipe.ts | 2 +- libs/cdk/pipes/is-string/is-string.pipe.ts | 2 +- libs/cdk/pipes/join/join.pipe.ts | 2 +- .../mark-by-filter/mark-by-filter.pipe.ts | 2 +- .../merge-css-classes.pipe.ts | 2 +- libs/cdk/pipes/mutable/mutable-type.pipe.ts | 2 +- .../pipes/number-format/number-format.pipe.ts | 2 +- .../cdk/pipes/object-size/object-size.pipe.ts | 2 +- libs/cdk/pipes/safe/safe.pipe.ts | 10 +- .../take-first-item/take-first-item.pipe.ts | 2 +- .../take-second-item/take-second-item.pipe.ts | 2 +- libs/cdk/pipes/to-number/to-number.pipe.ts | 2 +- libs/cdk/pipes/to-string/to-string.pipe.ts | 2 +- libs/cdk/pipes/type-as/type-as.pipe.ts | 2 +- libs/cdk/project.json | 14 +- libs/cdk/stream/base64-to-array-buffer.ts | 2 +- libs/cdk/string/to-string-value.ts | 2 +- libs/cdk/string/trim.ts | 4 +- .../table-clipboard.service.ts | 2 +- libs/cdk/tests/date/date-suggestion.spec.ts | 10 +- .../decorators/attribute-boolean.spec.ts | 42 +- .../tests/directives/amount-format.spec.ts | 153 +- .../directives/filter/filter-config.spec.ts | 5 + .../directives/filter/filter-dynamic.spec.ts | 5 + .../directives/filter/filter-form.spec.ts | 2 + .../directives/filter/filter-input.spec.ts | 4 + .../filter/filter-simple-input.spec.ts | 6 + .../tests/directives/initial-focus.spec.ts | 8 +- .../cdk/tests/directives/split-string.spec.ts | 26 +- .../tests/directives/trim/trim-input.spec.ts | 4 +- .../forms/helpers/sync-control-directives.ts | 6 +- .../sync-control-value-interceptor.spec.ts | 175 +- .../http/decorators/all-decorators.spec.ts | 4 +- .../http/decorators/controller-root.spec.ts | 4 +- .../decorators/rest-client-decorator.spec.ts | 4 +- .../decorators/without-decorators.spec.ts | 4 +- .../limit-concurrency/unsubscribe.spec.ts | 10 +- libs/cdk/tests/http/users/http-emits.spec.ts | 4 +- .../http/users/http-events-client.spec.ts | 4 +- .../http/users/http-users-client.spec.ts | 20 +- .../tests/ivy/helpers/deep-inherit.spec.ts | 17 +- libs/cdk/tests/ivy/helpers/test-default.ts | 8 +- libs/cdk/tests/ivy/helpers/test-extending.ts | 10 +- libs/cdk/tests/ivy/helpers/test-token.ts | 1 + libs/cdk/tests/ivy/injection-utils.spec.ts | 6 +- .../tests/logger/helpers/test.component.ts | 1 + libs/cdk/tests/setup-jest.ts | 32 +- .../tests/validators/empty-validator.spec.ts | 6 +- .../selection-mock.component.spec.ts | 6 +- .../table-builder.component.spec.ts | 27 +- .../helpers/mocks/simple-mock.component.ts | 1 + .../helpers/mocks/template-mock.component.ts | 2 +- libs/cdk/tooltip/tooltip.directive.ts | 2 +- libs/cdk/typings/class-type.ts | 3 +- libs/cdk/typings/immutability.ts | 1 - libs/cdk/typings/leaves.ts | 3 +- libs/cdk/typings/paths.ts | 3 +- libs/cdk/utils/check-value-is-empty.ts | 2 +- libs/cdk/utils/index.ts | 2 +- libs/cdk/utils/is-nil.ts | 2 +- libs/cdk/utils/replace-units/replace-units.ts | 4 +- libs/cdk/validators/long.validator.ts | 2 +- .../drag-icon/drag-icon.component.ts | 1 + .../ngx-column/ngx-column.component.ts | 1 + .../ngx-context-menu-divider.component.ts | 1 + .../ngx-context-menu-item.component.html | 11 +- .../ngx-context-menu-item.component.ts | 1 + .../ngx-menu-content.component.html | 10 +- .../ngx-menu-content.component.ts | 1 + .../ngx-context-menu.component.html | 50 +- .../ngx-context-menu.component.ts | 1 + .../ngx-empty/ngx-empty.component.ts | 1 + .../ngx-filter-viewer.component.ts | 3 +- .../ngx-filter/ngx-filter.component.html | 52 +- .../ngx-filter/ngx-filter.component.ts | 1 + .../ngx-footer/ngx-footer.component.ts | 1 + .../ngx-header/ngx-header.component.html | 4 +- .../ngx-header/ngx-header.component.ts | 1 + .../ngx-options/ngx-options.component.ts | 1 + .../ngx-source-null.component.ts | 1 + .../table-cell/table-cell.component.html | 20 +- .../table-cell/table-cell.component.ts | 1 + .../table-tbody/table-tbody.component.html | 69 +- .../table-tbody/table-tbody.component.ts | 1 + .../table-thead/table-thead.component.html | 121 +- .../table-thead/table-thead.component.ts | 1 + .../abstract-modal-view-layer.directive.ts | 2 +- .../directives/auto-height.directive.ts | 10 +- .../directives/ngx-filter.directive.ts | 4 +- .../directives/observer-view.directive.ts | 2 +- .../rows/template-body-td.directive.ts | 2 +- .../rows/template-head-th.directive.ts | 2 +- .../directives/virtual-for.directive.ts | 2 +- .../operators/select-from-table-by.ts | 2 +- .../virtual-table/pipes/disable-row.pipe.ts | 2 +- .../pipes/get-client-height.pipe.ts | 6 +- .../virtual-table/pipes/get-free-size.pipe.ts | 4 +- .../pipes/map-to-table-entries.pipe.ts | 4 +- .../pipes/table-selected-items.pipe.ts | 2 +- .../services/filterable/filter.worker.ts | 70 +- .../services/selection/selection.service.ts | 4 +- .../services/sortable/sort.worker.ts | 2 +- .../table-builder.component.html | 218 +- .../virtual-table/table-builder.component.ts | 6 +- .../cdk/virtual-table/table-builder.module.ts | 2 +- .../zone.js/unpatch-zone/unpatch-events.ts | 2 +- .../decorators/data-action/data-action.ts | 2 +- .../services/ngxs-data-factory.service.ts | 5 +- .../method-args-registry.ts | 16 +- .../utils/state-context/get-store-options.ts | 2 +- libs/ngxs/project.json | 12 +- .../create-internal-ngxs-root-element.ts | 2 +- .../remove-internal-ngxs-root-element.ts | 2 +- .../platform/ngxs-app-mock.component.ts | 1 + .../counter-lifecycle.spec.ts | 6 +- .../common-extensions/registration.spec.ts | 4 +- .../ngxs/tests/immutability/immutable.spec.ts | 12 +- .../ngxs/tests/immutability/ngxs-data.spec.ts | 13 +- .../inheritance-extensions/children.spec.ts | 10 +- libs/ngxs/tests/setup-jest.ts | 19 +- .../tests/utils-extensions/mutable.spec.ts | 10 +- .../ngxs/typings/common/actions-properties.ts | 8 +- libs/ngxs/typings/index.ts | 3 - nx.json | 63 +- package-lock.json | 34357 +++++++++------- package.json | 78 +- setup-jest.ts | 15 +- tsconfig.json | 8 +- tsconfig.lib.json | 11 +- tsconfig.spec.json | 1 + 297 files changed, 22652 insertions(+), 16081 deletions(-) delete mode 100644 apps/excel-demo/polyfills.ts delete mode 100644 apps/flex-layout-demo/polyfills.ts delete mode 100644 apps/logger-demo/polyfills.ts delete mode 100644 apps/ngxs-demo/polyfills.ts diff --git a/.gitignore b/.gitignore index d64b3a45a..6c63120f6 100644 --- a/.gitignore +++ b/.gitignore @@ -22,4 +22,6 @@ junit.xml **/.cache**/ .nx/cache -.nx/workspace-data \ No newline at end of file +.nx/workspace-data +.cursor/rules/nx-rules.mdc +.github/instructions/nx.instructions.md diff --git a/.global/integration-app.style.scss b/.global/integration-app.style.scss index 8e61095ca..3ecc5a22c 100644 --- a/.global/integration-app.style.scss +++ b/.global/integration-app.style.scss @@ -54,9 +54,9 @@ a { } .dashboard__menu { - background: rgb(24, 75, 170); - color: #fff; - width: 300px; + --mat-sidenav-container-background-color: rgb(24, 75, 170); + --mat-sidenav-container-text-color: #fff; + --mat-sidenav-container-width: 300px; } .title { @@ -124,7 +124,7 @@ code { } .mat-divider { - border-top-color: rgba(241, 232, 232, 0.12); + --mat-divider-color: rgba(241, 232, 232, 0.12); width: 80%; margin: 0 auto !important; } diff --git a/apps/cdk-demo/main.ts b/apps/cdk-demo/main.ts index 7f04f8cab..52a54606f 100644 --- a/apps/cdk-demo/main.ts +++ b/apps/cdk-demo/main.ts @@ -1,5 +1,5 @@ import {enableProdMode} from '@angular/core'; -import {platformBrowserDynamic} from '@angular/platform-browser-dynamic'; +import {platformBrowser} from '@angular/platform-browser'; import {environment} from './environments/environment'; import {AppModule} from './src/app.module'; @@ -8,6 +8,6 @@ if (environment.production) { enableProdMode(); } -platformBrowserDynamic() +platformBrowser() .bootstrapModule(AppModule, {ngZoneEventCoalescing: true}) - .catch((error: Error): void => console.error(error)); + .catch((error: unknown): void => console.error(error)); diff --git a/apps/cdk-demo/project.json b/apps/cdk-demo/project.json index c39eded3f..9e4fedd7f 100644 --- a/apps/cdk-demo/project.json +++ b/apps/cdk-demo/project.json @@ -6,59 +6,59 @@ "tags": ["apps"], "targets": { "build": { - "executor": "@angular-devkit/build-angular:browser", + "executor": "@angular/build:application", "options": { - "outputPath": "dist/cdk-demo", - "tsConfig": "apps/cdk-demo/tsconfig.app.json", - "main": "apps/cdk-demo/main.ts", + "outputPath": { + "base": "dist/cdk-demo", + "browser": "" + }, "index": "apps/cdk-demo/index.html", + "browser": "apps/cdk-demo/main.ts", + "tsConfig": "apps/cdk-demo/tsconfig.app.json", + "polyfills": ["apps/cdk-demo/polyfills.ts"], + "inlineStyleLanguage": "scss", "assets": ["apps/cdk-demo/assets"], - "polyfills": "apps/cdk-demo/polyfills.ts", "styles": [".global/integration-app.style.scss", "apps/cdk-demo/styles.scss"], - "aot": false, - "vendorChunk": true, - "extractLicenses": false, - "buildOptimizer": false, - "sourceMap": true, - "optimization": false, - "namedChunks": true + "scripts": [], + "stylePreprocessorOptions": { + "includePaths": ["./src"], + "sass": { + "silenceDeprecations": ["import"] + } + } }, "configurations": { "production": { - "fileReplacements": [ + "budgets": [ { - "replace": "apps/cdk-demo/environments/environment.ts", - "with": "apps/cdk-demo/environments/environment.prod.ts" + "type": "initial", + "maximumWarning": "1mb", + "maximumError": "2mb" + }, + { + "type": "anyComponentStyle", + "maximumWarning": "6kb" } ], - "optimization": true, "outputHashing": "all", - "sourceMap": false, - "namedChunks": false, - "aot": true, - "extractLicenses": true, - "buildOptimizer": true - }, - "development": { "fileReplacements": [ { "replace": "apps/cdk-demo/environments/environment.ts", "with": "apps/cdk-demo/environments/environment.prod.ts" } - ], + ] + }, + "development": { "optimization": false, - "outputHashing": "all", - "aot": true + "extractLicenses": false, + "sourceMap": true } }, "defaultConfiguration": "production", - "outputs": ["{projectRoot}/dist/cdk-demo"] + "outputs": ["{options.outputPath}"] }, "serve": { - "executor": "@angular-devkit/build-angular:dev-server", - "options": { - "buildTarget": "cdk-demo:build" - }, + "executor": "@angular/build:dev-server", "configurations": { "production": { "buildTarget": "cdk-demo:build:production" diff --git a/apps/cdk-demo/src/app.component.ts b/apps/cdk-demo/src/app.component.ts index cf11b2953..1db9ed198 100644 --- a/apps/cdk-demo/src/app.component.ts +++ b/apps/cdk-demo/src/app.component.ts @@ -1,6 +1,7 @@ import {ChangeDetectionStrategy, Component} from '@angular/core'; @Component({ + standalone: false, selector: 'app-root', templateUrl: './app.component.html', changeDetection: ChangeDetectionStrategy.OnPush, diff --git a/apps/cdk-demo/src/app.module.ts b/apps/cdk-demo/src/app.module.ts index c114d4375..7b77a57d0 100644 --- a/apps/cdk-demo/src/app.module.ts +++ b/apps/cdk-demo/src/app.module.ts @@ -1,4 +1,4 @@ -import {HttpClientModule} from '@angular/common/http'; +import {provideHttpClient} from '@angular/common/http'; import {NgModule} from '@angular/core'; import {MatListModule} from '@angular/material/list'; import {MatSidenavModule} from '@angular/material/sidenav'; @@ -15,13 +15,13 @@ import {AppRoutingModule} from './app-routing.module'; AppRoutingModule, BrowserAnimationsModule, BrowserModule, - HttpClientModule, MatListModule, MatSidenavModule, MatToolbarModule, AmountFormatModule.forRoot(), ], declarations: [AppComponent], + providers: [provideHttpClient()], bootstrap: [AppComponent], }) export class AppModule {} diff --git a/apps/cdk-demo/src/samples/guide/guide.component.ts b/apps/cdk-demo/src/samples/guide/guide.component.ts index 07c9caddc..e301b4b06 100644 --- a/apps/cdk-demo/src/samples/guide/guide.component.ts +++ b/apps/cdk-demo/src/samples/guide/guide.component.ts @@ -4,6 +4,7 @@ import {FormBuilder, FormControl, FormGroup} from '@angular/forms'; import {REG_EXP_ONLY_NUMBERS} from './properties/constants'; @Component({ + standalone: false, selector: 'guide', templateUrl: './guide.component.html', styleUrls: ['./guide.component.scss'], diff --git a/apps/cdk-demo/src/samples/guide/guide.module.ts b/apps/cdk-demo/src/samples/guide/guide.module.ts index 398524fd1..2d334f7d6 100644 --- a/apps/cdk-demo/src/samples/guide/guide.module.ts +++ b/apps/cdk-demo/src/samples/guide/guide.module.ts @@ -13,12 +13,6 @@ import {REG_EXP_ONLY_NUMBERS} from './properties/constants'; @NgModule({ imports: [ AmountFormatModule, - RouterModule.forChild([ - { - path: '', - component: GuideComponent, - }, - ]), CommonModule, MatIconModule, MatInputModule, @@ -27,6 +21,12 @@ import {REG_EXP_ONLY_NUMBERS} from './properties/constants'; InputFilterModule.forChild({ default: REG_EXP_ONLY_NUMBERS, }), + RouterModule.forChild([ + { + path: '', + component: GuideComponent, + }, + ]), ], declarations: [GuideComponent], }) diff --git a/apps/cdk-demo/tsconfig.app.json b/apps/cdk-demo/tsconfig.app.json index 5ede5f85d..c8482f8f1 100644 --- a/apps/cdk-demo/tsconfig.app.json +++ b/apps/cdk-demo/tsconfig.app.json @@ -1,4 +1,10 @@ { "extends": "../../tsconfig.json", - "include": ["main.ts", "polyfills.ts"] + "compilerOptions": { + "types": [] + }, + "include": ["main.ts", "polyfills.ts"], + "angularCompilerOptions": { + "compilationMode": "full" + } } diff --git a/apps/excel-demo/main.ts b/apps/excel-demo/main.ts index bcc97cfbe..d6e5a8abf 100644 --- a/apps/excel-demo/main.ts +++ b/apps/excel-demo/main.ts @@ -1,5 +1,5 @@ import {enableProdMode} from '@angular/core'; -import {platformBrowserDynamic} from '@angular/platform-browser-dynamic'; +import {platformBrowser} from '@angular/platform-browser'; import {environment} from './environments/environment'; import {AppModule} from './src/app.module'; @@ -8,6 +8,6 @@ if (environment.production) { enableProdMode(); } -platformBrowserDynamic() +platformBrowser() .bootstrapModule(AppModule) - .catch((error: Error): void => console.error(error)); + .catch((error: unknown): void => console.error(error)); diff --git a/apps/excel-demo/polyfills.ts b/apps/excel-demo/polyfills.ts deleted file mode 100644 index aa09a9ff6..000000000 --- a/apps/excel-demo/polyfills.ts +++ /dev/null @@ -1 +0,0 @@ -import 'zone.js'; diff --git a/apps/excel-demo/project.json b/apps/excel-demo/project.json index 9ad8adf99..0bbbc497a 100644 --- a/apps/excel-demo/project.json +++ b/apps/excel-demo/project.json @@ -6,58 +6,59 @@ "tags": ["apps"], "targets": { "build": { - "executor": "@angular-devkit/build-angular:browser", + "executor": "@angular/build:application", "options": { - "outputPath": "dist/excel-demo", - "tsConfig": "apps/excel-demo/tsconfig.app.json", - "main": "apps/excel-demo/main.ts", + "outputPath": { + "base": "dist/excel-demo", + "browser": "" + }, "index": "apps/excel-demo/index.html", + "browser": "apps/excel-demo/main.ts", + "tsConfig": "apps/excel-demo/tsconfig.app.json", + "polyfills": ["zone.js"], + "inlineStyleLanguage": "scss", "assets": ["apps/excel-demo/assets"], - "polyfills": "apps/excel-demo/polyfills.ts", "styles": [".global/integration-app.style.scss", "apps/excel-demo/styles.css"], - "aot": false, - "vendorChunk": true, - "extractLicenses": false, - "buildOptimizer": false, - "sourceMap": true, - "optimization": false, - "namedChunks": true + "scripts": [], + "stylePreprocessorOptions": { + "includePaths": ["./src"], + "sass": { + "silenceDeprecations": ["import"] + } + } }, "configurations": { "production": { - "fileReplacements": [ + "budgets": [ { - "replace": "apps/excel-demo/environments/environment.ts", - "with": "apps/excel-demo/environments/environment.prod.ts" + "type": "initial", + "maximumWarning": "1mb", + "maximumError": "2mb" + }, + { + "type": "anyComponentStyle", + "maximumWarning": "6kb" } ], - "optimization": true, "outputHashing": "all", - "sourceMap": false, - "namedChunks": false, - "aot": true, - "extractLicenses": true, - "buildOptimizer": true - }, - "development": { "fileReplacements": [ { "replace": "apps/excel-demo/environments/environment.ts", "with": "apps/excel-demo/environments/environment.prod.ts" } - ], + ] + }, + "development": { "optimization": false, - "aot": true + "extractLicenses": false, + "sourceMap": true } }, "defaultConfiguration": "production", - "outputs": ["{projectRoot}/dist/excel-demo"] + "outputs": ["{options.outputPath}"] }, "serve": { - "executor": "@angular-devkit/build-angular:dev-server", - "options": { - "buildTarget": "excel-demo:build" - }, + "executor": "@angular/build:dev-server", "configurations": { "production": { "buildTarget": "excel-demo:build:production" diff --git a/apps/excel-demo/src/app.component.ts b/apps/excel-demo/src/app.component.ts index b306238e3..b14f8621a 100644 --- a/apps/excel-demo/src/app.component.ts +++ b/apps/excel-demo/src/app.component.ts @@ -11,6 +11,7 @@ interface A { } @Component({ + standalone: false, selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'], diff --git a/apps/excel-demo/src/app.module.ts b/apps/excel-demo/src/app.module.ts index a6b909b6e..10f9ca869 100644 --- a/apps/excel-demo/src/app.module.ts +++ b/apps/excel-demo/src/app.module.ts @@ -1,4 +1,4 @@ -import {HttpClient, HttpClientModule} from '@angular/common/http'; +import {HttpClient, provideHttpClient} from '@angular/common/http'; import {NgModule} from '@angular/core'; import {MatButtonModule} from '@angular/material/button'; import {MatListModule} from '@angular/material/list'; @@ -25,7 +25,6 @@ export function createTranslateLoader(http: HttpClient): TranslateHttpLoader { imports: [ BrowserAnimationsModule, BrowserModule, - HttpClientModule, MatButtonModule, MatListModule, MatSidenavModule, @@ -41,7 +40,7 @@ export function createTranslateLoader(http: HttpClient): TranslateHttpLoader { ExcelBuilderModule.forRoot(), ], declarations: [AppComponent], - providers: [EXCEL_BUILDER_NGX_TRANSLATE_FALLBACK_PROVIDER], + providers: [EXCEL_BUILDER_NGX_TRANSLATE_FALLBACK_PROVIDER, provideHttpClient()], bootstrap: [AppComponent], }) export class AppModule {} diff --git a/apps/excel-demo/tsconfig.app.json b/apps/excel-demo/tsconfig.app.json index 5ede5f85d..c8482f8f1 100644 --- a/apps/excel-demo/tsconfig.app.json +++ b/apps/excel-demo/tsconfig.app.json @@ -1,4 +1,10 @@ { "extends": "../../tsconfig.json", - "include": ["main.ts", "polyfills.ts"] + "compilerOptions": { + "types": [] + }, + "include": ["main.ts", "polyfills.ts"], + "angularCompilerOptions": { + "compilationMode": "full" + } } diff --git a/apps/flex-layout-demo/main.ts b/apps/flex-layout-demo/main.ts index bcc97cfbe..d6e5a8abf 100644 --- a/apps/flex-layout-demo/main.ts +++ b/apps/flex-layout-demo/main.ts @@ -1,5 +1,5 @@ import {enableProdMode} from '@angular/core'; -import {platformBrowserDynamic} from '@angular/platform-browser-dynamic'; +import {platformBrowser} from '@angular/platform-browser'; import {environment} from './environments/environment'; import {AppModule} from './src/app.module'; @@ -8,6 +8,6 @@ if (environment.production) { enableProdMode(); } -platformBrowserDynamic() +platformBrowser() .bootstrapModule(AppModule) - .catch((error: Error): void => console.error(error)); + .catch((error: unknown): void => console.error(error)); diff --git a/apps/flex-layout-demo/polyfills.ts b/apps/flex-layout-demo/polyfills.ts deleted file mode 100644 index aa09a9ff6..000000000 --- a/apps/flex-layout-demo/polyfills.ts +++ /dev/null @@ -1 +0,0 @@ -import 'zone.js'; diff --git a/apps/flex-layout-demo/project.json b/apps/flex-layout-demo/project.json index 72af6c053..276449759 100644 --- a/apps/flex-layout-demo/project.json +++ b/apps/flex-layout-demo/project.json @@ -6,57 +6,59 @@ "tags": ["apps"], "targets": { "build": { - "executor": "@angular-devkit/build-angular:browser", + "executor": "@angular/build:application", "options": { - "outputPath": "dist/flex-layout-demo", - "tsConfig": "apps/flex-layout-demo/tsconfig.app.json", - "main": "apps/flex-layout-demo/main.ts", + "outputPath": { + "base": "dist/flex-layout-demo", + "browser": "" + }, "index": "apps/flex-layout-demo/index.html", + "browser": "apps/flex-layout-demo/main.ts", + "tsConfig": "apps/flex-layout-demo/tsconfig.app.json", + "polyfills": ["zone.js"], + "inlineStyleLanguage": "scss", "assets": ["apps/flex-layout-demo/assets"], - "polyfills": "apps/flex-layout-demo/polyfills.ts", "styles": [".global/integration-app.style.scss", "apps/flex-layout-demo/styles.scss"], - "aot": false, - "vendorChunk": true, - "extractLicenses": false, - "buildOptimizer": false, - "sourceMap": true, - "optimization": false, - "namedChunks": true + "scripts": [], + "stylePreprocessorOptions": { + "includePaths": ["./src"], + "sass": { + "silenceDeprecations": ["import"] + } + } }, "configurations": { "production": { - "fileReplacements": [ + "budgets": [ { - "replace": "apps/flex-layout-demo/environments/environment.ts", - "with": "apps/flex-layout-demo/environments/environment.prod.ts" + "type": "initial", + "maximumWarning": "1mb", + "maximumError": "2mb" + }, + { + "type": "anyComponentStyle", + "maximumWarning": "6kb" } ], - "optimization": true, "outputHashing": "all", - "sourceMap": false, - "namedChunks": false, - "aot": true, - "extractLicenses": true, - "buildOptimizer": true - }, - "development": { "fileReplacements": [ { "replace": "apps/flex-layout-demo/environments/environment.ts", "with": "apps/flex-layout-demo/environments/environment.prod.ts" } - ], - "optimization": false + ] + }, + "development": { + "optimization": false, + "extractLicenses": false, + "sourceMap": true } }, "defaultConfiguration": "production", - "outputs": ["{projectRoot}/dist/flex-layout-demo"] + "outputs": ["{options.outputPath}"] }, "serve": { - "executor": "@angular-devkit/build-angular:dev-server", - "options": { - "buildTarget": "flex-layout-demo:build" - }, + "executor": "@angular/build:dev-server", "configurations": { "production": { "buildTarget": "flex-layout-demo:build:production" diff --git a/apps/flex-layout-demo/src/app.component.ts b/apps/flex-layout-demo/src/app.component.ts index cf11b2953..1db9ed198 100644 --- a/apps/flex-layout-demo/src/app.component.ts +++ b/apps/flex-layout-demo/src/app.component.ts @@ -1,6 +1,7 @@ import {ChangeDetectionStrategy, Component} from '@angular/core'; @Component({ + standalone: false, selector: 'app-root', templateUrl: './app.component.html', changeDetection: ChangeDetectionStrategy.OnPush, diff --git a/apps/flex-layout-demo/src/samples/guide/guide.component.ts b/apps/flex-layout-demo/src/samples/guide/guide.component.ts index 8d2d777fb..30e206e7d 100644 --- a/apps/flex-layout-demo/src/samples/guide/guide.component.ts +++ b/apps/flex-layout-demo/src/samples/guide/guide.component.ts @@ -3,6 +3,7 @@ import {AfterViewInit, ChangeDetectionStrategy, Component} from '@angular/core'; declare const hljs: any; @Component({ + standalone: false, selector: 'guide', templateUrl: './guide.component.html', changeDetection: ChangeDetectionStrategy.OnPush, diff --git a/apps/flex-layout-demo/src/samples/sample-first/sample-first.component.ts b/apps/flex-layout-demo/src/samples/sample-first/sample-first.component.ts index e89438722..622688ddc 100644 --- a/apps/flex-layout-demo/src/samples/sample-first/sample-first.component.ts +++ b/apps/flex-layout-demo/src/samples/sample-first/sample-first.component.ts @@ -8,6 +8,7 @@ import { import {hlJsCode} from '../../../../../.global/utils/hljs-code'; @Component({ + standalone: false, selector: 'sample-first', templateUrl: './sample-first.component.html', styleUrls: ['./sample-first.component.scss'], diff --git a/apps/flex-layout-demo/src/samples/sample-first/sample-first.module.ts b/apps/flex-layout-demo/src/samples/sample-first/sample-first.module.ts index 716f2829a..4783078b3 100644 --- a/apps/flex-layout-demo/src/samples/sample-first/sample-first.module.ts +++ b/apps/flex-layout-demo/src/samples/sample-first/sample-first.module.ts @@ -3,7 +3,6 @@ import {NgModule} from '@angular/core'; import {MatFormFieldModule} from '@angular/material/form-field'; import {MatInputModule} from '@angular/material/input'; import {MatToolbarModule} from '@angular/material/toolbar'; -import {RouterModule} from '@angular/router'; import {FlexLayoutModule} from '@angular-ru/cdk/flex-layout'; import {SampleFirstComponent} from './sample-first.component'; @@ -11,12 +10,6 @@ import {SampleFirstComponent} from './sample-first.component'; @NgModule({ imports: [ CommonModule, - RouterModule.forChild([ - { - path: '', - component: SampleFirstComponent, - }, - ]), FlexLayoutModule, MatFormFieldModule, MatInputModule, diff --git a/apps/flex-layout-demo/tsconfig.app.json b/apps/flex-layout-demo/tsconfig.app.json index 5ede5f85d..c8482f8f1 100644 --- a/apps/flex-layout-demo/tsconfig.app.json +++ b/apps/flex-layout-demo/tsconfig.app.json @@ -1,4 +1,10 @@ { "extends": "../../tsconfig.json", - "include": ["main.ts", "polyfills.ts"] + "compilerOptions": { + "types": [] + }, + "include": ["main.ts", "polyfills.ts"], + "angularCompilerOptions": { + "compilationMode": "full" + } } diff --git a/apps/http-demo/main.ts b/apps/http-demo/main.ts index 7f04f8cab..52a54606f 100644 --- a/apps/http-demo/main.ts +++ b/apps/http-demo/main.ts @@ -1,5 +1,5 @@ import {enableProdMode} from '@angular/core'; -import {platformBrowserDynamic} from '@angular/platform-browser-dynamic'; +import {platformBrowser} from '@angular/platform-browser'; import {environment} from './environments/environment'; import {AppModule} from './src/app.module'; @@ -8,6 +8,6 @@ if (environment.production) { enableProdMode(); } -platformBrowserDynamic() +platformBrowser() .bootstrapModule(AppModule, {ngZoneEventCoalescing: true}) - .catch((error: Error): void => console.error(error)); + .catch((error: unknown): void => console.error(error)); diff --git a/apps/http-demo/project.json b/apps/http-demo/project.json index 15ee06493..a436393e5 100644 --- a/apps/http-demo/project.json +++ b/apps/http-demo/project.json @@ -1,62 +1,64 @@ { - "name": "http-demo-demo", + "name": "http-demo", "$schema": "../../node_modules/nx/schemas/project-schema.json", "sourceRoot": "apps/http-demo/", "projectType": "application", "tags": ["apps"], "targets": { "build": { - "executor": "@angular-devkit/build-angular:browser", + "executor": "@angular/build:application", "options": { - "outputPath": "dist/http-demo", - "tsConfig": "apps/http-demo/tsconfig.app.json", - "main": "apps/http-demo/main.ts", + "outputPath": { + "base": "dist/http-demo", + "browser": "" + }, "index": "apps/http-demo/index.html", + "browser": "apps/http-demo/main.ts", + "tsConfig": "apps/http-demo/tsconfig.app.json", + "polyfills": ["apps/http-demo/polyfills.ts"], + "inlineStyleLanguage": "scss", "assets": ["apps/http-demo/assets"], - "polyfills": "apps/http-demo/polyfills.ts", "styles": [".global/integration-app.style.scss", "apps/http-demo/styles.scss"], - "aot": false, - "vendorChunk": true, - "extractLicenses": false, - "buildOptimizer": false, - "sourceMap": true, - "optimization": false, - "namedChunks": true + "scripts": [], + "stylePreprocessorOptions": { + "includePaths": ["./src"], + "sass": { + "silenceDeprecations": ["import"] + } + } }, "configurations": { "production": { - "fileReplacements": [ + "budgets": [ { - "replace": "apps/http-demo/environments/environment.ts", - "with": "apps/http-demo/environments/environment.prod.ts" + "type": "initial", + "maximumWarning": "1mb", + "maximumError": "2mb" + }, + { + "type": "anyComponentStyle", + "maximumWarning": "6kb" } ], - "optimization": true, "outputHashing": "all", - "sourceMap": false, - "namedChunks": false, - "aot": true, - "extractLicenses": true, - "buildOptimizer": true - }, - "development": { "fileReplacements": [ { - "replace": "apps/flex-layout-demo/environments/environment.ts", - "with": "apps/flex-layout-demo/environments/environment.prod.ts" + "replace": "apps/http-demo/environments/environment.ts", + "with": "apps/http-demo/environments/environment.prod.ts" } - ], - "optimization": false + ] + }, + "development": { + "optimization": false, + "extractLicenses": false, + "sourceMap": true } }, "defaultConfiguration": "production", - "outputs": ["{projectRoot}/dist/http-demo"] + "outputs": ["{options.outputPath}"] }, "serve": { - "executor": "@angular-devkit/build-angular:dev-server", - "options": { - "buildTarget": "http-demo:build" - }, + "executor": "@angular/build:dev-server", "configurations": { "production": { "buildTarget": "http-demo:build:production" diff --git a/apps/http-demo/src/app.component.ts b/apps/http-demo/src/app.component.ts index cf11b2953..1db9ed198 100644 --- a/apps/http-demo/src/app.component.ts +++ b/apps/http-demo/src/app.component.ts @@ -1,6 +1,7 @@ import {ChangeDetectionStrategy, Component} from '@angular/core'; @Component({ + standalone: false, selector: 'app-root', templateUrl: './app.component.html', changeDetection: ChangeDetectionStrategy.OnPush, diff --git a/apps/http-demo/src/samples/guide/guide.component.ts b/apps/http-demo/src/samples/guide/guide.component.ts index 807cf4c95..0a5e835ec 100644 --- a/apps/http-demo/src/samples/guide/guide.component.ts +++ b/apps/http-demo/src/samples/guide/guide.component.ts @@ -5,6 +5,7 @@ import {takeUntil} from 'rxjs/operators'; import {ApiClient} from '../../services/clients/api.client'; @Component({ + standalone: false, selector: 'guide', templateUrl: './guide.component.html', changeDetection: ChangeDetectionStrategy.OnPush, diff --git a/apps/http-demo/src/samples/guide/guide.module.ts b/apps/http-demo/src/samples/guide/guide.module.ts index 801dfb16c..85caf3035 100644 --- a/apps/http-demo/src/samples/guide/guide.module.ts +++ b/apps/http-demo/src/samples/guide/guide.module.ts @@ -9,14 +9,14 @@ import {GuideComponent} from './guide.component'; @NgModule({ imports: [ CommonModule, + MatIconModule, + ScrollingModule, RouterModule.forChild([ { path: '', component: GuideComponent, }, ]), - MatIconModule, - ScrollingModule, ], declarations: [GuideComponent], }) diff --git a/apps/http-demo/tsconfig.app.json b/apps/http-demo/tsconfig.app.json index 5ede5f85d..c8482f8f1 100644 --- a/apps/http-demo/tsconfig.app.json +++ b/apps/http-demo/tsconfig.app.json @@ -1,4 +1,10 @@ { "extends": "../../tsconfig.json", - "include": ["main.ts", "polyfills.ts"] + "compilerOptions": { + "types": [] + }, + "include": ["main.ts", "polyfills.ts"], + "angularCompilerOptions": { + "compilationMode": "full" + } } diff --git a/apps/logger-demo/main.ts b/apps/logger-demo/main.ts index bcc97cfbe..d6e5a8abf 100644 --- a/apps/logger-demo/main.ts +++ b/apps/logger-demo/main.ts @@ -1,5 +1,5 @@ import {enableProdMode} from '@angular/core'; -import {platformBrowserDynamic} from '@angular/platform-browser-dynamic'; +import {platformBrowser} from '@angular/platform-browser'; import {environment} from './environments/environment'; import {AppModule} from './src/app.module'; @@ -8,6 +8,6 @@ if (environment.production) { enableProdMode(); } -platformBrowserDynamic() +platformBrowser() .bootstrapModule(AppModule) - .catch((error: Error): void => console.error(error)); + .catch((error: unknown): void => console.error(error)); diff --git a/apps/logger-demo/polyfills.ts b/apps/logger-demo/polyfills.ts deleted file mode 100644 index aa09a9ff6..000000000 --- a/apps/logger-demo/polyfills.ts +++ /dev/null @@ -1 +0,0 @@ -import 'zone.js'; diff --git a/apps/logger-demo/project.json b/apps/logger-demo/project.json index e48977a3d..52b378574 100644 --- a/apps/logger-demo/project.json +++ b/apps/logger-demo/project.json @@ -6,22 +6,26 @@ "tags": ["apps"], "targets": { "build": { - "executor": "@angular-devkit/build-angular:browser", + "executor": "@angular/build:application", "options": { - "outputPath": "dist/logger-demo", - "tsConfig": "apps/logger-demo/tsconfig.app.json", - "main": "apps/logger-demo/main.ts", + "outputPath": { + "base": "dist/logger-demo", + "browser": "" + }, "index": "apps/logger-demo/index.html", + "browser": "apps/logger-demo/main.ts", + "tsConfig": "apps/logger-demo/tsconfig.app.json", + "polyfills": ["zone.js"], + "inlineStyleLanguage": "scss", "assets": ["apps/logger-demo/assets"], - "polyfills": "apps/logger-demo/polyfills.ts", "styles": [".global/integration-app.style.scss", "apps/logger-demo/styles.css"], - "aot": false, - "vendorChunk": true, - "extractLicenses": false, - "buildOptimizer": false, - "sourceMap": true, - "optimization": false, - "namedChunks": true + "scripts": [], + "stylePreprocessorOptions": { + "includePaths": ["./src"], + "sass": { + "silenceDeprecations": ["import"] + } + } }, "configurations": { "production": { @@ -31,32 +35,30 @@ "with": "apps/logger-demo/environments/environment.prod.ts" } ], - "optimization": true, - "outputHashing": "all", - "sourceMap": false, - "namedChunks": false, - "aot": true, - "extractLicenses": true, - "buildOptimizer": true - }, - "development": { - "fileReplacements": [ + "budgets": [ + { + "type": "initial", + "maximumWarning": "1mb", + "maximumError": "2mb" + }, { - "replace": "apps/flex-layout-demo/environments/environment.ts", - "with": "apps/flex-layout-demo/environments/environment.prod.ts" + "type": "anyComponentStyle", + "maximumWarning": "6kb" } ], - "optimization": false + "outputHashing": "all" + }, + "development": { + "optimization": false, + "extractLicenses": false, + "sourceMap": true } }, "defaultConfiguration": "production", - "outputs": ["{projectRoot}/dist/logger-demo"] + "outputs": ["{options.outputPath}"] }, "serve": { - "executor": "@angular-devkit/build-angular:dev-server", - "options": { - "buildTarget": "logger-demo:build" - }, + "executor": "@angular/build:dev-server", "configurations": { "production": { "buildTarget": "logger-demo:build:production" diff --git a/apps/logger-demo/src/app.component.ts b/apps/logger-demo/src/app.component.ts index d5fbf64bc..69e4e089d 100644 --- a/apps/logger-demo/src/app.component.ts +++ b/apps/logger-demo/src/app.component.ts @@ -20,6 +20,7 @@ import {ChangeDetectionStrategy, Component, ViewEncapsulation} from '@angular/co templateUrl: './app.component.html', styleUrls: ['./app.component.css'], changeDetection: ChangeDetectionStrategy.OnPush, + standalone: false, encapsulation: ViewEncapsulation.None, }) export class AppComponent { diff --git a/apps/logger-demo/src/app.module.ts b/apps/logger-demo/src/app.module.ts index e1cd9a0f7..eb64fbfd9 100644 --- a/apps/logger-demo/src/app.module.ts +++ b/apps/logger-demo/src/app.module.ts @@ -1,4 +1,4 @@ -import {HttpClientModule} from '@angular/common/http'; +import {provideHttpClient} from '@angular/common/http'; import {NgModule} from '@angular/core'; import {BrowserModule} from '@angular/platform-browser'; import {LoggerModule} from '@angular-ru/cdk/logger'; @@ -9,6 +9,7 @@ import {AppComponent} from './app.component'; @NgModule({ imports: [ + BrowserModule, LoggerModule.forRoot( isTrue(environment.useConfig) ? { @@ -26,11 +27,9 @@ import {AppComponent} from './app.component'; } : {}, ), - BrowserModule, - HttpClientModule, ], declarations: [AppComponent], - providers: [], + providers: [provideHttpClient()], bootstrap: [AppComponent], }) export class AppModule {} diff --git a/apps/logger-demo/tsconfig.app.json b/apps/logger-demo/tsconfig.app.json index 5ede5f85d..c8482f8f1 100644 --- a/apps/logger-demo/tsconfig.app.json +++ b/apps/logger-demo/tsconfig.app.json @@ -1,4 +1,10 @@ { "extends": "../../tsconfig.json", - "include": ["main.ts", "polyfills.ts"] + "compilerOptions": { + "types": [] + }, + "include": ["main.ts", "polyfills.ts"], + "angularCompilerOptions": { + "compilationMode": "full" + } } diff --git a/apps/ngxs-demo/main.ts b/apps/ngxs-demo/main.ts index bcc97cfbe..d6e5a8abf 100644 --- a/apps/ngxs-demo/main.ts +++ b/apps/ngxs-demo/main.ts @@ -1,5 +1,5 @@ import {enableProdMode} from '@angular/core'; -import {platformBrowserDynamic} from '@angular/platform-browser-dynamic'; +import {platformBrowser} from '@angular/platform-browser'; import {environment} from './environments/environment'; import {AppModule} from './src/app.module'; @@ -8,6 +8,6 @@ if (environment.production) { enableProdMode(); } -platformBrowserDynamic() +platformBrowser() .bootstrapModule(AppModule) - .catch((error: Error): void => console.error(error)); + .catch((error: unknown): void => console.error(error)); diff --git a/apps/ngxs-demo/polyfills.ts b/apps/ngxs-demo/polyfills.ts deleted file mode 100644 index aa09a9ff6..000000000 --- a/apps/ngxs-demo/polyfills.ts +++ /dev/null @@ -1 +0,0 @@ -import 'zone.js'; diff --git a/apps/ngxs-demo/project.json b/apps/ngxs-demo/project.json index bc16fce25..ef99d46d8 100644 --- a/apps/ngxs-demo/project.json +++ b/apps/ngxs-demo/project.json @@ -6,57 +6,59 @@ "tags": ["apps"], "targets": { "build": { - "executor": "@angular-devkit/build-angular:browser", + "executor": "@angular/build:application", "options": { - "outputPath": "dist/ngxs-demo", - "tsConfig": "apps/ngxs-demo/tsconfig.app.json", - "main": "apps/ngxs-demo/main.ts", + "outputPath": { + "base": "dist/ngxs-demo", + "browser": "" + }, "index": "apps/ngxs-demo/index.html", + "browser": "apps/ngxs-demo/main.ts", + "tsConfig": "apps/ngxs-demo/tsconfig.app.json", + "polyfills": ["zone.js"], + "inlineStyleLanguage": "scss", "assets": ["apps/ngxs-demo/assets"], - "polyfills": "apps/ngxs-demo/polyfills.ts", "styles": [".global/integration-app.style.scss", "apps/ngxs-demo/styles.scss"], - "aot": false, - "vendorChunk": true, - "extractLicenses": false, - "buildOptimizer": false, - "sourceMap": true, - "optimization": false, - "namedChunks": true + "scripts": [], + "stylePreprocessorOptions": { + "includePaths": ["./src"], + "sass": { + "silenceDeprecations": ["import"] + } + } }, "configurations": { "production": { - "fileReplacements": [ + "budgets": [ { - "replace": "apps/ngxs-demo/environments/environment.ts", - "with": "apps/ngxs-demo/environments/environment.prod.ts" + "type": "initial", + "maximumWarning": "1mb", + "maximumError": "2mb" + }, + { + "type": "anyComponentStyle", + "maximumWarning": "6kb" } ], - "optimization": true, "outputHashing": "all", - "sourceMap": false, - "namedChunks": false, - "aot": true, - "extractLicenses": true, - "buildOptimizer": true - }, - "development": { "fileReplacements": [ { - "replace": "apps/flex-layout-demo/environments/environment.ts", - "with": "apps/flex-layout-demo/environments/environment.prod.ts" + "replace": "apps/ngxs-demo/environments/environment.ts", + "with": "apps/ngxs-demo/environments/environment.prod.ts" } - ], - "optimization": false + ] + }, + "development": { + "optimization": false, + "extractLicenses": false, + "sourceMap": true } }, "defaultConfiguration": "production", - "outputs": ["{projectRoot}/dist/ngxs-demo"] + "outputs": ["{options.outputPath}"] }, "serve": { - "executor": "@angular-devkit/build-angular:dev-server", - "options": { - "buildTarget": "ngxs-demo:build" - }, + "executor": "@angular/build:dev-server", "configurations": { "production": { "buildTarget": "ngxs-demo:build:production" diff --git a/apps/ngxs-demo/src/amount/amount.component.ts b/apps/ngxs-demo/src/amount/amount.component.ts index d495424b2..284340a1b 100644 --- a/apps/ngxs-demo/src/amount/amount.component.ts +++ b/apps/ngxs-demo/src/amount/amount.component.ts @@ -4,6 +4,7 @@ import {AmountState} from './amount.state'; import {PriceState} from './price.state'; @Component({ + standalone: false, selector: 'amount', templateUrl: './amount.component.html', changeDetection: ChangeDetectionStrategy.OnPush, diff --git a/apps/ngxs-demo/src/app.component.ts b/apps/ngxs-demo/src/app.component.ts index 6f0315c13..7895e35b6 100644 --- a/apps/ngxs-demo/src/app.component.ts +++ b/apps/ngxs-demo/src/app.component.ts @@ -3,6 +3,7 @@ import {Store} from '@ngxs/store'; import {Observable} from 'rxjs'; @Component({ + standalone: false, selector: 'app-root', templateUrl: './app.component.html', changeDetection: ChangeDetectionStrategy.OnPush, diff --git a/apps/ngxs-demo/src/app.module.ts b/apps/ngxs-demo/src/app.module.ts index 42c90ccf9..c033d9c48 100644 --- a/apps/ngxs-demo/src/app.module.ts +++ b/apps/ngxs-demo/src/app.module.ts @@ -8,7 +8,7 @@ import { NGXS_DATA_STORAGE_EXTENSION, } from '@angular-ru/ngxs/storage'; import {NgxsLoggerPluginModule} from '@ngxs/logger-plugin'; -import {NgxsModule, NoopNgxsExecutionStrategy} from '@ngxs/store'; +import {NgxsModule} from '@ngxs/store'; import {environment} from '../environments/environment'; import {AppComponent} from './app.component'; @@ -23,7 +23,6 @@ import {AppRoutingModule} from './app-routing.module'; ReactiveFormsModule, NgxsModule.forRoot([], { developmentMode: !environment.production, - executionStrategy: NoopNgxsExecutionStrategy, }), NgxsLoggerPluginModule.forRoot(), NgxsDataPluginModule.forRoot([ diff --git a/apps/ngxs-demo/src/article/article.component.ts b/apps/ngxs-demo/src/article/article.component.ts index a773d30cd..4708e749d 100644 --- a/apps/ngxs-demo/src/article/article.component.ts +++ b/apps/ngxs-demo/src/article/article.component.ts @@ -10,6 +10,7 @@ import {ArticleEntitiesState} from './article-entities.state'; import {ArticleDialogComponent} from './dialog/article-dialog.component'; @Component({ + standalone: false, selector: 'article', templateUrl: './article.component.html', changeDetection: ChangeDetectionStrategy.OnPush, diff --git a/apps/ngxs-demo/src/article/article.module.ts b/apps/ngxs-demo/src/article/article.module.ts index 0106e899e..dde47b082 100644 --- a/apps/ngxs-demo/src/article/article.module.ts +++ b/apps/ngxs-demo/src/article/article.module.ts @@ -23,9 +23,9 @@ import {ArticleDialogComponent} from './dialog/article-dialog.component'; MatInputModule, MatSortModule, MatTableModule, + ReactiveFormsModule, NgxsModule.forFeature([ArticleEntitiesState]), RouterModule.forChild([{path: '', component: ArticleComponent}]), - ReactiveFormsModule, ], declarations: [ArticleComponent, ArticleDialogComponent], }) diff --git a/apps/ngxs-demo/src/article/dialog/article-dialog.component.ts b/apps/ngxs-demo/src/article/dialog/article-dialog.component.ts index f2379276e..fca0fcb97 100644 --- a/apps/ngxs-demo/src/article/dialog/article-dialog.component.ts +++ b/apps/ngxs-demo/src/article/dialog/article-dialog.component.ts @@ -5,6 +5,7 @@ import {MAT_DIALOG_DATA, MatDialogRef} from '@angular/material/dialog'; import {Article} from '../article'; @Component({ + standalone: false, selector: 'article-dialog', templateUrl: './article-dialog.component.html', changeDetection: ChangeDetectionStrategy.OnPush, diff --git a/apps/ngxs-demo/src/count/count.component.ts b/apps/ngxs-demo/src/count/count.component.ts index 42a322390..5694239c2 100644 --- a/apps/ngxs-demo/src/count/count.component.ts +++ b/apps/ngxs-demo/src/count/count.component.ts @@ -4,6 +4,7 @@ import {CountState} from './count.state'; import {CountSubState} from './count-sub.state'; @Component({ + standalone: false, selector: 'count', templateUrl: './count.component.html', changeDetection: ChangeDetectionStrategy.OnPush, diff --git a/apps/ngxs-demo/src/person/person.component.html b/apps/ngxs-demo/src/person/person.component.html index 1d2d82dec..6bbd41464 100644 --- a/apps/ngxs-demo/src/person/person.component.html +++ b/apps/ngxs-demo/src/person/person.component.html @@ -11,7 +11,9 @@

Person state

-
-

{{ person.title }}

-

{{ person.description }}

-
+@if (person.state$ | async; as person) { +
+

{{ person.title }}

+

{{ person.description }}

+
+} diff --git a/apps/ngxs-demo/src/person/person.component.ts b/apps/ngxs-demo/src/person/person.component.ts index 55ea91bbf..c4001c38c 100644 --- a/apps/ngxs-demo/src/person/person.component.ts +++ b/apps/ngxs-demo/src/person/person.component.ts @@ -3,6 +3,7 @@ import {ChangeDetectionStrategy, Component} from '@angular/core'; import {PersonState} from './person.state'; @Component({ + standalone: false, selector: 'person', templateUrl: './person.component.html', changeDetection: ChangeDetectionStrategy.OnPush, diff --git a/apps/ngxs-demo/src/todo/todo.component.html b/apps/ngxs-demo/src/todo/todo.component.html index 0bcf98248..71c21018e 100644 --- a/apps/ngxs-demo/src/todo/todo.component.html +++ b/apps/ngxs-demo/src/todo/todo.component.html @@ -22,11 +22,10 @@

TodoState

diff --git a/apps/ngxs-demo/src/todo/todo.component.ts b/apps/ngxs-demo/src/todo/todo.component.ts index 9a29c60d6..d5a04994e 100644 --- a/apps/ngxs-demo/src/todo/todo.component.ts +++ b/apps/ngxs-demo/src/todo/todo.component.ts @@ -3,6 +3,7 @@ import {ChangeDetectionStrategy, Component} from '@angular/core'; import {TodoState} from './todo.state'; @Component({ + standalone: false, selector: 'todo', templateUrl: './todo.component.html', changeDetection: ChangeDetectionStrategy.OnPush, diff --git a/apps/ngxs-demo/src/user/user.component.html b/apps/ngxs-demo/src/user/user.component.html index c6cd5ccc5..704edb5ad 100644 --- a/apps/ngxs-demo/src/user/user.component.html +++ b/apps/ngxs-demo/src/user/user.component.html @@ -1,8 +1,12 @@

User state

-
-

{{ user.name }}

-

{{ user.email }}

-
+@if (user$ | async; as user) { +
+

{{ user.name }}

+

{{ user.email }}

+
+} -
LOADING...
+@if ((isLoading$ | async) === true) { +
LOADING...
+} diff --git a/apps/ngxs-demo/src/user/user.component.ts b/apps/ngxs-demo/src/user/user.component.ts index 5a91f2869..205a3ee80 100644 --- a/apps/ngxs-demo/src/user/user.component.ts +++ b/apps/ngxs-demo/src/user/user.component.ts @@ -6,6 +6,7 @@ import {UserState} from './user.state'; import {UserModel} from './user-model'; @Component({ + standalone: false, selector: 'user', templateUrl: './user.component.html', changeDetection: ChangeDetectionStrategy.OnPush, diff --git a/apps/ngxs-demo/tsconfig.app.json b/apps/ngxs-demo/tsconfig.app.json index 5ede5f85d..c8482f8f1 100644 --- a/apps/ngxs-demo/tsconfig.app.json +++ b/apps/ngxs-demo/tsconfig.app.json @@ -1,4 +1,10 @@ { "extends": "../../tsconfig.json", - "include": ["main.ts", "polyfills.ts"] + "compilerOptions": { + "types": [] + }, + "include": ["main.ts", "polyfills.ts"], + "angularCompilerOptions": { + "compilationMode": "full" + } } diff --git a/apps/tooltip-demo/main.ts b/apps/tooltip-demo/main.ts index 7f04f8cab..52a54606f 100644 --- a/apps/tooltip-demo/main.ts +++ b/apps/tooltip-demo/main.ts @@ -1,5 +1,5 @@ import {enableProdMode} from '@angular/core'; -import {platformBrowserDynamic} from '@angular/platform-browser-dynamic'; +import {platformBrowser} from '@angular/platform-browser'; import {environment} from './environments/environment'; import {AppModule} from './src/app.module'; @@ -8,6 +8,6 @@ if (environment.production) { enableProdMode(); } -platformBrowserDynamic() +platformBrowser() .bootstrapModule(AppModule, {ngZoneEventCoalescing: true}) - .catch((error: Error): void => console.error(error)); + .catch((error: unknown): void => console.error(error)); diff --git a/apps/tooltip-demo/project.json b/apps/tooltip-demo/project.json index bd69b26f1..3fdb0c425 100644 --- a/apps/tooltip-demo/project.json +++ b/apps/tooltip-demo/project.json @@ -6,63 +6,65 @@ "tags": ["apps"], "targets": { "build": { - "executor": "@angular-devkit/build-angular:browser", + "executor": "@angular/build:application", "options": { - "outputPath": "dist/tooltip-demo", - "tsConfig": "apps/tooltip-demo/tsconfig.app.json", - "main": "apps/tooltip-demo/main.ts", + "outputPath": { + "base": "dist/tooltip-demo", + "browser": "" + }, "index": "apps/tooltip-demo/index.html", + "browser": "apps/tooltip-demo/main.ts", + "tsConfig": "apps/tooltip-demo/tsconfig.app.json", + "polyfills": ["apps/tooltip-demo/polyfills.ts"], + "inlineStyleLanguage": "scss", "assets": ["apps/tooltip-demo/assets"], - "polyfills": "apps/tooltip-demo/polyfills.ts", "styles": [".global/integration-app.style.scss", "apps/tooltip-demo/styles.scss"], - "aot": false, - "vendorChunk": true, - "extractLicenses": false, - "buildOptimizer": false, - "sourceMap": true, - "optimization": false, - "namedChunks": true + "scripts": [], + "stylePreprocessorOptions": { + "includePaths": ["./src"], + "sass": { + "silenceDeprecations": ["import"] + } + } }, "configurations": { "production": { - "fileReplacements": [ + "budgets": [ { - "replace": "apps/tooltip-demo/environments/environment.ts", - "with": "apps/tooltip-demo/environments/environment.prod.ts" + "type": "initial", + "maximumWarning": "1mb", + "maximumError": "2mb" + }, + { + "type": "anyComponentStyle", + "maximumWarning": "6kb" } ], - "optimization": true, "outputHashing": "all", - "sourceMap": false, - "namedChunks": false, - "aot": true, - "extractLicenses": true, - "buildOptimizer": true - }, - "development": { "fileReplacements": [ { - "replace": "apps/flex-layout-demo/environments/environment.ts", - "with": "apps/flex-layout-demo/environments/environment.prod.ts" + "replace": "apps/tooltip-demo/environments/environment.ts", + "with": "apps/tooltip-demo/environments/environment.prod.ts" } - ], - "optimization": false + ] + }, + "development": { + "optimization": false, + "extractLicenses": false, + "sourceMap": true } }, "defaultConfiguration": "production", - "outputs": ["{projectRoot}/dist/tooltip-demo"] + "outputs": ["{options.outputPath}"] }, "serve": { - "executor": "@angular-devkit/build-angular:dev-server", - "options": { - "buildTarget": "tooltip-demo:build" - }, + "executor": "@angular/build:dev-server", "configurations": { "production": { "buildTarget": "tooltip-demo:build:production" }, "development": { - "buildTarget": "development-demo:build:production" + "buildTarget": "tooltip-demo:build:development" } }, "defaultConfiguration": "development" diff --git a/apps/tooltip-demo/src/app.component.ts b/apps/tooltip-demo/src/app.component.ts index cf11b2953..1db9ed198 100644 --- a/apps/tooltip-demo/src/app.component.ts +++ b/apps/tooltip-demo/src/app.component.ts @@ -1,6 +1,7 @@ import {ChangeDetectionStrategy, Component} from '@angular/core'; @Component({ + standalone: false, selector: 'app-root', templateUrl: './app.component.html', changeDetection: ChangeDetectionStrategy.OnPush, diff --git a/apps/tooltip-demo/src/samples/guide/guide.component.ts b/apps/tooltip-demo/src/samples/guide/guide.component.ts index adc5bf8e9..2ab5c3578 100644 --- a/apps/tooltip-demo/src/samples/guide/guide.component.ts +++ b/apps/tooltip-demo/src/samples/guide/guide.component.ts @@ -14,6 +14,7 @@ interface Favorite { } @Component({ + standalone: false, selector: 'guide', templateUrl: './guide.component.html', changeDetection: ChangeDetectionStrategy.OnPush, diff --git a/apps/tooltip-demo/src/samples/guide/guide.module.ts b/apps/tooltip-demo/src/samples/guide/guide.module.ts index b486c51f1..2da3d0339 100644 --- a/apps/tooltip-demo/src/samples/guide/guide.module.ts +++ b/apps/tooltip-demo/src/samples/guide/guide.module.ts @@ -11,14 +11,14 @@ import {GuideComponent} from './guide.component'; imports: [ CommonModule, MatIconModule, + ScrollingModule, + TooltipModule, RouterModule.forChild([ { path: '', component: GuideComponent, }, ]), - ScrollingModule, - TooltipModule, ], declarations: [GuideComponent], }) diff --git a/apps/tooltip-demo/tsconfig.app.json b/apps/tooltip-demo/tsconfig.app.json index 5ede5f85d..c8482f8f1 100644 --- a/apps/tooltip-demo/tsconfig.app.json +++ b/apps/tooltip-demo/tsconfig.app.json @@ -1,4 +1,10 @@ { "extends": "../../tsconfig.json", - "include": ["main.ts", "polyfills.ts"] + "compilerOptions": { + "types": [] + }, + "include": ["main.ts", "polyfills.ts"], + "angularCompilerOptions": { + "compilationMode": "full" + } } diff --git a/apps/virtual-table-demo/main.ts b/apps/virtual-table-demo/main.ts index 7f04f8cab..52a54606f 100644 --- a/apps/virtual-table-demo/main.ts +++ b/apps/virtual-table-demo/main.ts @@ -1,5 +1,5 @@ import {enableProdMode} from '@angular/core'; -import {platformBrowserDynamic} from '@angular/platform-browser-dynamic'; +import {platformBrowser} from '@angular/platform-browser'; import {environment} from './environments/environment'; import {AppModule} from './src/app.module'; @@ -8,6 +8,6 @@ if (environment.production) { enableProdMode(); } -platformBrowserDynamic() +platformBrowser() .bootstrapModule(AppModule, {ngZoneEventCoalescing: true}) - .catch((error: Error): void => console.error(error)); + .catch((error: unknown): void => console.error(error)); diff --git a/apps/virtual-table-demo/project.json b/apps/virtual-table-demo/project.json index 8853546bd..d97e4309b 100644 --- a/apps/virtual-table-demo/project.json +++ b/apps/virtual-table-demo/project.json @@ -6,61 +6,64 @@ "tags": ["apps"], "targets": { "build": { - "executor": "@angular-devkit/build-angular:browser", + "executor": "@angular/build:application", "options": { - "outputPath": "dist/virtual-table-demo", - "tsConfig": "apps/virtual-table-demo/tsconfig.app.json", - "main": "apps/virtual-table-demo/main.ts", + "outputPath": { + "base": "dist/virtual-table-demo", + "browser": "" + }, "index": "apps/virtual-table-demo/index.html", + "browser": "apps/virtual-table-demo/main.ts", + "tsConfig": "apps/virtual-table-demo/tsconfig.app.json", + "polyfills": ["apps/virtual-table-demo/polyfills.ts"], + "inlineStyleLanguage": "scss", "assets": ["apps/virtual-table-demo/assets"], - "polyfills": "apps/virtual-table-demo/polyfills.ts", "styles": [ + "apps/virtual-table-demo/styles.scss", ".global/integration-app.style.scss", "node_modules/ngx-toastr/toastr.css", "apps/virtual-table-demo/styles.scss" ], - "aot": false, - "vendorChunk": true, - "extractLicenses": false, - "buildOptimizer": false, - "sourceMap": true, - "optimization": false, - "namedChunks": true + "scripts": [], + "stylePreprocessorOptions": { + "includePaths": ["./src"], + "sass": { + "silenceDeprecations": ["import"] + } + } }, "configurations": { "production": { - "fileReplacements": [ + "budgets": [ { - "replace": "apps/virtual-table-demo/environments/environment.ts", - "with": "apps/virtual-table-demo/environments/environment.prod.ts" + "type": "initial", + "maximumWarning": "1mb", + "maximumError": "2mb" + }, + { + "type": "anyComponentStyle", + "maximumWarning": "6kb" } ], - "optimization": true, "outputHashing": "all", - "sourceMap": false, - "namedChunks": false, - "aot": true, - "extractLicenses": true, - "buildOptimizer": true - }, - "development": { "fileReplacements": [ { - "replace": "apps/flex-layout-demo/environments/environment.ts", - "with": "apps/flex-layout-demo/environments/environment.prod.ts" + "replace": "apps/virtual-table-demo/environments/environment.ts", + "with": "apps/virtual-table-demo/environments/environment.prod.ts" } - ], - "optimization": false + ] + }, + "development": { + "optimization": false, + "extractLicenses": false, + "sourceMap": true } }, "defaultConfiguration": "production", - "outputs": ["{projectRoot}/dist/virtual-table-demo"] + "outputs": ["{options.outputPath}"] }, "serve": { - "executor": "@angular-devkit/build-angular:dev-server", - "options": { - "buildTarget": "virtual-table-demo:build" - }, + "executor": "@angular/build:dev-server", "configurations": { "production": { "buildTarget": "virtual-table-demo:build:production" diff --git a/apps/virtual-table-demo/src/app.component.ts b/apps/virtual-table-demo/src/app.component.ts index cf11b2953..1db9ed198 100644 --- a/apps/virtual-table-demo/src/app.component.ts +++ b/apps/virtual-table-demo/src/app.component.ts @@ -1,6 +1,7 @@ import {ChangeDetectionStrategy, Component} from '@angular/core'; @Component({ + standalone: false, selector: 'app-root', templateUrl: './app.component.html', changeDetection: ChangeDetectionStrategy.OnPush, diff --git a/apps/virtual-table-demo/src/samples/guide/guide.component.ts b/apps/virtual-table-demo/src/samples/guide/guide.component.ts index 6b90e1734..677dae75f 100644 --- a/apps/virtual-table-demo/src/samples/guide/guide.component.ts +++ b/apps/virtual-table-demo/src/samples/guide/guide.component.ts @@ -4,6 +4,7 @@ import {PlainObject} from '@angular-ru/cdk/typings'; import {hlJsCode} from '../../../../../.global/utils/hljs-code'; @Component({ + standalone: false, selector: 'guide', templateUrl: './guide.component.html', changeDetection: ChangeDetectionStrategy.OnPush, diff --git a/apps/virtual-table-demo/src/samples/sample-eight/sample-eight.component.html b/apps/virtual-table-demo/src/samples/sample-eight/sample-eight.component.html index 40b52f54a..003c4b7d7 100644 --- a/apps/virtual-table-demo/src/samples/sample-eight/sample-eight.component.html +++ b/apps/virtual-table-demo/src/samples/sample-eight/sample-eight.component.html @@ -57,28 +57,26 @@ - - - - {{ symbol }} - - - - - {{ cell }} - - + @for (key of table.modelColumnKeys; track key) { + + @if (key === 'symbol') { + + {{ symbol }} + + } @else { + + {{ cell }} + + } + + } - + No data Loading diff --git a/apps/virtual-table-demo/src/samples/sample-eleven/sample-eleven.component.html b/apps/virtual-table-demo/src/samples/sample-eleven/sample-eleven.component.html index f72a0dbf7..24d9df91f 100644 --- a/apps/virtual-table-demo/src/samples/sample-eleven/sample-eleven.component.html +++ b/apps/virtual-table-demo/src/samples/sample-eleven/sample-eleven.component.html @@ -3,87 +3,234 @@
-
- - -
-
-
-

-  <!-- app.component.html -->
-  <ngx-table-builder [source]="data">
-    <ngx-context-menu>
-
-      <ngx-context-menu-item contextTitle divider>
-        <ngx-menu-content icon="./assets/angular.svg"></ngx-menu-content>
-        <ngx-menu-content>My custom context menu title</ngx-menu-content>
-      </ngx-context-menu-item>
-
-      <ngx-context-menu-item (onClick)="exportExcel(data)">
-        <ngx-menu-content icon="./assets/excel.png"></ngx-menu-content>
-        <ngx-menu-content>Export Excel</ngx-menu-content>
-      </ngx-context-menu-item>
-
-      <ngx-context-menu-item #item divider
-       [disable]="!item.state.key"
-       (onClick)="showLine(item.state.key, item.state.item)">
-        <ngx-menu-content icon></ngx-menu-content>
-        <ngx-menu-content>Show item row</ngx-menu-content>
-      </ngx-context-menu-item>
-
-      <ngx-context-menu-item #item
-       *ngIf="item.state.key === 'id'"
-       (onClick)="copyId(item.state.value)">
-        <ngx-menu-content icon></ngx-menu-content>
-        <ngx-menu-content>Show item row</ngx-menu-content>
-      </ngx-context-menu-item>
-
-    </ngx-context-menu>
-  </ngx-table-builder>
-
-
+ @if (licences.length) { +
+ + +
+
+
+

+                <!-- app.component.html -->
+                <ngx-table-builder [source]="data">
+                <ngx-context-menu>
+                <ngx-context-menu-item contextTitle divider>
+                <ngx-menu-content icon="./assets/angular.svg"></ngx-menu-content>
+                <ngx-menu-content>My custom context menu title</ngx-menu-content>
+                </ngx-context-menu-item>
+                <ngx-context-menu-item (onClick)="exportExcel(data)">
+                <ngx-menu-content icon="./assets/excel.png"></ngx-menu-content>
+                <ngx-menu-content>Export Excel</ngx-menu-content>
+                </ngx-context-menu-item>
+                <ngx-context-menu-item #item divider
+                [disable]="!item.state.key"
+                (onClick)="showLine(item.state.key, item.state.item)">
+                <ngx-menu-content icon></ngx-menu-content>
+                <ngx-menu-content>Show item row</ngx-menu-content>
+                </ngx-context-menu-item>
+                <ngx-context-menu-item #item
+                *ngIf="item.state.key === 'id'"
+                (onClick)="copyId(item.state.value)">
+                <ngx-menu-content icon></ngx-menu-content>
+                <ngx-menu-content>Show item row</ngx-menu-content>
+                </ngx-context-menu-item>
+                </ngx-context-menu>
+                </ngx-table-builder>
+              
+
+
+
+ + + + + My custom context menu title + + + + Export Excel + + + + Column settings + + List + @for (column of table1.columnSchema; track column.key) { + + {{ column.key }} + + + + + } + + + + + Show item row + + + + Show column name + + @if (item.state.key === 'id') { + + + Copy in buffer ID + + } + @if (item.state.key === 'price') { + + + Price: {{ item.state.textContent }} + + } + + + + Selected items ({{ + (table1?.selectionEntries | tableSelectedItems).length + }}) + + + + + + {{ value | currency }} + + + +
+
+

+                      // app.component.ts
+                      import { Component } from "@angular/core";
+                      import { Data } from "./data.interface";
+                      @Component({
+                      selector: 'app',
+                      templateUrl: './app.component.html'
+                      })
+                      export class AppComponent {
+                      public data: Data[] = [ .. ];
+                      public exportExcel(data: Data[]): void {
+                      window.alert('export excel - ' + JSON.stringify(data));
+                      }
+                      public showLine(key: string, item: Data): void {
+                      window.alert('key - ' + key + ' item - ' + JSON.stringify(item));
+                      }
+                      public copyId(id: string): void {
+                      window.alert('Copy on buffer - ' + id);
+                      }
+                      }
+                    
+
-
-
- + + +
+
- + + + + + + {{ table2.selectionModel.get($any(row).id) ? 'x' : '-' }} + + + @for (key of table2.modelColumnKeys; track key) { + + } + - - My custom context menu title + Menu {{ table2.selection.selectionModel.size }} - - - - Export Excel + + + Item1 - - Column settings - - - List - + Item2 + + + + Item3 + + + + Item4 + + + Column list + @for (column of table2.columnSchema; track column.key) { {{ column.key }} @@ -97,355 +244,153 @@ /> - + } - - - Show item row - - - - - Show column name - - - - - Copy in buffer ID - - - - - Price: {{ item.state.textContent }} + Reset table settings - - - - Selected items ({{ (table1?.selectionEntries | tableSelectedItems).length }}) - - - - - - - {{ value | currency }} - - - - -
-
- -

-  // app.component.ts
-  import { Component } from "@angular/core";
-  import { Data } from "./data.interface";
-
-  @Component({
-    selector: 'app',
-    templateUrl: './app.component.html'
-  })
-  export class AppComponent {
-
-    public data: Data[] = [ .. ];
-
-    public exportExcel(data: Data[]): void {
-        window.alert('export excel - ' + JSON.stringify(data));
-    }
-
-    public showLine(key: string, item: Data): void {
-        window.alert('key - ' + key + ' item - ' + JSON.stringify(item));
-    }
-
-    public copyId(id: string): void {
-        window.alert('Copy on buffer - ' + id);
-    }
-
-  }
-
-
-
-
-
- - -
-
- - - - - - - - {{ table2.selectionModel.get($any(row).id) ? 'x' : '-' }} - - - - - - - - Menu {{ table2.selection.selectionModel.size }} - - - - - Item1 - - - - - Item2 - - - - - Item3 - - - - - Item4 - - - - Column list - - - {{ column.key }} - - - - - - - - Reset table settings - - - - Example tree - - - Root A - - Child A1 - - - Child A2 - + Example tree - Child A3 - - - - - Root B - - - - Root C - - Child C1 + Root A + + Child A1 + + + Child A2 + + + Child A3 + - Child C2 + Root B - Child C3 + Root C + + Child C1 + + + Child C2 + + + Child C3 + - - - -
-
-
-
- -

- Note - : You can also wrap the templates in your component. -

- -

-  <!-- app.component.html -->
-  <ngx-table-builder #table [source]="data" height="500" enable-selection>
-    <ngx-options [resizable]="true" [sortable]="true"></ngx-options>
-
-    <ngx-context-menu>
-       <my-menu [table]="table"></my-menu>
-    </ngx-context-menu>
-
-    <ngx-column key="action" custom-key sticky [resizable]="false" [width]="50">
-        <ng-template ngx-th></ng-template>
-        <ng-template ngx-td row let-row>
-            {{ table.selectionModel.get($any(row).id) ? 'x' : '-' }}
-        </ng-template>
-    </ngx-column>
-
-    <ngx-column *ngFor="let key of table.modelColumnKeys" [key]="key"></ngx-column>
-  </ngx-table-builder>
-
-
-
-

-  // my-menu.component.ts
-  import { TableBuilderComponent } from "@angular-ru/cdk/virtual-table";
-  import { Component } from "@angular/core";
-
-  @Component({
-    selector: 'my-menu',
-    templateUrl: './my-menu.component.html'
-  })
-  export class MyMenuComponent {
-    @Input() public table: TableBuilderComponent;
-  }
-
-
+ +
-
-
-

- Note - : You can also wrap the templates in your component. -

-

-  <!-- my-menu.component.html -->
-
-  <!-- first item -->
-  <ngx-context-menu-item contextTitle divider>
-      <ngx-menu-content>Menu</ngx-menu-content>
-  </ngx-context-menu-item>
-
-  <!-- second item -->
-  <ngx-context-menu-item>
-      <ngx-menu-content>Column list</ngx-menu-content>
-
-      <ngx-context-menu-item
-          *ngFor="let column of table.columnSchema"
-          (onClick)="table.toggleColumnVisibility(column.key); $events.preventDefault()"
-          [visible]="column.isModel"
-      >
-          <ngx-menu-content no-margin>{{ column.key }}</ngx-menu-content>
-          <ngx-menu-content no-margin align-center>
-              <mat-checkbox
-                  color="primary"
-                  [checked]="column.visible"
-              ></mat-checkbox>
-          </ngx-menu-content>
-      </ngx-context-menu-item>
-  </ngx-context-menu-item>
-
-  <!-- third item -->
-  <ngx-context-menu-item (onClick)="table.resetSchema()" divider>
-      <ngx-menu-content>Reset table settings</ngx-menu-content>
-  </ngx-context-menu-item>
-
-  <!-- fourth item -->
-  <ngx-context-menu-item>
-
-      <ngx-menu-content>Example tree</ngx-menu-content>
-
-      <ngx-context-menu-item>
-          <ngx-menu-content>Root A</ngx-menu-content>
-          <ngx-context-menu-item>
-              <ngx-menu-content>Child A1</ngx-menu-content>
-          </ngx-context-menu-item>
-          <ngx-context-menu-item>
-              <ngx-menu-content>Child A2</ngx-menu-content>
-          </ngx-context-menu-item>
-          <ngx-context-menu-item>
-              <ngx-menu-content>Child A3</ngx-menu-content>
-          </ngx-context-menu-item>
-      </ngx-context-menu-item>
-
-      <ngx-context-menu-item>
-          <ngx-menu-content>Root B</ngx-menu-content>
-      </ngx-context-menu-item>
-
-      <ngx-context-menu-item>
-          <ngx-menu-content>Root C</ngx-menu-content>
-          <ngx-context-menu-item>
-              <ngx-menu-content> Child C1</ngx-menu-content>
-          </ngx-context-menu-item>
-          <ngx-context-menu-item>
-              <ngx-menu-content>Child C2</ngx-menu-content>
-          </ngx-context-menu-item>
-          <ngx-context-menu-item>
-              <ngx-menu-content>Child C3</ngx-menu-content>
-          </ngx-context-menu-item>
-      </ngx-context-menu-item>
-
-  </ngx-context-menu-item>
-
-
+
+
+
+

+ Note + : You can also wrap the templates in your component. +

+

+                          <!-- app.component.html -->
+                          <ngx-table-builder #table [source]="data" height="500" enable-selection>
+                          <ngx-options [resizable]="true" [sortable]="true"></ngx-options>
+                          <ngx-context-menu>
+                          <my-menu [table]="table"></my-menu>
+                          </ngx-context-menu>
+                          <ngx-column key="action" custom-key sticky [resizable]="false" [width]="50">
+                          <ng-template ngx-th></ng-template>
+                          <ng-template ngx-td row let-row>
+                          {{ table.selectionModel.get($any(row).id) ? 'x' : '-' }}
+                          </ng-template>
+                          </ngx-column>
+                          <ngx-column *ngFor="let key of table.modelColumnKeys" [key]="key"></ngx-column>
+                          </ngx-table-builder>
+                        
+
+

+                          // my-menu.component.ts
+                          import { TableBuilderComponent } from "@angular-ru/cdk/virtual-table";
+                          import { Component } from "@angular/core";
+                          @Component({
+                          selector: 'my-menu',
+                          templateUrl: './my-menu.component.html'
+                          })
+                          export class MyMenuComponent {
+                          @Input() public table: TableBuilderComponent;
+                          }
+                        
+
+
+
+

+ Note + : You can also wrap the templates in your component. +

+

+                          <!-- my-menu.component.html -->
+                          <!-- first item -->
+                          <ngx-context-menu-item contextTitle divider>
+                          <ngx-menu-content>Menu</ngx-menu-content>
+                          </ngx-context-menu-item>
+                          <!-- second item -->
+                          <ngx-context-menu-item>
+                          <ngx-menu-content>Column list</ngx-menu-content>
+                          <ngx-context-menu-item
+                          *ngFor="let column of table.columnSchema"
+                          (onClick)="table.toggleColumnVisibility(column.key); $events.preventDefault()"
+                          [visible]="column.isModel"
+                          >
+                          <ngx-menu-content no-margin>{{ column.key }}</ngx-menu-content>
+                          <ngx-menu-content no-margin align-center>
+                          <mat-checkbox
+                          color="primary"
+                          [checked]="column.visible"
+                          ></mat-checkbox>
+                          </ngx-menu-content>
+                          </ngx-context-menu-item>
+                          </ngx-context-menu-item>
+                          <!-- third item -->
+                          <ngx-context-menu-item (onClick)="table.resetSchema()" divider>
+                          <ngx-menu-content>Reset table settings</ngx-menu-content>
+                          </ngx-context-menu-item>
+                          <!-- fourth item -->
+                          <ngx-context-menu-item>
+                          <ngx-menu-content>Example tree</ngx-menu-content>
+                          <ngx-context-menu-item>
+                          <ngx-menu-content>Root A</ngx-menu-content>
+                          <ngx-context-menu-item>
+                          <ngx-menu-content>Child A1</ngx-menu-content>
+                          </ngx-context-menu-item>
+                          <ngx-context-menu-item>
+                          <ngx-menu-content>Child A2</ngx-menu-content>
+                          </ngx-context-menu-item>
+                          <ngx-context-menu-item>
+                          <ngx-menu-content>Child A3</ngx-menu-content>
+                          </ngx-context-menu-item>
+                          </ngx-context-menu-item>
+                          <ngx-context-menu-item>
+                          <ngx-menu-content>Root B</ngx-menu-content>
+                          </ngx-context-menu-item>
+                          <ngx-context-menu-item>
+                          <ngx-menu-content>Root C</ngx-menu-content>
+                          <ngx-context-menu-item>
+                          <ngx-menu-content> Child C1</ngx-menu-content>
+                          </ngx-context-menu-item>
+                          <ngx-context-menu-item>
+                          <ngx-menu-content>Child C2</ngx-menu-content>
+                          </ngx-context-menu-item>
+                          <ngx-context-menu-item>
+                          <ngx-menu-content>Child C3</ngx-menu-content>
+                          </ngx-context-menu-item>
+                          </ngx-context-menu-item>
+                          </ngx-context-menu-item>
+                        
+
-
- - -
+
+
+
+ }
diff --git a/apps/virtual-table-demo/src/samples/sample-eleven/sample-eleven.component.ts b/apps/virtual-table-demo/src/samples/sample-eleven/sample-eleven.component.ts index cd46accde..366201c45 100644 --- a/apps/virtual-table-demo/src/samples/sample-eleven/sample-eleven.component.ts +++ b/apps/virtual-table-demo/src/samples/sample-eleven/sample-eleven.component.ts @@ -13,6 +13,7 @@ import {hlJsCode} from '../../../../../.global/utils/hljs-code'; import {MocksGenerator} from '../../mocks-generator'; @Component({ + standalone: false, selector: 'sample-eleven', templateUrl: './sample-eleven.component.html', styles: [ diff --git a/apps/virtual-table-demo/src/samples/sample-fifteen/sample-fifteen.component.ts b/apps/virtual-table-demo/src/samples/sample-fifteen/sample-fifteen.component.ts index c65af210e..45f632fdd 100644 --- a/apps/virtual-table-demo/src/samples/sample-fifteen/sample-fifteen.component.ts +++ b/apps/virtual-table-demo/src/samples/sample-fifteen/sample-fifteen.component.ts @@ -13,6 +13,7 @@ import {hlJsCode} from '../../../../../.global/utils/hljs-code'; import {MocksGenerator} from '../../mocks-generator'; @Component({ + standalone: false, selector: 'sample-fifteen', templateUrl: './sample-fifteen.component.html', changeDetection: ChangeDetectionStrategy.OnPush, diff --git a/apps/virtual-table-demo/src/samples/sample-first-second/sample-first-second.component.html b/apps/virtual-table-demo/src/samples/sample-first-second/sample-first-second.component.html index 3721b52f3..165d2b3c9 100644 --- a/apps/virtual-table-demo/src/samples/sample-first-second/sample-first-second.component.html +++ b/apps/virtual-table-demo/src/samples/sample-first-second/sample-first-second.component.html @@ -16,18 +16,17 @@ #table [source]="data" > - - {{ key }} - - {{ cell }} - - + @for (key of table.modelColumnKeys; track key) { + + {{ key }} + + {{ cell }} + + + } Virtual scroll table - + @if (loading) { + + }
diff --git a/apps/virtual-table-demo/src/samples/sample-first/sample-first.component.ts b/apps/virtual-table-demo/src/samples/sample-first/sample-first.component.ts index e00f01b77..2d4e49dd4 100644 --- a/apps/virtual-table-demo/src/samples/sample-first/sample-first.component.ts +++ b/apps/virtual-table-demo/src/samples/sample-first/sample-first.component.ts @@ -13,6 +13,7 @@ import {MocksGenerator} from '../../mocks-generator'; import {CodeDialogComponent} from '../../shared/dialog/code-dialog.component'; @Component({ + standalone: false, selector: 'sample-first', templateUrl: './sample-first.component.html', changeDetection: ChangeDetectionStrategy.OnPush, @@ -80,10 +81,10 @@ export class SampleFirstComponent implements OnInit, OnDestroy { this.loading = true; switch (this.dataSize) { - case '10x5': + case '100000x100': { - const rows = 10; - const cols = 5; + const rows = 100000; + const cols = 100; MocksGenerator.generator(rows, cols).then( (data: PlainObject[]): void => this.setData(data), @@ -92,10 +93,10 @@ export class SampleFirstComponent implements OnInit, OnDestroy { break; - case '100x20': + case '10000x50': { - const rows = 100; - const cols = 20; + const rows = 10000; + const cols = 50; MocksGenerator.generator(rows, cols).then( (data: PlainObject[]): void => this.setData(data), @@ -116,10 +117,10 @@ export class SampleFirstComponent implements OnInit, OnDestroy { break; - case '10000x50': + case '100x20': { - const rows = 10000; - const cols = 50; + const rows = 100; + const cols = 20; MocksGenerator.generator(rows, cols).then( (data: PlainObject[]): void => this.setData(data), @@ -128,10 +129,10 @@ export class SampleFirstComponent implements OnInit, OnDestroy { break; - case '100000x100': + case '10x5': { - const rows = 100000; - const cols = 100; + const rows = 10; + const cols = 5; MocksGenerator.generator(rows, cols).then( (data: PlainObject[]): void => this.setData(data), diff --git a/apps/virtual-table-demo/src/samples/sample-five/sample-five.component.html b/apps/virtual-table-demo/src/samples/sample-five/sample-five.component.html index 1a9fb7d7c..31311848b 100644 --- a/apps/virtual-table-demo/src/samples/sample-five/sample-five.component.html +++ b/apps/virtual-table-demo/src/samples/sample-five/sample-five.component.html @@ -1,7 +1,9 @@ Example resizing - ({{ table.source?.length }}x{{ table.displayedColumns.length }}) + @if (table.isRendered) { + ({{ table.source?.length }}x{{ table.displayedColumns.length }}) + }
diff --git a/apps/virtual-table-demo/src/samples/sample-fourteen/context-menu-sample/context-menu-sample.component.ts b/apps/virtual-table-demo/src/samples/sample-fourteen/context-menu-sample/context-menu-sample.component.ts index 39c078d03..7e69c72d7 100644 --- a/apps/virtual-table-demo/src/samples/sample-fourteen/context-menu-sample/context-menu-sample.component.ts +++ b/apps/virtual-table-demo/src/samples/sample-fourteen/context-menu-sample/context-menu-sample.component.ts @@ -12,6 +12,7 @@ import { } from '@angular-ru/cdk/virtual-table'; @Component({ + standalone: false, selector: 'context-menu-sample', templateUrl: './context-menu-sample.component.html', styles: [ diff --git a/apps/virtual-table-demo/src/samples/sample-fourteen/not-found.component.ts b/apps/virtual-table-demo/src/samples/sample-fourteen/not-found.component.ts index 49a1c1698..b3cfe6f41 100644 --- a/apps/virtual-table-demo/src/samples/sample-fourteen/not-found.component.ts +++ b/apps/virtual-table-demo/src/samples/sample-fourteen/not-found.component.ts @@ -1,6 +1,7 @@ import {ChangeDetectionStrategy, Component, ViewEncapsulation} from '@angular/core'; @Component({ + standalone: false, selector: 'not-found', template: ` Not found diff --git a/apps/virtual-table-demo/src/samples/sample-fourteen/sample-fourteen.component.html b/apps/virtual-table-demo/src/samples/sample-fourteen/sample-fourteen.component.html index 104c621d3..e7f5773b9 100644 --- a/apps/virtual-table-demo/src/samples/sample-fourteen/sample-fourteen.component.html +++ b/apps/virtual-table-demo/src/samples/sample-fourteen/sample-fourteen.component.html @@ -65,12 +65,11 @@ [(value)]="table.filterable.filterType" (valueChange)="table.filter()" > - - {{ type.key }} - + @for (type of table.filterable.types | keyvalue; track type.key) { + + {{ type.key }} + + }
@@ -112,23 +111,22 @@ - - - - - - - + @for (key of table.modelColumnKeys; track key) { + + + + + + + + } - + @for (type of table.filterable.types | keyvalue; track type.key) { + {{ type.key }} + } diff --git a/apps/virtual-table-demo/src/samples/sample-fourteen/sample-fourteen.module.ts b/apps/virtual-table-demo/src/samples/sample-fourteen/sample-fourteen.module.ts index 97317f307..3b211e809 100644 --- a/apps/virtual-table-demo/src/samples/sample-fourteen/sample-fourteen.module.ts +++ b/apps/virtual-table-demo/src/samples/sample-fourteen/sample-fourteen.module.ts @@ -14,6 +14,10 @@ import {SampleFourteenComponent} from './sample-fourteen.component'; @NgModule({ imports: [ CommonModule, + MatButtonToggleModule, + MatDatepickerModule, + MatInputModule, + MatNativeDateModule, SharedModule, RouterModule.forChild([ { @@ -21,10 +25,6 @@ import {SampleFourteenComponent} from './sample-fourteen.component'; component: SampleFourteenComponent, }, ]), - MatButtonToggleModule, - MatInputModule, - MatDatepickerModule, - MatNativeDateModule, ], declarations: [ ContextMenuSampleComponent, diff --git a/apps/virtual-table-demo/src/samples/sample-fourth/sample-fourth.component.ts b/apps/virtual-table-demo/src/samples/sample-fourth/sample-fourth.component.ts index b21056326..2a1ee9fb4 100644 --- a/apps/virtual-table-demo/src/samples/sample-fourth/sample-fourth.component.ts +++ b/apps/virtual-table-demo/src/samples/sample-fourth/sample-fourth.component.ts @@ -4,6 +4,7 @@ import {PlainObject} from '@angular-ru/cdk/typings'; import {hlJsCode} from '../../../../../.global/utils/hljs-code'; @Component({ + standalone: false, selector: 'sample-fourth', templateUrl: './sample-fourth.component.html', changeDetection: ChangeDetectionStrategy.OnPush, diff --git a/apps/virtual-table-demo/src/samples/sample-night/sample-night.component.html b/apps/virtual-table-demo/src/samples/sample-night/sample-night.component.html index be0d633ca..ce63c9185 100644 --- a/apps/virtual-table-demo/src/samples/sample-night/sample-night.component.html +++ b/apps/virtual-table-demo/src/samples/sample-night/sample-night.component.html @@ -52,27 +52,28 @@ [(value)]="table1.filterable.filterType" (valueChange)="table1.filter()" > - - {{ type.key }} - + @for (type of table1.filterable.types | keyvalue; track type.key) { + + {{ type.key }} + + }
- - {{ key }} - - {{ cell }} - - + @for (key of table1.modelColumnKeys; track key) { + + {{ key }} + + {{ cell }} + + + } @@ -109,27 +110,28 @@ [(value)]="table2.filterable.filterType" (valueChange)="table2.filter()" > - - {{ type.key }} - + @for (type of table2.filterable.types | keyvalue; track type.key) { + + {{ type.key }} + + } - - {{ key }} - - {{ cell }} - - + @for (key of table2.modelColumnKeys; track key) { + + {{ key }} + + {{ cell }} + + + } diff --git a/apps/virtual-table-demo/src/samples/sample-night/sample-night.component.ts b/apps/virtual-table-demo/src/samples/sample-night/sample-night.component.ts index f8ad9fd5c..6e3de41e2 100644 --- a/apps/virtual-table-demo/src/samples/sample-night/sample-night.component.ts +++ b/apps/virtual-table-demo/src/samples/sample-night/sample-night.component.ts @@ -15,6 +15,7 @@ import {MocksGenerator} from '../../mocks-generator'; import {CodeDialogComponent} from '../../shared/dialog/code-dialog.component'; @Component({ + standalone: false, selector: 'sample-night', templateUrl: './sample-night.component.html', changeDetection: ChangeDetectionStrategy.OnPush, diff --git a/apps/virtual-table-demo/src/samples/sample-second/sample-second.component.html b/apps/virtual-table-demo/src/samples/sample-second/sample-second.component.html index cc90b45f8..c45e4037e 100644 --- a/apps/virtual-table-demo/src/samples/sample-second/sample-second.component.html +++ b/apps/virtual-table-demo/src/samples/sample-second/sample-second.component.html @@ -7,66 +7,66 @@

1. Override columns rendering


-  // app.component.ts
-  import { Component } from "@angular/core";
-  import { LicenseSample } from "./license.interface";
+      // app.component.ts
+      import { Component } from "@angular/core";
+      import { LicenseSample } from "./license.interface";
 
-  @Component({
-    selector: 'app',
-    templateUrl: './app.component.html'
-  })
-  export class AppComponent {
+      @Component({
+      selector: 'app',
+      templateUrl: './app.component.html'
+      })
+      export class AppComponent {
 
-    public licenses: LicenseSample[] = [
+      public licenses: LicenseSample[] = [
       {
-        id: 1,
-        name: 'single',
-        price: 29.3
+      id: 1,
+      name: 'single',
+      price: 29.3
       },
       {
-        id: 2,
-        name: 'developer',
-        price: 49.8
+      id: 2,
+      name: 'developer',
+      price: 49.8
       },
       {
-        id: 3,
-        name: 'premium',
-        price: 99.5
+      id: 3,
+      name: 'premium',
+      price: 99.5
       },
       {
-        id: 4,
-        name: 'enterprise',
-        price: 199
+      id: 4,
+      name: 'enterprise',
+      price: 199
       }
-    ];
+      ];
 
-  }
+      }
 
-
+

-    <!-- app.component.html -->
-    <ngx-table-builder [source]="licenses">
+      <!-- app.component.html -->
+      <ngx-table-builder [source]="licenses">
 
       <ngx-column key="name">
-          <ng-template ngx-th>License</ng-template>
-          <ng-template ngx-td let-name>
-            {{ name | uppercase }}
-          </ng-template>
+      <ng-template ngx-th>License</ng-template>
+      <ng-template ngx-td let-name>
+      {{ name | uppercase }}
+      </ng-template>
       </ngx-column>
 
       <ngx-column key="price">
-          <ng-template ngx-th>Cost</ng-template>
-          <ng-template ngx-td let-price>
-            {{ price | currency }}
-          </ng-template>
+      <ng-template ngx-th>Cost</ng-template>
+      <ng-template ngx-td let-price>
+      {{ price | currency }}
+      </ng-template>
       </ngx-column>
 
-    </ngx-table-builder>
+      </ngx-table-builder>
 
-
+ @@ -97,44 +97,44 @@

2. Sticky and Custom Columns


-  // app.component.ts
-  import { Component } from "@angular/core";
+      // app.component.ts
+      import { Component } from "@angular/core";
 
-  export interface PeriodicElement {
+      export interface PeriodicElement {
       name: string;
       position: number;
       weight: number;
       symbol: string;
-  }
+      }
 
-  @Component({
-    selector: 'app',
-    templateUrl: './app.component.html',
-    styles: [
+      @Component({
+      selector: 'app',
+      templateUrl: './app.component.html',
+      styles: [
       `
-         // Use custom CSS for column and cell
-        .status-column .table-grid__cell {
-          padding: 0;
-          color: green;
-        }
-
-         // Reset CSS for default mat-button style
-        .button__done[mat-button] {
-          padding: 0;
-          min-width: 100%;
-        }
+      // Use custom CSS for column and cell
+      .status-column .table-grid__cell {
+      padding: 0;
+      color: green;
+      }
+
+      // Reset CSS for default mat-button style
+      .button__done[mat-button] {
+      padding: 0;
+      min-width: 100%;
+      }
       `
-    ],
-    // Use to disable CSS Encapsulation for this component
-    encapsulation: ViewEncapsulation.None,
-  })
-  export class AppComponent {
-    public columns: string[] = [
+      ],
+      // Use to disable CSS Encapsulation for this component
+      encapsulation: ViewEncapsulation.None,
+      })
+      export class AppComponent {
+      public columns: string[] = [
       'name', 'position', 'weight', 'symbol',
       'position', 'weight', 'symbol', 'status'
-    ];
+      ];
 
-    public data: PeriodicElement[] = [
+      public data: PeriodicElement[] = [
       { position: 1, name: 'Hydrogen', weight: 1.0079, symbol: 'H' },
       { position: 2, name: 'Helium', weight: 4.0026, symbol: 'He' },
       { position: 3, name: 'Lithium', weight: 6.941, symbol: 'Li' },
@@ -145,11 +145,11 @@ 

2. Sticky and Custom Columns

{ position: 8, name: 'Oxygen', weight: 15.9994, symbol: 'O' }, { position: 9, name: 'Fluorine', weight: 18.9984, symbol: 'F' }, { position: 10, name: 'Neon', weight: 20.1797, symbol: 'Ne' }, - ]; - } + ]; + } -
+

Note @@ -173,45 +173,45 @@

2. Sticky and Custom Columns


-  <!-- app.component.html -->
-  <ngx-table-builder [source]="licenses" row-height="60">
+      <!-- app.component.html -->
+      <ngx-table-builder [source]="licenses" row-height="60">
       <ngx-column key="id" width="100" empty-head>
-          <ng-template ngx-td let-id>№{{ id }}</ng-template>
+      <ng-template ngx-td let-id>№{{ id }}</ng-template>
       </ngx-column>
 
       <ngx-column key="name" head-title="License name">
-          <ng-template ngx-td let-name>{{ name | uppercase }}</ng-template>
+      <ng-template ngx-td let-name>{{ name | uppercase }}</ng-template>
       </ngx-column>
 
       <ngx-column key="price" head-title="Cost">
-          <ng-template ngx-td let-price>
-              <button mat-button [matMenuTriggerFor]="menu">{{ price | currency }}</button>
-              <mat-menu #menu="matMenu">
-                  <button mat-menu-item>EUR</button>
-                  <button mat-menu-item>DOL</button>
-              </mat-menu>
-          </ng-template>
+      <ng-template ngx-td let-price>
+      <button mat-button [matMenuTriggerFor]="menu">{{ price | currency }}</button>
+      <mat-menu #menu="matMenu">
+      <button mat-menu-item>EUR</button>
+      <button mat-menu-item>DOL</button>
+      </mat-menu>
+      </ng-template>
       </ngx-column>
 
       <ngx-column key="change" width="250" empty-head custom-key>
-          <ng-template ngx-td>
-              <mat-form-field>
-                  <mat-label>Relative</mat-label>
-                  <mat-select>
-                      <mat-option
-                          [value]="license.name"
-                          (click)="cd.detectChanges()"
-                          *ngFor="let license of licenses"
-                      >
-                          {{ license.name }}
-                      </mat-option>
-                  </mat-select>
-              </mat-form-field>
-          </ng-template>
+      <ng-template ngx-td>
+      <mat-form-field>
+      <mat-label>Relative</mat-label>
+      <mat-select>
+      <mat-option
+      [value]="license.name"
+      (click)="cd.detectChanges()"
+      *ngFor="let license of licenses"
+      >
+      {{ license.name }}
+      </mat-option>
+      </mat-select>
+      </mat-form-field>
+      </ng-template>
       </ngx-column>
-  </ngx-table-builder>
+      </ngx-table-builder>
 
-
+
@@ -245,22 +245,22 @@

2. Sticky and Custom Columns



-  <!-- app.component.html -->
-  <ngx-table-builder [source]="data" [striped]="false" [keys]="columns">
-
-      <ngx-column key="name" sticky></ngx-column>
-
-      <ngx-column width="50" key="status" sticky-end [css-class]="['status-column']">
-          <ng-template ngx-th></ng-template>
-          <ng-template ngx-td>
-              <button class="button__done" mat-button>
-                  <mat-icon>done</mat-icon>
-              </button>
-          </ng-template>
-      </ngx-column>
+        <!-- app.component.html -->
+        <ngx-table-builder [source]="data" [striped]="false" [keys]="columns">
+
+        <ngx-column key="name" sticky></ngx-column>
+
+        <ngx-column width="50" key="status" sticky-end [css-class]="['status-column']">
+        <ng-template ngx-th></ng-template>
+        <ng-template ngx-td>
+        <button class="button__done" mat-button>
+        <mat-icon>done</mat-icon>
+        </button>
+        </ng-template>
+        </ngx-column>
 
-  </ngx-table-builder>
-
+ </ngx-table-builder> +
@@ -325,13 +325,14 @@

2. Sticky and Custom Columns

Relative - - {{ license.name }} - + @for (license of licenses; track license.id) { + + {{ license.name }} + + } diff --git a/apps/virtual-table-demo/src/samples/sample-second/sample-second.component.ts b/apps/virtual-table-demo/src/samples/sample-second/sample-second.component.ts index 84348bded..5ce38f065 100644 --- a/apps/virtual-table-demo/src/samples/sample-second/sample-second.component.ts +++ b/apps/virtual-table-demo/src/samples/sample-second/sample-second.component.ts @@ -22,9 +22,9 @@ export interface PeriodicElement { } @Component({ + standalone: false, selector: 'sample-second', templateUrl: './sample-second.component.html', - // eslint-disable-next-line @angular-eslint/component-max-inline-declarations styles: [ ` /*noinspection CssUnusedSymbol*/ @@ -40,7 +40,6 @@ export interface PeriodicElement { } `, ], - // Use to disable CSS Encapsulation for this component encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, }) diff --git a/apps/virtual-table-demo/src/samples/sample-seven/sample-seven.component.html b/apps/virtual-table-demo/src/samples/sample-seven/sample-seven.component.html index 9d6e2aa0d..b4a6c7230 100644 --- a/apps/virtual-table-demo/src/samples/sample-seven/sample-seven.component.html +++ b/apps/virtual-table-demo/src/samples/sample-seven/sample-seven.component.html @@ -32,18 +32,17 @@ - - {{ key }} - - {{ cell }} - - + @for (key of table.modelColumnKeys; track key) { + + {{ key }} + + {{ cell }} + + + } - - {{ key }} - - {{ cell }} - - + @for (key of table.modelColumnKeys; track key) { + + {{ key }} + + {{ cell }} + + + } - - {{ key }} - - {{ cell }} - - + @for (key of table.modelColumnKeys; track key) { + + {{ key }} + + {{ cell }} + + + } diff --git a/apps/virtual-table-demo/src/samples/sample-seven/sample-seven.component.ts b/apps/virtual-table-demo/src/samples/sample-seven/sample-seven.component.ts index 71dcf8633..f88c2700a 100644 --- a/apps/virtual-table-demo/src/samples/sample-seven/sample-seven.component.ts +++ b/apps/virtual-table-demo/src/samples/sample-seven/sample-seven.component.ts @@ -11,6 +11,7 @@ import {hlJsCode} from '../../../../../.global/utils/hljs-code'; import {MocksGenerator} from '../../mocks-generator'; @Component({ + standalone: false, selector: 'sample-seven', templateUrl: './sample-seven.component.html', changeDetection: ChangeDetectionStrategy.OnPush, diff --git a/apps/virtual-table-demo/src/samples/sample-seventeen/sample-seventeen.component.ts b/apps/virtual-table-demo/src/samples/sample-seventeen/sample-seventeen.component.ts index 36ac5b6d2..ed595c49a 100644 --- a/apps/virtual-table-demo/src/samples/sample-seventeen/sample-seventeen.component.ts +++ b/apps/virtual-table-demo/src/samples/sample-seventeen/sample-seventeen.component.ts @@ -9,6 +9,7 @@ interface LicenseSample { } @Component({ + standalone: false, selector: 'sample-seventeen', templateUrl: './sample-seventeen.component.html', changeDetection: ChangeDetectionStrategy.OnPush, diff --git a/apps/virtual-table-demo/src/samples/sample-six/sample-six.component.ts b/apps/virtual-table-demo/src/samples/sample-six/sample-six.component.ts index 3e64d8682..18d8a26e2 100644 --- a/apps/virtual-table-demo/src/samples/sample-six/sample-six.component.ts +++ b/apps/virtual-table-demo/src/samples/sample-six/sample-six.component.ts @@ -14,6 +14,7 @@ import {MocksGenerator} from '../../mocks-generator'; import {CodeDialogComponent} from '../../shared/dialog/code-dialog.component'; @Component({ + standalone: false, selector: 'sample-six', templateUrl: './sample-six.component.html', changeDetection: ChangeDetectionStrategy.OnPush, diff --git a/apps/virtual-table-demo/src/samples/sample-sixteen/sample-sixteen.component.html b/apps/virtual-table-demo/src/samples/sample-sixteen/sample-sixteen.component.html index c7ebb961b..f4b0e6a14 100644 --- a/apps/virtual-table-demo/src/samples/sample-sixteen/sample-sixteen.component.html +++ b/apps/virtual-table-demo/src/samples/sample-sixteen/sample-sixteen.component.html @@ -34,22 +34,23 @@ Column list - - {{ column.key }} - - - - + {{ column.key }} + + + + + } - + @for (key of table.modelColumnKeys; track key) { + + } Example selection - ({{ table.source?.length }}x{{ table.displayedColumns.length }}) + @if (table.isRendered) { + ({{ table.source?.length }}x{{ table.displayedColumns.length }}) + } Selected: {{ table.selection.selectionModel.size }}
diff --git a/apps/virtual-table-demo/src/samples/sample-thirteen/sample-thirteen.component.ts b/apps/virtual-table-demo/src/samples/sample-thirteen/sample-thirteen.component.ts index 0e791b2cd..5fe086e1d 100644 --- a/apps/virtual-table-demo/src/samples/sample-thirteen/sample-thirteen.component.ts +++ b/apps/virtual-table-demo/src/samples/sample-thirteen/sample-thirteen.component.ts @@ -11,6 +11,7 @@ import {ToastrService} from 'ngx-toastr'; import {hlJsCode} from '../../../../../.global/utils/hljs-code'; @Component({ + standalone: false, selector: 'sample-thirteen', templateUrl: './sample-thirteen.component.html', encapsulation: ViewEncapsulation.None, diff --git a/apps/virtual-table-demo/src/samples/sample-twelve/sample-twelve.component.ts b/apps/virtual-table-demo/src/samples/sample-twelve/sample-twelve.component.ts index bed82885e..ce88877f7 100644 --- a/apps/virtual-table-demo/src/samples/sample-twelve/sample-twelve.component.ts +++ b/apps/virtual-table-demo/src/samples/sample-twelve/sample-twelve.component.ts @@ -12,6 +12,7 @@ import {hlJsCode} from '../../../../../.global/utils/hljs-code'; import {MocksGenerator} from '../../mocks-generator'; @Component({ + standalone: false, selector: 'sample-twelve', templateUrl: './sample-twelve.component.html', encapsulation: ViewEncapsulation.None, diff --git a/apps/virtual-table-demo/src/shared/dialog-template/dialog-template.component.ts b/apps/virtual-table-demo/src/shared/dialog-template/dialog-template.component.ts index a0079fe56..fcfe1b8ec 100644 --- a/apps/virtual-table-demo/src/shared/dialog-template/dialog-template.component.ts +++ b/apps/virtual-table-demo/src/shared/dialog-template/dialog-template.component.ts @@ -3,10 +3,8 @@ import {FormBuilder, FormControl, FormGroup} from '@angular/forms'; import {MAT_DIALOG_DATA, MatDialogRef} from '@angular/material/dialog'; import {Nullable} from '@angular-ru/cdk/typings'; -// eslint-disable-next-line @typescript-eslint/no-explicit-any -type AnyType = any; - @Component({ + standalone: false, selector: 'dialog-template', templateUrl: './dialog-template.template.html', changeDetection: ChangeDetectionStrategy.OnPush, @@ -15,7 +13,7 @@ export class DialogTemplateComponent implements OnInit { public form: Nullable = null; constructor( - @Inject(MAT_DIALOG_DATA) public data: AnyType, + @Inject(MAT_DIALOG_DATA) public data: any, public dialogRef: MatDialogRef, private readonly fb: FormBuilder, ) {} diff --git a/apps/virtual-table-demo/src/shared/dialog-template/dialog-template.template.html b/apps/virtual-table-demo/src/shared/dialog-template/dialog-template.template.html index c8a953f0b..caee6dba8 100644 --- a/apps/virtual-table-demo/src/shared/dialog-template/dialog-template.template.html +++ b/apps/virtual-table-demo/src/shared/dialog-template/dialog-template.template.html @@ -1,17 +1,18 @@

Edit

- - - - - +@if (form) { +
+ @for (input of data | keyvalue; track input.key) { + + + + } +
+}