Support Angular 19 (#1082)

* feat: angular 19
* feat: angular cdk upgrade
* fix: sass refactor
* fix: update peer dependencies
* fix: CHANGELOG
* feat: rename color files for consistency
* feat: new color files
* feat: version bump
* feat: Indeterminate Checkbox  (#1083)
* fix:  position of check mark when checked set to true
* fix: upgrade ng2-file-upload
* feat: migrate to yarn
* fix: moment issues
* fix: ngx-time
* fix: format and lint
* fix: tests

Author: steveblue

.eslintrc.js

@@ -1,62 +1,46 @@
-
 module.exports = {
-  'root': true,
+  root: true,
 
-  ignorePatterns: [
-    'projects/**/*',
-    'dist/**/*',
-    'cypress/**/*'
-  ],
+  ignorePatterns: ['dist/**/*', 'cypress/**/*'],
 
-  extends: [
-    '@swimlane',
-    'prettier'
-  ],
+  extends: ['@swimlane', 'prettier'],
 
-  rules: {
-  },
+  rules: {},
 
   overrides: [
     {
-      files: [
-        '*.ts'
-      ],
-      parser: '@typescript-eslint/parser',
+      files: ['*.ts'],
       parserOptions: {
-        project: [
-          'tsconfig.json'
-        ],
-        createDefaultProgram: true
+        allowAutomaticSingleRunInference: true,
+        project: ['tsconfig.json', 'tsconfig.app.json', 'tsconfig.spec.json', 'cypress/tsconfig.json'],
+        tsconfigRootDir: __dirname
       },
       extends: [
         '@swimlane/eslint-config/typescript',
         'plugin:@angular-eslint/recommended',
         'plugin:@angular-eslint/template/process-inline-templates',
+        'plugin:@typescript-eslint/recommended',
         'prettier'
       ],
       rules: {
         // off for demo packages
         'no-console': 'off',
-        
+
         // fix these in this repo, off for now
         'guard-for-in': 'off',
-        '@angular-eslint/no-host-metadata-property': 'off',
         '@angular-eslint/no-output-native': 'off',
         '@angular-eslint/component-class-suffix': 'off',
         '@angular-eslint/directive-class-suffix': 'off',
         '@angular-eslint/no-output-on-prefix': 'off',
+        '@angular-eslint/prefer-standalone': 'off',
         '@typescript-eslint/explicit-module-boundary-types': 'off',
-        '@typescript-eslint/no-explicit-any': 'off',
+        '@typescript-eslint/no-explicit-any': 'off'
       }
     },
     {
-      'files': [
-        '*.html'
-      ],
-      'extends': [
-        'plugin:@angular-eslint/template/recommended'
-      ],
-      'rules': {}
+      files: ['*.html'],
+      extends: ['plugin:@angular-eslint/template/recommended'],
+      rules: {}
     }
   ]
-};
+};

.github/workflows/test_and_deploy.yml

@@ -1,37 +1,37 @@
 name: Build, Test, and Deploy
 
-env:
-  NODE_LATEST: 18.x
-  NODE_OPTIONS: --max_old_space_size=6144
-
 on: [push]
-
 jobs:
   build:
     runs-on: ubuntu-latest
 
     steps:
       - name: Checkout
-        uses: actions/checkout@v3
-      - name: Use Node.js ${{ env.NODE_LATEST }}
+        uses: actions/checkout@v4.2.0
+
+      - name: Setup Node.js
         uses: actions/setup-node@v3
         with:
-          node-version: ${{ env.NODE_LATEST }}
+          node-version: 20.17.0
 
-      - name: Install
-        uses: bahmutov/npm-install@v1
-        with:
-          install-command: npm ci --legacy-peer-deps
+      - name: Enable Corepack
+        run: corepack enable
+
+      - name: Install Yarn
+        run: corepack prepare yarn@4.5.1 --activate
+
+      - name: Install dependencies
+        run: yarn install --immutable
 
       - name: Build
         run: |
-          npm run build
+          yarn build
         env:
           CI: true
 
       - name: Test
         run: |
-          npm run test --if-present
+          yarn test
         env:
           CI: true
 

.gitignore

@@ -45,3 +45,4 @@ cypress/screenshots
 
 .angular/*
 .nx/*
+.yarn/*

.yarnrc.yml

@@ -0,0 +1,5 @@
+checksumBehavior: update
+
+defaultSemverRangePrefix: ''
+
+nodeLinker: node-modules

README.md

@@ -11,27 +11,26 @@ Component & Style Library for Angular by Swimlane.
 
 ## Building ngx-ui
 
-Run `npm run build:lib` to build ngx-ui. This must be done prior to building the demo.
+Run `yarn build:lib` to build ngx-ui. This must be done prior to building the demo.
 
 ## Development server
 
-Run `npm run start` to serve the demo at `http://localhost:4200/`. The app will automatically reload if you change any of the source files.
+Run `yarn start` to serve the demo at `http://localhost:4200/`. The app will automatically reload if you change any of the source files.
 
 ## Building
 
-Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory.
+Run `yarn build` to build the project. The build artifacts will be stored in the `dist/` directory.
 
 ## Running tests
 
-- Run `npm run test` to execute unit tests
-- Run `ng cypress` to execute the end-to-end tests via Cypress.
+- Run `yarn test` to execute the linter, prettier check, unit and end-to-end tests.
 
 ## Release
 
 - Checkout master (`git checkout master`)
 - Pull master (`git pull`)
 - Refresh node modules (`npm ci`)
-- Run tests (`npm test`)
+- Run tests (`yarn test`)
 - Examine log to determine next version (X.Y.Z)
 - Run `git checkout -b release/X.Y.Z`
 - Update version in `projects/swimlane/ngx-ui/package.json`.

angular.json

@@ -20,18 +20,33 @@
             "customWebpackConfig": {
               "path": "./extra-webpack.config.js"
             },
-            "allowedCommonJsDependencies": ["moment-timezone", "mousetrap", "ajv", "codemirror"],
+            "allowedCommonJsDependencies": [
+              "moment-timezone",
+              "mousetrap",
+              "ajv",
+              "codemirror"
+            ],
             "aot": true,
             "preserveSymlinks": true,
             "outputPath": "dist/ngx-ui",
             "index": "src/index.html",
             "main": "src/main.ts",
             "polyfills": "src/polyfills.ts",
             "tsConfig": "src/tsconfig.app.json",
-            "assets": ["src/favicon.ico", "src/favicon-16x16.png", "src/assets", "src/.nojekyll"],
-            "styles": ["src/styles.scss"],
+            "assets": [
+              "src/favicon.ico",
+              "src/favicon-16x16.png",
+              "src/assets",
+              "src/.nojekyll"
+            ],
+            "styles": [
+              "src/styles.scss"
+            ],
             "stylePreprocessorOptions": {
-              "includePaths": ["dist/swimlane/ngx-ui/lib/styles", "dist/swimlane/ngx-ui/lib/assets"]
+              "includePaths": [
+                "dist/swimlane/ngx-ui/lib/styles",
+                "dist/swimlane/ngx-ui/lib/assets"
+              ]
             },
             "scripts": [],
             "sourceMap": {
@@ -74,11 +89,11 @@
         "serve": {
           "builder": "@angular-builders/custom-webpack:dev-server",
           "options": {
-            "browserTarget": "ngx-ui:build"
+            "buildTarget": "ngx-ui:build"
           },
           "configurations": {
             "production": {
-              "browserTarget": "ngx-ui:build:production"
+              "buildTarget": "ngx-ui:build:production"
             }
           }
         },
@@ -89,24 +104,29 @@
           }
         },
         "test": {
-          "builder": "@angular-builders/custom-webpack:karma",
+          "builder": "@angular-devkit/build-angular:web-test-runner",
           "options": {
-            "customWebpackConfig": {
-              "path": "./extra-webpack.config.js"
-            },
             "main": "src/test.ts",
             "polyfills": "src/polyfills.ts",
             "tsConfig": "src/tsconfig.spec.json",
-            "karmaConfig": "src/karma.conf.js",
-            "styles": ["src/styles.scss"],
+            "styles": [
+              "src/styles.scss"
+            ],
             "scripts": [],
-            "assets": ["src/favicon.ico", "src/assets"]
+            "assets": [
+              "src/favicon.ico",
+              "src/assets"
+            ]
           }
         },
         "lint": {
           "builder": "@angular-eslint/builder:lint",
           "options": {
-            "lintFilePatterns": ["src/**/*.ts", "src/**/*.html", "cypress/**/*.js"]
+            "lintFilePatterns": [
+              "src/**/*.ts",
+              "src/**/*.html",
+              "cypress/**/*.js"
+            ]
           }
         }
       }
