Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat: update to angular 15 #117

Merged
merged 2 commits into from
Jun 5, 2024
Merged

feat: update to angular 15 #117

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
996f0db
feat: update to angular 15
sheikalthaf May 28, 2024
d0aeb71
fix: some fixes for the angular 15 upgrade
llorenspujol Jun 5, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
21,697 changes: 13,885 additions & 7,812 deletions package-lock.json
View file
Open in desktop

Large diffs are not rendered by default.

40 changes: 20 additions & 20 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,31 +22,31 @@
},
"private": true,
"dependencies": {
"@angular/animations": "^14.2.2",
"@angular/cdk": "^14.2.2",
"@angular/common": "^14.2.2",
"@angular/compiler": "^14.2.2",
"@angular/core": "^14.2.2",
"@angular/forms": "^14.2.2",
"@angular/material": "^14.2.2",
"@angular/platform-browser": "^14.2.2",
"@angular/platform-browser-dynamic": "^14.2.2",
"@angular/router": "^14.2.2",
"@angular/animations": "^15.2.10",
"@angular/cdk": "^15.2.9",
"@angular/common": "^15.2.10",
"@angular/compiler": "^15.2.10",
"@angular/core": "^15.2.10",
"@angular/forms": "^15.2.10",
"@angular/material": "^15.2.9",
"@angular/platform-browser": "^15.2.10",
"@angular/platform-browser-dynamic": "^15.2.10",
"@angular/router": "^15.2.10",
"@swimlane/ngx-charts": "~20.1.0",
"ngx-color-picker": "^13.0.0",
"rxjs": "~6.6.0",
"tslib": "^2.3.1",
"zone.js": "~0.11.4"
},
"devDependencies": {
"@angular-devkit/build-angular": "^14.2.2",
"@angular-eslint/builder": "~13.4.0",
"@angular-eslint/eslint-plugin": "~13.4.0",
"@angular-eslint/eslint-plugin-template": "~13.4.0",
"@angular-eslint/schematics": "~13.4.0",
"@angular-eslint/template-parser": "~13.4.0",
"@angular/cli": "^14.2.2",
"@angular/compiler-cli": "^14.2.2",
"@angular-devkit/build-angular": "^15.2.11",
"@angular-eslint/builder": "~15.2.1",
"@angular-eslint/eslint-plugin": "~15.2.1",
"@angular-eslint/eslint-plugin-template": "~15.2.1",
"@angular-eslint/schematics": "~15.2.1",
"@angular-eslint/template-parser": "~15.2.1",
"@angular/cli": "^15.2.11",
"@angular/compiler-cli": "^15.2.10",
"@commitlint/cli": "~11.0.0",
"@commitlint/config-angular": "~11.0.0",
"@commitlint/config-conventional": "~11.0.0",
Expand All @@ -67,11 +67,11 @@
"karma-coverage": "~2.0.3",
"karma-jasmine": "~4.0.0",
"karma-jasmine-html-reporter": "^1.5.0",
"ng-packagr": "^14.0.2",
"ng-packagr": "^15.2.2",
"protractor": "~7.0.0",
"standard-version": "~9.1.0",
"ts-node": "~8.3.0",
"typescript": "~4.7.3"
"typescript": "~4.9.5"
},
"config": {
"commitizen": {
Expand Down
4 changes: 2 additions & 2 deletions projects/angular-grid-layout/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,8 +20,8 @@
"angular-layout"
],
"peerDependencies": {
"@angular/common": ">=14.0.0",
"@angular/core": ">=14.0.0"
"@angular/common": ">=15.0.0",
"@angular/core": ">=15.0.0"
},
"dependencies": {
"tslib": "^2.3.1"
Expand Down
11 changes: 0 additions & 11 deletions projects/angular-grid-layout/src/test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,21 +8,10 @@ import {
platformBrowserDynamicTesting
} from '@angular/platform-browser-dynamic/testing';

declare const require: {
context(path: string, deep?: boolean, filter?: RegExp): {
keys(): string[];
<T>(id: string): T;
};
};

// First, initialize the Angular testing environment.
getTestBed().initTestEnvironment(
BrowserDynamicTestingModule,
platformBrowserDynamicTesting(), {
teardown: { destroyAfterEach: false }
}
);
// Then we find all the tests.
const context = require.context('./', true, /\.spec\.ts$/);
// And load the modules.
context.keys().map(context);
1 change: 0 additions & 1 deletion projects/angular-grid-layout/tsconfig.lib.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@
"extends": "../../tsconfig.json",
"compilerOptions": {
"outDir": "../../out-tsc/lib",
"target": "es2020",
"declaration": true,
"declarationMap": true,
"inlineSources": true,
Expand Down
17 changes: 0 additions & 17 deletions projects/demo-app/.browserslistrc
View file
Open in desktop

This file was deleted.

3 changes: 2 additions & 1 deletion projects/demo-app/src/app/app.module.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { HttpClientModule } from '@angular/common/http';
import { MatIconModule } from '@angular/material/icon';
import { MatButtonModule } from '@angular/material/button';
import { MAT_FORM_FIELD_DEFAULT_OPTIONS } from '@angular/material/form-field';

@NgModule({
declarations: [
Expand All @@ -19,7 +20,7 @@ import { MatButtonModule } from '@angular/material/button';
MatIconModule,
MatButtonModule
],
providers: [],
providers: [ { provide: MAT_FORM_FIELD_DEFAULT_OPTIONS, useValue: { appearance: 'outline' } }],
bootstrap: [KtdAppComponent]
})
export class KtdAppModule {}
39 changes: 20 additions & 19 deletions projects/demo-app/src/app/playground/playground.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,28 +4,29 @@
<div class="controls-container">
<button mat-raised-button (click)="generateLayout()">Generate layout</button>
<button mat-raised-button (click)="addItemToLayout()">Add item</button>
<mat-form-field color="accent">
<mat-form-field color="accent" style="width: 150px;">
<mat-label>Compact type</mat-label>
<mat-select [value]="compactType" (selectionChange)="onCompactTypeChange($event)">
<mat-option [value]="'vertical'">vertical</mat-option>
<mat-option [value]="'horizontal'">horizontal</mat-option>
<mat-option [value]="'none'">-</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field color="accent" style="width: 64px">
<mat-form-field color="accent" style="width: 84px">
<mat-label>Columns</mat-label>
<input matInput type="number" [value]="cols + ''" (input)="onColsChange($event)">
</mat-form-field>
<mat-form-field color="accent" style="width: 120px">
<mat-label>Row height</mat-label>
<input matInput
type="number"
[value]="rowHeight + ''"
style="width: 60%;"
[disabled]="rowHeightFit"
(input)="onRowHeightChange($event)">
<mat-checkbox style="position: absolute; right: 4px; bottom: 4px;" (change)="onRowHeightFitChange($event)">Fit</mat-checkbox>
</mat-form-field>
<div>
<mat-form-field color="accent" style="width: 100px">
<mat-label>Row height</mat-label>
<input matInput
type="number"
[value]="rowHeight + ''"
[disabled]="rowHeightFit"
(input)="onRowHeightChange($event)">
</mat-form-field>
<mat-checkbox (change)="onRowHeightFitChange($event)">Fit</mat-checkbox>
</div>
<mat-form-field color="accent" style="width: 94px">
<mat-label>Grid height</mat-label>
<input matInput
Expand All @@ -38,18 +39,18 @@
<mat-label>Drag Threshold</mat-label>
<input matInput type="number" [value]="dragStartThreshold + ''" (input)="onDragStartThresholdChange($event)">
</mat-form-field>
<mat-form-field>
<mat-form-field style="width: 84px;">
<mat-label>Gap</mat-label>
<input matInput type="number" [value]="gap" (input)="onGapChange($event)">
</mat-form-field>
<mat-form-field color="accent">
<mat-form-field color="accent" style="width: 164px;">
<mat-label>Transition type</mat-label>
<mat-select [value]="currentTransition" (selectionChange)="onTransitionChange($event)">
<mat-option *ngFor="let transition of transitions" [value]="transition.value">{{transition.name}}</mat-option>
</mat-select>
</mat-form-field>

<mat-form-field *ngIf="placeholders && placeholders.length > 0" color="accent">
<mat-form-field *ngIf="placeholders && placeholders.length > 0" color="accent" style="width: 184px;">
<mat-label>Custom Placeholder</mat-label>
<mat-select [value]="currentPlaceholder" (selectionChange)="onPlaceholderChange($event)">
<mat-option *ngFor="let placeholder of placeholders" [value]="placeholder">{{placeholder}}</mat-option>
Expand Down Expand Up @@ -86,10 +87,10 @@
(change)="onPreventCollisionChange($event.checked)">
Prevent Collision
</mat-checkbox>
<mat-chip-list>
<mat-chip color="accent" [selected]="isDragging">isDragging</mat-chip>
<mat-chip color="accent" [selected]="isResizing">isResizing</mat-chip>
</mat-chip-list>
<mat-chip-listbox>
<mat-chip-option color="accent" [selected]="isDragging">isDragging</mat-chip-option>
<mat-chip-option color="accent" [selected]="isResizing">isResizing</mat-chip-option>
</mat-chip-listbox>
<div class="grid-background-container">
<div style="margin-right: 6px">Background grid</div>
<div class="grid-background">
Expand Down
26 changes: 18 additions & 8 deletions projects/demo-app/src/styles/theme.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -56,19 +56,29 @@ $dark-theme-background-palette: (
tooltip: map.get(mat.$grey-palette, 700),
);

$app-theme: (
primary: $app-primary,
accent: $app-accent,
warn: $app-warn,
is-dark: true,
foreground: $dark-theme-foreground-palette,
background: $dark-theme-background-palette,
);
$app-theme: mat.define-dark-theme((
color: (
primary: $app-primary,
accent: $app-accent,
warn: $app-warn
),
typography: mat.define-typography-config(),
density: 0,
));


// Include the common styles for Angular Material. We include this here so that you only
// have to load a single css file for Angular Material in your app.
// Important: include this mixin only once.
// TODO(v15): As of v15 mat.legacy-core no longer includes default typography styles.
// The following line adds:
// 1. Default typography styles for all components
// 2. Styles for typography hierarchy classes (e.g. .mat-headline-1)
// If you specify typography styles for the components you use elsewhere, you should delete this line.
// If you don't need the default component typographies but still want the hierarchy styles,
// you can delete this line and instead use:
// `@include mat.legacy-typography-hierarchy(mat.define-legacy-typography-config());`
// @include mat.all-component-typographies();
@include mat.core();

// Specifies the theming for angular material components
Expand Down
11 changes: 0 additions & 11 deletions projects/demo-app/src/test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,21 +7,10 @@ import {
platformBrowserDynamicTesting
} from '@angular/platform-browser-dynamic/testing';

declare const require: {
context(path: string, deep?: boolean, filter?: RegExp): {
keys(): string[];
<T>(id: string): T;
};
};

// First, initialize the Angular testing environment.
getTestBed().initTestEnvironment(
BrowserDynamicTestingModule,
platformBrowserDynamicTesting(), {
teardown: { destroyAfterEach: false }
}
);
// Then we find all the tests.
const context = require.context('./', true, /\.spec\.ts$/);
// And load the modules.
context.keys().map(context);
3 changes: 2 additions & 1 deletion tsconfig.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,9 +12,10 @@
"experimentalDecorators": true,
"moduleResolution": "node",
"importHelpers": true,
"target": "es2020",
"target": "ES2022",
"module": "es2020",
"strictNullChecks": true,
"useDefineForClassFields": false,
"lib": [
"es2019",
"dom"
Expand Down
Loading