feat: update to ng 18, material 3 (#57)

* feat: update to ng 18, material 3

* refactor(playwright, MD3): adjust changes to playwright-bdd v7 and MD3

.eslintrc.json

@@ -28,16 +28,19 @@
     {
       "files": ["*.ts", "*.tsx"],
       "plugins": ["prettier"],
-      "extends": [
-        "plugin:@nx/typescript",
-        "plugin:prettier/recommended"
-      ],
-      "rules": {}
+      "extends": ["plugin:@nx/typescript", "plugin:prettier/recommended"],
+      "rules": {
+        "@typescript-eslint/no-extra-semi": "error",
+        "no-extra-semi": "off"
+      }
     },
     {
       "files": ["*.js", "*.jsx"],
       "extends": ["plugin:@nx/javascript"],
-      "rules": {}
+      "rules": {
+        "@typescript-eslint/no-extra-semi": "error",
+        "no-extra-semi": "off"
+      }
     },
     {
       "files": ["*.spec.ts", "*.spec.tsx", "*.spec.js", "*.spec.jsx"],

.gitignore

@@ -51,6 +51,7 @@ docker/verdaccio/conf/storage/**/*
 build-storybook.log
 .nx
 .nx/cache
+.nx/workspace-data
 
 # BDD
 /apps/**-e2e/.feature-generate-bdd

.prettierignore

@@ -4,4 +4,5 @@
 /dist
 /coverage
 
-/.nx/cache
+/.nx/cache
+/.nx/workspace-data

README.md

@@ -29,6 +29,8 @@ To get started with this project, follow these steps:
 
 1. Add `"node_modules/@amfrontender/ngx-multi-keywords-highlighter/themes/index.scss"` or `"node_modules/@amfrontender/ngx-multi-keywords-highlighter/themes/themes.scss"` to your `angular.json` or `project.json` if you use NX to the build options of styles.
 
+- Generate Material 3 theme: `nx generate @angular/material:m3-theme`
+
 2. Import the `NgxMultiKeywordsHighlighterModule` to your `app.module.ts`
 
     ```typescript
@@ -44,7 +46,7 @@ To get started with this project, follow these steps:
         provideAnimations(),
         importProvidersFrom(
           NgxMultiKeywordsHighlighterModule.forRoot({
-            themeColor: MATERIAL_COLOR.ACCENT,
+            themeColor: MATERIAL_COLOR.PRIMARY,
             enableToggleLabel: true,
             toggleLabelPosition: LABEL_POSITION.BEFORE,
             enableHighlighterTooltip: 'On/Off',

apps/demo/project.json

@@ -12,7 +12,6 @@
         "outputPath": "dist/apps/demo",
         "index": "apps/demo/src/index.html",
         "browser": "apps/demo/src/main.ts",
-        "polyfills": ["zone.js"],
         "tsConfig": "apps/demo/tsconfig.app.json",
         "inlineStyleLanguage": "scss",
         "assets": ["apps/demo/src/favicon.ico", "apps/demo/src/assets"],

apps/demo/src/app/app.module.ts

@@ -3,7 +3,10 @@ import {
   MATERIAL_COLOR,
   provideNgxMultiKeywordsHighlighter,
 } from '@amfrontender/ngx-multi-keywords-highlighter';
-import { NgModule } from '@angular/core';
+import {
+  NgModule,
+  provideExperimentalZonelessChangeDetection,
+} from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 
@@ -43,6 +46,7 @@ import { NavBarComponent } from './nav-bar/nav-bar.component';
       minWidth: 320,
       appRoot: 'mkh-root',
     }),
+    provideExperimentalZonelessChangeDetection(),
   ],
   bootstrap: [AppComponent],
 })

apps/demo/src/app/nav-bar/nav-bar.component.html

@@ -1,7 +1,5 @@
-<nav
-  class="mkh-nav-bar mat-elevation-z1"
->
-  <a mat-button color="primary">DEMO</a>
+<nav class="mkh-nav-bar mat-elevation-z2">
+  <button mat-flat-button color="primary">DEMO</button>
   <div class="mkh-nav-bar-right">
     <button
       data-testid="toggle-highlight-button"

apps/demo/src/styles.scss

@@ -12,32 +12,35 @@
 // Define the palettes for your theme using the Material Design palettes available in palette.scss
 // (imported above). For each palette, you can optionally specify a default, lighter, and darker
 // hue. Available color palettes: https://material.io/design/color/
-$demo-primary: mat.define-palette(mat.$indigo-palette);
-$demo-accent: mat.define-palette(mat.$pink-palette, A200, A100, A400);
-
-// The warn palette is optional (defaults to red).
-$demo-warn: mat.define-palette(mat.$red-palette);
+// $demo-primary: mat.m2-define-palette(mat.$m2-indigo-palette);
+// $demo-accent: mat.m2-define-palette(mat.$m2-pink-palette, A200, A100, A400);
+// // The warn palette is optional (defaults to red).
+// $demo-warn: mat.m2-define-palette(mat.$m2-red-palette);
 
 // Create the theme object. A theme consists of configurations for individual
 // theming systems such as "color" or "typography".
-$demo-theme: mat.define-light-theme((
+$demo-theme: mat.define-theme((
   color: (
-    primary: $demo-primary,
-    accent: $demo-accent,
-    warn: $demo-warn,
+    theme-type: light,
+    primary: mat.$azure-palette
+  ),
+  density: (
+    scale: -1
   )
 ));
 
 // Include theme styles for core and each component used in your app.
 // Alternatively, you can import and @include the theme mixins for each component
 // that you are using.
-@include mat.all-component-themes($demo-theme);
 
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
 
 /* You can add global styles to this file, and also import other style files */
+html {
+  @include mat.all-component-themes($demo-theme);
+}
 
 html, body { height: 100%; }
 body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }

apps/demo/tsconfig.app.json

@@ -1,6 +1,5 @@
 {
   "extends": "./tsconfig.json",
-  "composite": true,
   "compilerOptions": {
     "outDir": "../../dist/out-tsc",
     "types": []

apps/ngx-multi-keywords-highlighter-e2e/playwright.config.ts

@@ -14,8 +14,8 @@ const baseURL = process.env['BASE_URL'] || 'http://localhost:4400';
 
 const playwrightBDDDir = defineBddConfig({
   verbose: false,
-  paths: ['./src/features/**/*.feature'],
-  require: ['./src/features/**/*.ts', './src/support/**/*.ts'],
+  features: ['./src/features/**/*.feature'],
+  steps: ['./src/features/**/*.ts', './src/support/**/*.ts'],
   outputDir: '.feature-generate-bdd',
 });
 
@@ -27,7 +27,7 @@ export default defineConfig({
     testDir: './src',
   }),
   testDir: playwrightBDDDir,
-  outputDir: `${workspaceRoot}/dist/.playwright/apps/ngx-multi-keywords-highlighter-e2e/runtime-output`,
+  outputDir: `${workspaceRoot}/dist/playwright/apps/ngx-multi-keywords-highlighter-e2e/runtime-output`,
   /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
   use: {
     baseURL,
@@ -39,7 +39,7 @@ export default defineConfig({
   webServer: {
     command: 'npm run mkh:storybook',
     url: 'http://localhost:4400',
-    reuseExistingServer: true,
+    reuseExistingServer: !process.env['CI'],
     cwd: workspaceRoot,
     stdout: 'ignore',
     stderr: 'pipe',
@@ -58,7 +58,7 @@ export default defineConfig({
     [
       'html',
       {
-        outputFolder: `${workspaceRoot}/dist/.playwright/apps/ngx-multi-keywords-highlighter-e2e/report`,
+        outputFolder: `${workspaceRoot}/dist/playwright/apps/ngx-multi-keywords-highlighter-e2e/report`,
       },
     ],
   ],

apps/ngx-multi-keywords-highlighter-e2e/project.json

@@ -18,7 +18,8 @@
       "options": {
         "config": "apps/ngx-multi-keywords-highlighter-e2e/playwright.config.ts",
         "headed": false,
-        "ui": false
+        "ui": false,
+        "skipInstall": true
       }
     },
     "e2e:ui": {

libs/ngx-multi-keywords-highlighter/.storybook/main.ts

@@ -5,9 +5,6 @@ const config: StorybookConfig = {
   stories: ['../**/*.stories.@(js|jsx|ts|tsx)'],
   framework: {
     name: '@storybook/angular',
-    options: {
-      builder: { useSWC: true },
-    },
   },
   docs: {
     autodocs: true,

libs/ngx-multi-keywords-highlighter/package.json

@@ -13,19 +13,19 @@
     "url": "https://github.com/dylannnn/ngx-multi-keywords-highlighter/issues"
   },
   "engines": {
-    "npm": ">8.0.0",
-    "node": ">18.20.0 || >=20"
+    "npm": ">=10.0.0",
+    "node": ">=20.0.0"
   },
   "peerDependencies": {
-    "@angular/cdk": "^17.3.6",
-    "@angular/material": "^17.3.6",
-    "@angular/common": "^17.3.6",
-    "@angular/core": "^17.3.6",
-    "@angular/forms": "^17.3.6",
+    "@angular/cdk": "^18.1.2",
+    "@angular/material": "^18.1.2",
+    "@angular/common": "^18.1.2",
+    "@angular/core": "^18.1.2",
+    "@angular/forms": "^18.1.2",
     "rxjs": "^7.8.1"
   },
   "dependencies": {
-    "tslib": "^2.6.2"
+    "tslib": "^2.6.3"
   },
   "sideEffects": false
 }

libs/ngx-multi-keywords-highlighter/src/lib/core/default-config.ts

@@ -24,6 +24,7 @@ export const defaultConfig: MultiKeywordsHighlighterConfig = {
   enableToggleLabel: MultiKeywordsHighlighterConstants.ENABLE_TOGGLE_LABEL,
   highlightClass: MultiKeywordsHighlighterConstants.HIGHLIGHT_CLASS,
   initKeywords: MultiKeywordsHighlighterConstants.INIT_KEYWORDS,
+  keywordsLabel: MultiKeywordsHighlighterConstants.KEYWORDS_LABEL,
   keywordsPlaceholder: MultiKeywordsHighlighterConstants.KEYWORDS_PLACEHOLDER,
   linkToCopyright: true,
   minSearchLength: MultiKeywordsHighlighterConstants.MIN_SEARCH_LENGTH,

libs/ngx-multi-keywords-highlighter/src/lib/core/multi-keywords-highlighter-config.interface.ts

@@ -38,6 +38,7 @@ export interface MultiKeywordsHighlighterConfig {
   enableToggleLabel: boolean;
   highlightClass: string;
   initKeywords: boolean;
+  keywordsLabel: string;
   keywordsPlaceholder: string;
   linkToCopyright: boolean;
   minSearchLength: number;

libs/ngx-multi-keywords-highlighter/src/lib/core/multi-keywords-highlighter.constants.ts

@@ -7,7 +7,8 @@ export class MultiKeywordsHighlighterConstants {
     AUTHOR: 'Amfrontender',
     CONTACT: 'https://github.com/Amfrontender',
   };
-  static KEYWORDS_PLACEHOLDER = 'Keywords...';
+  static KEYWORDS_LABEL = 'Keywords';
+  static KEYWORDS_PLACEHOLDER = 'New keywords...';
   static REMOVABLE = true;
   static MIN_WIDTH = 340;
   static ENABLE_TOGGLE_LABEL = false;
@@ -34,8 +35,9 @@ export const NAME_SPACE = {
 
 export enum MATERIAL_COLOR {
   PRIMARY = 'primary',
-  ACCENT = 'accent',
-  WARN = 'warn',
+  SECONDARY = 'secondary',
+  TERTIARY = 'tertiary',
+  ERROR = 'error',
 }
 
 export enum LABEL_POSITION {