@@ -179,7 +199,10 @@
         "lint": {
           "builder": "@angular-eslint/builder:lint",
           "options": {
-            "lintFilePatterns": ["projects/swimlane/ngx-ui/**/*.ts", "projects/swimlane/ngx-ui/**/*.html"]
+            "lintFilePatterns": [
+              "projects/swimlane/ngx-ui/**/*.ts",
+              "projects/swimlane/ngx-ui/**/*.html"
+            ]
           }
         }
       }
@@ -188,4 +211,4 @@
   "cli": {
     "analytics": false
   }
-}
+}

cypress/e2e/forms/checkbox.cy.ts

@@ -15,6 +15,7 @@ describe('Checkbox', () => {
     beforeEach(() => {
       cy.get('#section-1').as('SUT');
       cy.getByName('chk1').as('CUT');
+      cy.getByName('chk6').as('INDETERMINATE_CUT');
     });
 
     afterEach(() => {
@@ -46,6 +47,13 @@ describe('Checkbox', () => {
       cy.get('@CUT').ngxGetValue().should('equal', true);
     });
 
+    it('can uncheck from indeterminate state', () => {
+      cy.get('@INDETERMINATE_CUT').click();
+      cy.get('@INDETERMINATE_CUT').ngxGetValue().should('equal', false);
+      cy.get('@INDETERMINATE_CUT').click();
+      cy.get('@INDETERMINATE_CUT').ngxGetValue().should('equal', true);
+    });
+
     it('is keyboard accessible', () => {
       cy.get('@SUT').find('h1').contains('Demo').realClick();