Skip to content

Commit 6f3d676

Browse files
ckyyccckyycc
authored
Merge pull request #2 from ckyycc/support-angular-21
support angular 21
2 parents c638d47 + 3f3deb8 commit 6f3d676

15 files changed

+347
-298
lines changed

‎.gitignore‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
# See https://docs.github.com/get-started/getting-started-with-git/ignoring-files for more about ignoring files.
2+
3+
# Compiled output
4+
/dist
5+
/tmp
6+
/out-tsc
7+
/bazel-out
8+
9+
# Node
10+
/node_modules
11+
npm-debug.log
12+
yarn-error.log
13+
14+
# IDEs and editors
15+
.idea/
16+
.project
17+
.classpath
18+
.c9/
19+
*.launch
20+
.settings/
21+
*.sublime-workspace
22+
23+
# Visual Studio Code
24+
.vscode/*
25+
!.vscode/settings.json
26+
!.vscode/tasks.json
27+
!.vscode/launch.json
28+
!.vscode/extensions.json
29+
.history/*
30+
31+
# Miscellaneous
32+
/.angular/cache
33+
.sass-cache/
34+
/connect.lock
35+
/coverage
36+
/libpeerconnection.log
37+
testem.log
38+
/typings
39+
40+
# System files
41+
.DS_Store
42+
Thumbs.db
43+
44+
package-lock.json

‎README.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,8 @@
22

33
[![npm](https://img.shields.io/npm/v/ngx-selection-table.svg?style=flat-square)](https://www.npmjs.com/package/ngx-selection-table) [![npm downloads](https://img.shields.io/npm/dm/ngx-selection-table.svg)](https://www.npmjs.com/package/ngx-selection-table) [![Travis](https://img.shields.io/travis/ckyycc/ngx-selection-table.svg?style=flat-square)](https://travis-ci.org/ckyycc/ngx-selection-table) [![MIT licensed](https://img.shields.io/badge/license-MIT-blue.svg?style=flat-square)](https://github.com/ckyycc/ngx-selection-table/blob/master/LICENSE)
44

5-
An Angular 13 module for selecting data from table with checkbox, filter and collapsible/expandable sub title.\
6-
For Angular 6 / 7 support please use older versions.
5+
An Angular 21 module for selecting data from table with checkbox, filter and collapsible/expandable sub title.\
6+
For Angular 6 / 7 / 13 support please use older versions.
77

88
## Installation
99
```bash

‎angular.json‎

Lines changed: 27 additions & 71 deletions
Original file line numberDiff line numberDiff line change
@@ -8,110 +8,66 @@
88
"sourceRoot": "src",
99
"projectType": "application",
1010
"prefix": "app",
11-
"schematics": {},
11+
"schematics": {
12+
"@schematics/angular:component": {
13+
"style": "scss"
14+
}
15+
},
1216
"architect": {
1317
"build": {
14-
"builder": "@angular-devkit/build-angular:browser",
18+
"builder": "@angular/build:application",
1519
"options": {
1620
"outputPath": "dist/ngx-selection-table",
1721
"index": "src/demo/index.html",
18-
"main": "src/demo/main.ts",
19-
"polyfills": "src/polyfills.ts",
22+
"browser": "src/demo/main.ts",
2023
"tsConfig": "src/tsconfig.app.json",
2124
"assets": ["src/assets"],
2225
"styles": [],
2326
"scripts": []
2427
},
2528
"configurations": {
2629
"production": {
27-
"fileReplacements": [
28-
{
29-
"replace": "src/environments/environment.ts",
30-
"with": "src/environments/environment.prod.ts"
31-
}
32-
],
3330
"optimization": true,
34-
"outputHashing": "all",
35-
"sourceMap": false,
36-
"extractCss": true,
37-
"namedChunks": false,
38-
"aot": true,
39-
"extractLicenses": true,
40-
"vendorChunk": false,
41-
"buildOptimizer": true
31+
"outputHashing": "all"
32+
},
33+
"development": {
34+
"optimization": false,
35+
"extractLicenses": false,
36+
"sourceMap": true
4237
}
43-
}
38+
},
39+
"defaultConfiguration": "production"
4440
},
4541
"serve": {
46-
"builder": "@angular-devkit/build-angular:dev-server",
47-
"options": {
48-
"browserTarget": "ngx-selection-table:build"
49-
},
42+
"builder": "@angular/build:dev-server",
5043
"configurations": {
5144
"production": {
52-
"browserTarget": "ngx-selection-table:build:production"
45+
"buildTarget": "ngx-selection-table:build:production"
46+
},
47+
"development": {
48+
"buildTarget": "ngx-selection-table:build:development"
5349
}
54-
}
50+
},
51+
"defaultConfiguration": "development"
5552
},
5653
"extract-i18n": {
57-
"builder": "@angular-devkit/build-angular:extract-i18n",
58-
"options": {
59-
"browserTarget": "ngx-selection-table:build"
60-
}
54+
"builder": "@angular/build:extract-i18n"
6155
},
6256
"test": {
63-
"builder": "@angular-devkit/build-angular:karma",
57+
"builder": "@angular/build:karma",
6458
"options": {
6559
"main": "src/test.ts",
66-
"polyfills": "src/polyfills.ts",
6760
"tsConfig": "src/tsconfig.spec.json",
6861
"karmaConfig": "src/karma.conf.js",
6962
"styles": [],
7063
"scripts": [],
7164
"assets": []
7265
}
73-
},
74-
"lint": {
75-
"builder": "@angular-devkit/build-angular:tslint",
76-
"options": {
77-
"tsConfig": [
78-
"src/tsconfig.app.json",
79-
"src/tsconfig.spec.json"
80-
],
81-
"exclude": [
82-
"**/node_modules/**"
83-
]
84-
}
85-
}
86-
}
87-
},
88-
"ngx-selection-table-e2e": {
89-
"root": "e2e/",
90-
"projectType": "application",
91-
"architect": {
92-
"e2e": {
93-
"builder": "@angular-devkit/build-angular:protractor",
94-
"options": {
95-
"protractorConfig": "e2e/protractor.conf.js",
96-
"devServerTarget": "ngx-selection-table:serve"
97-
},
98-
"configurations": {
99-
"production": {
100-
"devServerTarget": "ngx-selection-table:serve:production"
101-
}
102-
}
103-
},
104-
"lint": {
105-
"builder": "@angular-devkit/build-angular:tslint",
106-
"options": {
107-
"tsConfig": "e2e/tsconfig.e2e.json",
108-
"exclude": [
109-
"**/node_modules/**"
110-
]
111-
}
11266
}
11367
}
11468
}
11569
},
116-
"defaultProject": "ngx-selection-table"
70+
"cli": {
71+
"analytics": false
72+
}
11773
}

‎package.json‎

Lines changed: 27 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "ngx-selection-table",
3-
"version": "1.2.0",
3+
"version": "21.0.0",
44
"scripts": {
55
"ng": "ng",
66
"start": "ng serve",
@@ -30,37 +30,33 @@
3030
"url": "https://github.com/ckyycc/ngx-selection-table/issues"
3131
},
3232
"devDependencies": {
33-
"@angular-devkit/build-angular": "13.3.9",
34-
"@angular/cli": "^13.3.9",
35-
"@angular/common": "^13.3.9",
36-
"@angular/compiler": "^13.3.9",
37-
"@angular/compiler-cli": "^13.3.9",
38-
"@angular/core": "^13.3.9",
39-
"@angular/forms": "^13.3.9",
40-
"@angular/platform-browser": "^13.3.9",
41-
"@angular/platform-browser-dynamic": "^13.3.9",
42-
"@types/jasmine": "~3.10.6",
43-
"@types/jasminewd2": "~2.0.10",
44-
"@types/node": "17.0.38",
45-
"angular-cli-ghpages": "^1.0.3",
46-
"codelyzer": "^6.0.2",
47-
"jasmine-core": "^3.10.1",
48-
"jasmine-spec-reporter": "^7.0.0",
49-
"karma": "^6.3.18",
50-
"karma-chrome-launcher": "^3.1.1",
51-
"karma-coverage-istanbul-reporter": "^3.0.3",
52-
"karma-jasmine": "^5.1.0",
53-
"karma-jasmine-html-reporter": "^1.7.0",
54-
"ng-packagr": "^13.3.1",
55-
"ts-node": "^10.7.0",
56-
"tslib": "^2.1.0",
57-
"typescript": "^4.5.5"
33+
"@angular/build": "^21.1.1",
34+
"@angular/cli": "^21.1.1",
35+
"@angular/common": "^21.1.1",
36+
"@angular/compiler": "^21.1.1",
37+
"@angular/compiler-cli": "^21.1.1",
38+
"@angular/core": "^21.1.1",
39+
"@angular/forms": "^21.1.1",
40+
"@angular/platform-browser": "^21.1.1",
41+
"@angular/platform-browser-dynamic": "^21.1.1",
42+
"@types/jasmine": "~5.1.4",
43+
"@types/node": "^22.10.2",
44+
"angular-cli-ghpages": "^2.0.1",
45+
"jasmine-core": "~5.4.0",
46+
"karma": "~6.4.4",
47+
"karma-chrome-launcher": "~3.2.0",
48+
"karma-coverage": "~2.2.1",
49+
"karma-jasmine": "~5.1.0",
50+
"karma-jasmine-html-reporter": "~2.1.0",
51+
"ng-packagr": "^21.1.0",
52+
"ts-node": "^10.9.2",
53+
"tslib": "^2.8.1",
54+
"typescript": "^5.9.3"
5855
},
5956
"peerDependencies": {
60-
"@angular/common": "^13.3.9",
61-
"@angular/core": "^13.3.9",
62-
"@angular/forms": "^13.3.9",
63-
"@angular/platform-browser": "^13.3.9",
64-
"zone.js": "^0.11.5"
57+
"@angular/common": "^21.1.1",
58+
"@angular/core": "^21.1.1",
59+
"@angular/forms": "^21.1.1",
60+
"@angular/platform-browser": "^21.1.1"
6561
}
6662
}

‎src/demo/app.component.ts‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,11 @@
11
import {Component} from '@angular/core';
2+
import { SelectionTableComponent } from '../ngx-selection-table';
23

34
@Component({
45
selector: 'app-root',
56
templateUrl: './app.component.html',
6-
styleUrls: ['./app.component.scss']
7+
styleUrls: ['./app.component.scss'],
8+
imports: [SelectionTableComponent]
79
})
810
export class AppComponent {
911
filter = true;

‎src/demo/app.module.ts‎

Lines changed: 3 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,12 @@
11
import { BrowserModule } from '@angular/platform-browser';
22
import { NgModule } from '@angular/core';
3-
import { SelectionTableModule } from '../ngx-selection-table';
43
import { AppComponent } from './app.component';
54

65
@NgModule({
7-
declarations: [
8-
AppComponent
9-
],
6+
declarations: [],
107
imports: [
11-
BrowserModule,
12-
SelectionTableModule,
8+
AppComponent,
9+
BrowserModule
1310
],
1411
providers: [],
1512
bootstrap: [AppComponent]

‎src/karma.conf.js‎

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -9,17 +9,20 @@ module.exports = function (config) {
99
require('karma-jasmine'),
1010
require('karma-chrome-launcher'),
1111
require('karma-jasmine-html-reporter'),
12-
require('karma-coverage-istanbul-reporter'),
13-
require('@angular-devkit/build-angular/plugins/karma')
12+
require('karma-coverage')
1413
],
1514
client: {
1615
clearContext: false, // leave Jasmine Spec Runner output visible in browser
1716
captureConsole: true,
1817
},
19-
coverageIstanbulReporter: {
18+
coverageReporter: {
2019
dir: require('path').join(__dirname, '../coverage'),
21-
reports: ['html', 'lcovonly'],
22-
fixWebpackSourcePaths: true
20+
subdir: '.',
21+
reporters: [
22+
{ type: 'html' },
23+
{ type: 'text-summary' },
24+
{ type: 'lcovonly' }
25+
]
2326
},
2427
reporters: ['progress', 'kjhtml'],
2528
port: 9876,

‎src/ngx-selection-table/index.ts‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1 @@
1-
export * from './selection-table.component';
2-
export * from './selection-table.module';
1+
export * from './selection-table.component';

‎src/ngx-selection-table/selection-table.component.html‎

Lines changed: 18 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,38 +1,38 @@
11
<table>
22
<tr>
3-
<th class="sticky-header" *ngFor="let column of columns" nowrap>{{column=='select'? '': column}}</th>
3+
<th class="sticky-header" *ngFor="let column of columns()" nowrap>{{column=='select'? '': column}}</th>
44
</tr>
5-
<tr *ngIf="filter">
6-
<td [colSpan]="columns.length">
5+
<tr *ngIf="filter()">
6+
<td [colSpan]="columns().length">
77
<div class="search">
88
<div class="icon-container">
9-
<div class="search-icon" *ngIf="!filterValue">&#9906;</div>
10-
<div class="clear-icon" *ngIf="filterValue" (click)="filterValue=''">&times;</div>
9+
<div class="search-icon" *ngIf="!filterValue()">&#9906;</div>
10+
<div class="clear-icon" *ngIf="filterValue()" (click)="filterValue.set('')">&times;</div>
1111
</div>
12-
<input type="text" class="search-input" placeholder="Enter Search Terms Here..." [(ngModel)]="filterValue">
12+
<input type="text" class="search-input" placeholder="Enter Search Terms Here..." [ngModel]="filterValue()" (ngModelChange)="filterValue.set($event)">
1313
</div>
1414
</td>
1515
</tr>
16-
<ng-container *ngFor="let row of tableSourceAfterFiltered">
17-
<tr *ngIf="!itemHiddenFlag[row[key]]" (click)="onClick($event, row); $event.stopPropagation()"
18-
[id]="row[key]"
19-
[title]="tooltipColumn? row[tooltipColumn]? row[tooltipColumn]: '' : ''"
16+
<ng-container *ngFor="let row of tableSourceAfterFiltered()">
17+
<tr *ngIf="!itemHiddenFlag()[row[key()]]" (click)="onClick($event, row); $event.stopPropagation()"
18+
[id]="row[key()]"
19+
[title]="tooltipColumn()? row[tooltipColumn()]? row[tooltipColumn()]: '' : ''"
2020
[class.selected]="row.checked">
21-
<td *ngIf="!row.header && checkbox" class="checkbox">
21+
<td *ngIf="!row.header && checkbox()" class="checkbox">
2222
<label class="container">
2323
<input type='checkbox' name='check' (change)="onChange($event, row); $event.stopPropagation()" [checked]="row.checked">
2424
<span class="checkmark"></span>
2525
</label>
2626
</td>
27-
<th *ngIf="row.header" [colSpan]="columns.length" class="subtopic" (click)="toggleSubTopic($event, row)">
28-
<span *ngIf="!isSubTopicHidden(row[key])">&#8722;</span>
29-
<span *ngIf="isSubTopicHidden(row[key])">&#43;</span> {{row[headColumn]}}
27+
<th *ngIf="row.header" [colSpan]="columns().length" class="subtopic" (click)="toggleSubTopic($event, row)">
28+
<span *ngIf="!isSubTopicHidden(row[key()])">&#8722;</span>
29+
<span *ngIf="isSubTopicHidden(row[key()])">&#43;</span> {{row[headColumn()]}}
3030
</th>
31-
<ng-container *ngIf="!row.header && !checkbox">
32-
<td *ngFor="let column of columns">{{row[column]}}</td>
31+
<ng-container *ngIf="!row.header && !checkbox()">
32+
<td *ngFor="let column of columns()">{{row[column]}}</td>
3333
</ng-container>
34-
<ng-container *ngIf="!row.header && checkbox">
35-
<td *ngFor="let column of columns.slice(1)">{{row[column].constructor.name === 'Number'? (row[column] | number:'1.0-2') : row[column] }}</td>
34+
<ng-container *ngIf="!row.header && checkbox()">
35+
<td *ngFor="let column of columns().slice(1)">{{row[column].constructor.name === 'Number'? (row[column] | number:'1.0-2') : row[column] }}</td>
3636
</ng-container>
3737
</tr>
3838
</ng-container>

0 commit comments

Comments
 (0)