diff --git a/.eslintrc.cjs b/.eslintrc.cjs index a17c259887..ae3dc54400 100644 --- a/.eslintrc.cjs +++ b/.eslintrc.cjs @@ -39,7 +39,6 @@ module.exports = { devDependencies: [ 'scripts/**', 'rollup.config.js', - 'rollup.config.dist.js', 'playwright.config.js', '**/story.{js,jsx}', '**/demo.{js,jsx}', diff --git a/.storybook/main.js b/.storybook/main.js index 495893e132..93a074a06e 100644 --- a/.storybook/main.js +++ b/.storybook/main.js @@ -18,7 +18,6 @@ const { gatherAllVersions } = require(path.resolve( __dirname, '..', 'scripts', - 'build', 'version_info.js' )); const stringifiedVersionInfo = gatherAllVersions(path.resolve(__dirname, '..')); diff --git a/package-lock.json b/package-lock.json index bfadd34c27..b3371d209a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -7,9 +7,9 @@ "": { "name": "@axa-ch/pattern-library", "version": "2.0.0", + "hasInstallScript": true, "license": "SEE LICENSE IN LICENSE.md", "dependencies": { - "@axa-ch/materials": "latest", "blueimp-canvas-to-blob": "^3.29.0", "date-fns": "^2.28.0", "lit": "^2.2.1" @@ -19,9 +19,9 @@ "@babel/preset-env": "^7.3.1", "@babel/preset-react": "^7.0.0", "@playwright/test": "^1.24.1", - "@rollup/plugin-commonjs": "^23.0.0", - "@rollup/plugin-node-resolve": "^15.0.0", - "@rollup/plugin-replace": "^5.0.0", + "@rollup/plugin-node-resolve": "^15.0.1", + "@rollup/plugin-replace": "^5.0.1", + "@rollup/plugin-terser": "^0.2.0", "@storybook/addon-backgrounds": "^6.5.12", "@storybook/addon-controls": "^6.5.12", "@storybook/addon-viewport": "^6.5.12", @@ -52,7 +52,7 @@ "http-server": "^14.1.1", "husky": "^8.0.0", "is-ci": "^3.0.1", - "lerna": "^6.0.1", + "lerna": "6.0.1", "marked": "^1.2.4", "mkdirp": "^0.5.1", "mv": "^2.1.1", @@ -62,15 +62,14 @@ "react": "^18.2.0", "react-dom": "^18.2.0", "react-syntax-highlighter": "^15.5.0", - "rollup": "^2.72.1", + "rollup": "^3.7.0", "rollup-plugin-copy": "^3.4.0", - "rollup-plugin-scss": "^3.0.0", - "rollup-plugin-terser": "^7.0.2", + "rollup-plugin-scss": "^4.0.0", "sass": "^1.52.3", "sass-loader": "^13.0.0", "svgo": "^2.8.0", "testcafe": "1.19.0", - "vitest": "^0.16.0", + "vitest": "^0.25.7", "wait-on": "^6.0.1", "webpack": "^5.72.1" }, @@ -92,14 +91,6 @@ "node": ">=6.0.0" } }, - "node_modules/@axa-ch/materials": { - "version": "15.0.1", - "resolved": "https://registry.npmjs.org/@axa-ch/materials/-/materials-15.0.1.tgz", - "integrity": "sha512-7GU6NgkIXwxRqloKaYxRQ4tHGLzdL2lbkjaBx1ZZZpRf9Q13B1qox50UftJC7w1WhinjhpUowAnT8c+g688Hbg==", - "dependencies": { - "lit": "^2.2.1" - } - }, "node_modules/@babel/code-frame": { "version": "7.18.6", "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.18.6.tgz", @@ -2108,6 +2099,358 @@ "node": ">=10.0.0" } }, + "node_modules/@esbuild/android-arm": { + "version": "0.16.4", + "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.16.4.tgz", + "integrity": "sha512-rZzb7r22m20S1S7ufIc6DC6W659yxoOrl7sKP1nCYhuvUlnCFHVSbATG4keGUtV8rDz11sRRDbWkvQZpzPaHiw==", + "cpu": [ + "arm" + ], + "dev": true, + "optional": true, + "os": [ + "android" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/android-arm64": { + "version": "0.16.4", + "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.16.4.tgz", + "integrity": "sha512-VPuTzXFm/m2fcGfN6CiwZTlLzxrKsWbPkG7ArRFpuxyaHUm/XFHQPD4xNwZT6uUmpIHhnSjcaCmcla8COzmZ5Q==", + "cpu": [ + "arm64" + ], + "dev": true, + "optional": true, + "os": [ + "android" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/android-x64": { + "version": "0.16.4", + "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.16.4.tgz", + "integrity": "sha512-MW+B2O++BkcOfMWmuHXB15/l1i7wXhJFqbJhp82IBOais8RBEQv2vQz/jHrDEHaY2X0QY7Wfw86SBL2PbVOr0g==", + "cpu": [ + "x64" + ], + "dev": true, + "optional": true, + "os": [ + "android" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/darwin-arm64": { + "version": "0.16.4", + "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.16.4.tgz", + "integrity": "sha512-a28X1O//aOfxwJVZVs7ZfM8Tyih2Za4nKJrBwW5Wm4yKsnwBy9aiS/xwpxiiTRttw3EaTg4Srerhcm6z0bu9Wg==", + "cpu": [ + "arm64" + ], + "dev": true, + "optional": true, + "os": [ + "darwin" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/darwin-x64": { + "version": "0.16.4", + "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.16.4.tgz", + "integrity": "sha512-e3doCr6Ecfwd7VzlaQqEPrnbvvPjE9uoTpxG5pyLzr2rI2NMjDHmvY1E5EO81O/e9TUOLLkXA5m6T8lfjK9yAA==", + "cpu": [ + "x64" + ], + "dev": true, + "optional": true, + "os": [ + "darwin" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/freebsd-arm64": { + "version": "0.16.4", + "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.16.4.tgz", + "integrity": "sha512-Oup3G/QxBgvvqnXWrBed7xxkFNwAwJVHZcklWyQt7YCAL5bfUkaa6FVWnR78rNQiM8MqqLiT6ZTZSdUFuVIg1w==", + "cpu": [ + "arm64" + ], + "dev": true, + "optional": true, + "os": [ + "freebsd" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/freebsd-x64": { + "version": "0.16.4", + "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.16.4.tgz", + "integrity": "sha512-vAP+eYOxlN/Bpo/TZmzEQapNS8W1njECrqkTpNgvXskkkJC2AwOXwZWai/Kc2vEFZUXQttx6UJbj9grqjD/+9Q==", + "cpu": [ + "x64" + ], + "dev": true, + "optional": true, + "os": [ + "freebsd" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/linux-arm": { + "version": "0.16.4", + "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.16.4.tgz", + "integrity": "sha512-A47ZmtpIPyERxkSvIv+zLd6kNIOtJH03XA0Hy7jaceRDdQaQVGSDt4mZqpWqJYgDk9rg96aglbF6kCRvPGDSUA==", + "cpu": [ + "arm" + ], + "dev": true, + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/linux-arm64": { + "version": "0.16.4", + "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.16.4.tgz", + "integrity": "sha512-2zXoBhv4r5pZiyjBKrOdFP4CXOChxXiYD50LRUU+65DkdS5niPFHbboKZd/c81l0ezpw7AQnHeoCy5hFrzzs4g==", + "cpu": [ + "arm64" + ], + "dev": true, + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/linux-ia32": { + "version": "0.16.4", + "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.16.4.tgz", + "integrity": "sha512-uxdSrpe9wFhz4yBwt2kl2TxS/NWEINYBUFIxQtaEVtglm1eECvsj1vEKI0KX2k2wCe17zDdQ3v+jVxfwVfvvjw==", + "cpu": [ + "ia32" + ], + "dev": true, + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/linux-loong64": { + "version": "0.16.4", + "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.16.4.tgz", + "integrity": "sha512-peDrrUuxbZ9Jw+DwLCh/9xmZAk0p0K1iY5d2IcwmnN+B87xw7kujOkig6ZRcZqgrXgeRGurRHn0ENMAjjD5DEg==", + "cpu": [ + "loong64" + ], + "dev": true, + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/linux-mips64el": { + "version": "0.16.4", + "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.16.4.tgz", + "integrity": "sha512-sD9EEUoGtVhFjjsauWjflZklTNr57KdQ6xfloO4yH1u7vNQlOfAlhEzbyBKfgbJlW7rwXYBdl5/NcZ+Mg2XhQA==", + "cpu": [ + "mips64el" + ], + "dev": true, + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/linux-ppc64": { + "version": "0.16.4", + "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.16.4.tgz", + "integrity": "sha512-X1HSqHUX9D+d0l6/nIh4ZZJ94eQky8d8z6yxAptpZE3FxCWYWvTDd9X9ST84MGZEJx04VYUD/AGgciddwO0b8g==", + "cpu": [ + "ppc64" + ], + "dev": true, + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/linux-riscv64": { + "version": "0.16.4", + "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.16.4.tgz", + "integrity": "sha512-97ANpzyNp0GTXCt6SRdIx1ngwncpkV/z453ZuxbnBROCJ5p/55UjhbaG23UdHj88fGWLKPFtMoU4CBacz4j9FA==", + "cpu": [ + "riscv64" + ], + "dev": true, + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/linux-s390x": { + "version": "0.16.4", + "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.16.4.tgz", + "integrity": "sha512-pUvPQLPmbEeJRPjP0DYTC1vjHyhrnCklQmCGYbipkep+oyfTn7GTBJXoPodR7ZS5upmEyc8lzAkn2o29wD786A==", + "cpu": [ + "s390x" + ], + "dev": true, + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/linux-x64": { + "version": "0.16.4", + "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.16.4.tgz", + "integrity": "sha512-N55Q0mJs3Sl8+utPRPBrL6NLYZKBCLLx0bme/+RbjvMforTGGzFvsRl4xLTZMUBFC1poDzBEPTEu5nxizQ9Nlw==", + "cpu": [ + "x64" + ], + "dev": true, + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/netbsd-x64": { + "version": "0.16.4", + "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.16.4.tgz", + "integrity": "sha512-LHSJLit8jCObEQNYkgsDYBh2JrJT53oJO2HVdkSYLa6+zuLJh0lAr06brXIkljrlI+N7NNW1IAXGn/6IZPi3YQ==", + "cpu": [ + "x64" + ], + "dev": true, + "optional": true, + "os": [ + "netbsd" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/openbsd-x64": { + "version": "0.16.4", + "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.16.4.tgz", + "integrity": "sha512-nLgdc6tWEhcCFg/WVFaUxHcPK3AP/bh+KEwKtl69Ay5IBqUwKDaq/6Xk0E+fh/FGjnLwqFSsarsbPHeKM8t8Sw==", + "cpu": [ + "x64" + ], + "dev": true, + "optional": true, + "os": [ + "openbsd" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/sunos-x64": { + "version": "0.16.4", + "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.16.4.tgz", + "integrity": "sha512-08SluG24GjPO3tXKk95/85n9kpyZtXCVwURR2i4myhrOfi3jspClV0xQQ0W0PYWHioJj+LejFMt41q+PG3mlAQ==", + "cpu": [ + "x64" + ], + "dev": true, + "optional": true, + "os": [ + "sunos" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/win32-arm64": { + "version": "0.16.4", + "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.16.4.tgz", + "integrity": "sha512-yYiRDQcqLYQSvNQcBKN7XogbrSvBE45FEQdH8fuXPl7cngzkCvpsG2H9Uey39IjQ6gqqc+Q4VXYHsQcKW0OMjQ==", + "cpu": [ + "arm64" + ], + "dev": true, + "optional": true, + "os": [ + "win32" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/win32-ia32": { + "version": "0.16.4", + "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.16.4.tgz", + "integrity": "sha512-5rabnGIqexekYkh9zXG5waotq8mrdlRoBqAktjx2W3kb0zsI83mdCwrcAeKYirnUaTGztR5TxXcXmQrEzny83w==", + "cpu": [ + "ia32" + ], + "dev": true, + "optional": true, + "os": [ + "win32" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/win32-x64": { + "version": "0.16.4", + "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.16.4.tgz", + "integrity": "sha512-sN/I8FMPtmtT2Yw+Dly8Ur5vQ5a/RmC8hW7jO9PtPSQUPkowxWpcUZnqOggU7VwyT3Xkj6vcXWd3V/qTXwultQ==", + "cpu": [ + "x64" + ], + "dev": true, + "optional": true, + "os": [ + "win32" + ], + "engines": { + "node": ">=12" + } + }, "node_modules/@eslint/eslintrc": { "version": "1.3.0", "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-1.3.0.tgz", @@ -5553,9 +5896,9 @@ } }, "node_modules/@npmcli/arborist/node_modules/hosted-git-info": { - "version": "5.1.0", - "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-5.1.0.tgz", - "integrity": "sha512-Ek+QmMEqZF8XrbFdwoDjSbm7rT23pCgEMOJmz6GPk/s4yH//RQfNPArhIxbguNxROq/+5lNBwCDHMhA903Kx1Q==", + "version": "5.2.1", + "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-5.2.1.tgz", + "integrity": "sha512-xIcQYMnhcx2Nr4JTjsFmwwnr9vldugPy9uVm0o87bjqqWMv9GaqsTeT+i99wTl0mk1uLxJtHxLb8kymqTENQsw==", "dev": true, "dependencies": { "lru-cache": "^7.5.1" @@ -5565,9 +5908,9 @@ } }, "node_modules/@npmcli/arborist/node_modules/hosted-git-info/node_modules/lru-cache": { - "version": "7.14.0", - "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-7.14.0.tgz", - "integrity": "sha512-EIRtP1GrSJny0dqb50QXRUNBxHJhcpxHC++M5tD7RYbvLLn5KVWKsbyswSSqDuU15UFi3bgTQIY8nhDMeF6aDQ==", + "version": "7.14.1", + "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-7.14.1.tgz", + "integrity": "sha512-ysxwsnTKdAx96aTRdhDOCQfDgbHnt8SK0KY8SEjO0wHinhWOFTESbjVCMPbU1uGXg/ch4lifqx0wfjOawU2+WA==", "dev": true, "engines": { "node": ">=12" @@ -5679,9 +6022,9 @@ } }, "node_modules/@npmcli/git/node_modules/lru-cache": { - "version": "7.14.0", - "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-7.14.0.tgz", - "integrity": "sha512-EIRtP1GrSJny0dqb50QXRUNBxHJhcpxHC++M5tD7RYbvLLn5KVWKsbyswSSqDuU15UFi3bgTQIY8nhDMeF6aDQ==", + "version": "7.14.1", + "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-7.14.1.tgz", + "integrity": "sha512-ysxwsnTKdAx96aTRdhDOCQfDgbHnt8SK0KY8SEjO0wHinhWOFTESbjVCMPbU1uGXg/ch4lifqx0wfjOawU2+WA==", "dev": true, "engines": { "node": ">=12" @@ -5767,9 +6110,9 @@ } }, "node_modules/@npmcli/map-workspaces/node_modules/minimatch": { - "version": "5.1.0", - "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-5.1.0.tgz", - "integrity": "sha512-9TPBGGak4nHfGZsPBohm9AWg6NoT7QTCehS3BIJABslyZbzxfV78QM2Y6+i741OPZIafFAaiiEMh5OyIrJPgtg==", + "version": "5.1.1", + "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-5.1.1.tgz", + "integrity": "sha512-362NP+zlprccbEt/SkxKfRMHnNY85V74mVnpUpNyr3F35covl09Kec7/sEFLt3RA4oXmewtoaanoIf67SE5Y5g==", "dev": true, "dependencies": { "brace-expansion": "^2.0.1" @@ -5812,6 +6155,7 @@ "version": "2.0.1", "resolved": "https://registry.npmjs.org/@npmcli/move-file/-/move-file-2.0.1.tgz", "integrity": "sha512-mJd2Z5TjYWq/ttPLLGqArdtnC74J6bOzg4rMDnN+p1xTacZ2yPRCk2y0oSWQtygLR9YVQXgOcONrwtnk3JupxQ==", + "deprecated": "This functionality has been moved to @npmcli/fs", "dev": true, "dependencies": { "mkdirp": "^1.0.4", @@ -5889,18 +6233,18 @@ } }, "node_modules/@nrwl/cli": { - "version": "15.0.0", - "resolved": "https://registry.npmjs.org/@nrwl/cli/-/cli-15.0.0.tgz", - "integrity": "sha512-D0zAhZ375bQnoUM2HLifMzAa75A3/lC9OkkewsiVVbqaznjEIry8ezHZepgfjFRVzLr3ue7FIpDEH3iJIYzvVw==", + "version": "15.3.3", + "resolved": "https://registry.npmjs.org/@nrwl/cli/-/cli-15.3.3.tgz", + "integrity": "sha512-ZWTmVP9H3ukppWWGaS/s3Nym2nOYgnt6eHtuUFNsroz8LesG5oFAJviOz9jDEM/b+pLIrvYfU5aAGZqrtM3Z2A==", "dev": true, "dependencies": { - "nx": "15.0.0" + "nx": "15.3.3" } }, "node_modules/@nrwl/devkit": { - "version": "15.0.0", - "resolved": "https://registry.npmjs.org/@nrwl/devkit/-/devkit-15.0.0.tgz", - "integrity": "sha512-ALtPfILlxLDg77rV/XNdDGbhUkh0gZPj/4Ehy3ScvVqPhTrDIZNLGX13dXgUUF9xhGb7SXPmvzZkduBpqmHnfQ==", + "version": "15.3.3", + "resolved": "https://registry.npmjs.org/@nrwl/devkit/-/devkit-15.3.3.tgz", + "integrity": "sha512-48R9HAp6r6umWNXTlVTMsH94YYjU/XUPLDTtXBgKESMVbdq8Fk+HDHuN0thXG5dL6DFkXgD0MICLm3jSQU6xMw==", "dev": true, "dependencies": { "@phenomnomnominal/tsquery": "4.1.1", @@ -5929,12 +6273,12 @@ } }, "node_modules/@nrwl/tao": { - "version": "15.0.0", - "resolved": "https://registry.npmjs.org/@nrwl/tao/-/tao-15.0.0.tgz", - "integrity": "sha512-qup1eSWYwp/KVrw/wxeWBvYttQ9dcbQnqpXb5NQMD31SpXEZSpJB1i3GV/o6CF5qQQSNLwICXZx25rNTTQAqpg==", + "version": "15.3.3", + "resolved": "https://registry.npmjs.org/@nrwl/tao/-/tao-15.3.3.tgz", + "integrity": "sha512-f9+VwhlJ/7TWpjHSgoUOAA067uP9DmzABMY9HC5OREEDaCx+rzYEvbLAPv6cXzWw+6IYM6cyKw0zWSQrdEVrWg==", "dev": true, "dependencies": { - "nx": "15.0.0" + "nx": "15.3.3" }, "bin": { "tao": "index.js" @@ -5994,9 +6338,9 @@ } }, "node_modules/@octokit/graphql": { - "version": "5.0.3", - "resolved": "https://registry.npmjs.org/@octokit/graphql/-/graphql-5.0.3.tgz", - "integrity": "sha512-VjhqOu2CHo2hwank1y2k8YcqF83zJW6upyP1+0l3wegvpq+4H31zOA5Rkyx76uJBUdJooUR5UnFyclBptzl86Q==", + "version": "5.0.4", + "resolved": "https://registry.npmjs.org/@octokit/graphql/-/graphql-5.0.4.tgz", + "integrity": "sha512-amO1M5QUQgYQo09aStR/XO7KAl13xpigcy/kI8/N1PnZYSS69fgte+xA4+c2DISKqUZfsh0wwjc2FaCt99L41A==", "dev": true, "dependencies": { "@octokit/request": "^6.0.0", @@ -6181,24 +6525,24 @@ "node": ">=14" } }, - "node_modules/@rollup/plugin-commonjs": { - "version": "23.0.0", - "resolved": "https://registry.npmjs.org/@rollup/plugin-commonjs/-/plugin-commonjs-23.0.0.tgz", - "integrity": "sha512-JbrTRyDNtLQj/rhl7RFUuYXwQ2fac+33oLDAu2k++WD95zweyo28UAomLVA0JMGx4vmCa7Nw4T6k/1F6lelExg==", + "node_modules/@rollup/plugin-node-resolve": { + "version": "15.0.1", + "resolved": "https://registry.npmjs.org/@rollup/plugin-node-resolve/-/plugin-node-resolve-15.0.1.tgz", + "integrity": "sha512-ReY88T7JhJjeRVbfCyNj+NXAG3IIsVMsX9b5/9jC98dRP8/yxlZdz7mHZbHk5zHr24wZZICS5AcXsFZAXYUQEg==", "dev": true, "dependencies": { - "@rollup/pluginutils": "^4.2.1", - "commondir": "^1.0.1", - "estree-walker": "^2.0.2", - "glob": "^8.0.3", - "is-reference": "1.2.1", - "magic-string": "^0.26.4" + "@rollup/pluginutils": "^5.0.1", + "@types/resolve": "1.20.2", + "deepmerge": "^4.2.2", + "is-builtin-module": "^3.2.0", + "is-module": "^1.0.0", + "resolve": "^1.22.1" }, "engines": { "node": ">=14.0.0" }, "peerDependencies": { - "rollup": "^2.68.0||^3.0.0" + "rollup": "^2.78.0||^3.0.0" }, "peerDependenciesMeta": { "rollup": { @@ -6206,24 +6550,21 @@ } } }, - "node_modules/@rollup/plugin-node-resolve": { - "version": "15.0.0", - "resolved": "https://registry.npmjs.org/@rollup/plugin-node-resolve/-/plugin-node-resolve-15.0.0.tgz", - "integrity": "sha512-iwJbzfTzlzDDQcGmkS7EkCKwe2kSkdBrjX87Fy/KrNjr6UNnLpod0t6X66e502LRe5JJCA4FFqrEscWPnZAkig==", + "node_modules/@rollup/plugin-node-resolve/node_modules/@rollup/pluginutils": { + "version": "5.0.2", + "resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-5.0.2.tgz", + "integrity": "sha512-pTd9rIsP92h+B6wWwFbW8RkZv4hiR/xKsqre4SIuAOaOEQRxi0lqLke9k2/7WegC85GgUs9pjmOjCUi3In4vwA==", "dev": true, "dependencies": { - "@rollup/pluginutils": "^4.2.1", - "@types/resolve": "1.20.2", - "deepmerge": "^4.2.2", - "is-builtin-module": "^3.2.0", - "is-module": "^1.0.0", - "resolve": "^1.22.1" + "@types/estree": "^1.0.0", + "estree-walker": "^2.0.2", + "picomatch": "^2.3.1" }, "engines": { "node": ">=14.0.0" }, "peerDependencies": { - "rollup": "^2.78.0||^3.0.0" + "rollup": "^1.20.0||^2.0.0||^3.0.0" }, "peerDependenciesMeta": { "rollup": { @@ -6232,12 +6573,12 @@ } }, "node_modules/@rollup/plugin-replace": { - "version": "5.0.0", - "resolved": "https://registry.npmjs.org/@rollup/plugin-replace/-/plugin-replace-5.0.0.tgz", - "integrity": "sha512-TiPmjMuBjQM+KLWK16O5TAM/eW4yXBYyQ17FbfeNzBC1t2kzX2aXoa8AlS9XTSmg6/2TNvkER1lMEEeN4Lhavw==", + "version": "5.0.1", + "resolved": "https://registry.npmjs.org/@rollup/plugin-replace/-/plugin-replace-5.0.1.tgz", + "integrity": "sha512-Z3MfsJ4CK17BfGrZgvrcp/l6WXoKb0kokULO+zt/7bmcyayokDaQ2K3eDJcRLCTAlp5FPI4/gz9MHAsosz4Rag==", "dev": true, "dependencies": { - "@rollup/pluginutils": "^4.2.1", + "@rollup/pluginutils": "^5.0.1", "magic-string": "^0.26.4" }, "engines": { @@ -6252,17 +6593,48 @@ } } }, - "node_modules/@rollup/pluginutils": { - "version": "4.2.1", - "resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-4.2.1.tgz", - "integrity": "sha512-iKnFXr7NkdZAIHiIWE+BX5ULi/ucVFYWD6TbAV+rZctiRTY2PL6tsIKhoIOaoskiWAkgu+VsbXgUVDNLHf+InQ==", + "node_modules/@rollup/plugin-replace/node_modules/@rollup/pluginutils": { + "version": "5.0.2", + "resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-5.0.2.tgz", + "integrity": "sha512-pTd9rIsP92h+B6wWwFbW8RkZv4hiR/xKsqre4SIuAOaOEQRxi0lqLke9k2/7WegC85GgUs9pjmOjCUi3In4vwA==", "dev": true, "dependencies": { - "estree-walker": "^2.0.1", - "picomatch": "^2.2.2" + "@types/estree": "^1.0.0", + "estree-walker": "^2.0.2", + "picomatch": "^2.3.1" }, "engines": { - "node": ">= 8.0.0" + "node": ">=14.0.0" + }, + "peerDependencies": { + "rollup": "^1.20.0||^2.0.0||^3.0.0" + }, + "peerDependenciesMeta": { + "rollup": { + "optional": true + } + } + }, + "node_modules/@rollup/plugin-terser": { + "version": "0.2.0", + "resolved": "https://registry.npmjs.org/@rollup/plugin-terser/-/plugin-terser-0.2.0.tgz", + "integrity": "sha512-UBr4WNXBFipKW2C2db9JIzIdq9bFZsaTZwKeAd9Y0N9Pv9G2XgRhaimGdotx1+Wf/2XTuTJ+FVS2SO+y2WyiUQ==", + "dev": true, + "dependencies": { + "serialize-javascript": "^6.0.0", + "smob": "^0.0.6", + "terser": "^5.15.1" + }, + "engines": { + "node": ">=14.0.0" + }, + "peerDependencies": { + "rollup": "^2.x || ^3.x" + }, + "peerDependenciesMeta": { + "rollup": { + "optional": true + } } }, "node_modules/@sideway/address": { @@ -11928,9 +12300,9 @@ } }, "node_modules/@types/chai": { - "version": "4.3.1", - "resolved": "https://registry.npmjs.org/@types/chai/-/chai-4.3.1.tgz", - "integrity": "sha512-/zPMqDkzSZ8t3VtxOa4KPq7uzzW978M9Tvh+j7GHKuo6k6GTLxPJ4J5gE5cjfJ26pnXst0N5Hax8Sr0T2Mi9zQ==", + "version": "4.3.4", + "resolved": "https://registry.npmjs.org/@types/chai/-/chai-4.3.4.tgz", + "integrity": "sha512-KnRanxnpfpjUTqTCXslZSEdLfXExwgNxYPdiO2WGUj8+HDjFi8R3k5RVKPeSCzLjCcshCAtVO2QBbVuAV4kTnw==", "dev": true }, "node_modules/@types/chai-subset": { @@ -11973,9 +12345,9 @@ } }, "node_modules/@types/estree": { - "version": "0.0.39", - "resolved": "https://registry.npmjs.org/@types/estree/-/estree-0.0.39.tgz", - "integrity": "sha512-EYNwp3bU+98cpU4lAWYYL7Zz+2gryWH1qbdDTidVd6hkiR6weksdbMadyXKXNPEkQFhXM+hVO9ZygomHXp+AIw==", + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.0.tgz", + "integrity": "sha512-WulqXMDUTYAXCjZnk6JtIHPigp55cVtDgDrO2gHRwhyJto21+1zbVCtOYB2L1F9w4qCQ0rOGWBnBe0FNTiEJIQ==", "dev": true }, "node_modules/@types/fs-extra": { @@ -12464,9 +12836,9 @@ "dev": true }, "node_modules/@yarnpkg/parsers": { - "version": "3.0.0-rc.26", - "resolved": "https://registry.npmjs.org/@yarnpkg/parsers/-/parsers-3.0.0-rc.26.tgz", - "integrity": "sha512-F52Zryoi6uSHi43A/htykDD7l1707TQjHeAHTKxNWJBTwvrEKWYvuu1w8bzSHpFVc06ig2KyrpHPfmeiuOip8Q==", + "version": "3.0.0-rc.33", + "resolved": "https://registry.npmjs.org/@yarnpkg/parsers/-/parsers-3.0.0-rc.33.tgz", + "integrity": "sha512-az35wEPH00kW6eZDqHC0BumzAB4XD+YJb1b5tHEfsy73viCN7uGy8kvutwig5bgVwt1Hx7GuU09G50Sc5osBlA==", "dev": true, "dependencies": { "js-yaml": "^3.10.0", @@ -12538,9 +12910,9 @@ } }, "node_modules/acorn": { - "version": "8.7.1", - "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.7.1.tgz", - "integrity": "sha512-Xx54uLJQZ19lKygFXOWsscKUbsBZW0CPykPhVQdhIeIwrbPmJzqeASDInc8nKBnp/JT6igTs82qPXz069H8I/A==", + "version": "8.8.1", + "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.8.1.tgz", + "integrity": "sha512-7zFpHzhnqYKrkYdUjF1HI1bzd0VygEGX8lFk4k5zVMqHEoES+P+7TKI+EvLO9WVMJ8eekdO0aDEK044xTXwPPA==", "dev": true, "bin": { "acorn": "bin/acorn" @@ -14254,9 +14626,9 @@ } }, "node_modules/cacache/node_modules/lru-cache": { - "version": "7.14.0", - "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-7.14.0.tgz", - "integrity": "sha512-EIRtP1GrSJny0dqb50QXRUNBxHJhcpxHC++M5tD7RYbvLLn5KVWKsbyswSSqDuU15UFi3bgTQIY8nhDMeF6aDQ==", + "version": "7.14.1", + "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-7.14.1.tgz", + "integrity": "sha512-ysxwsnTKdAx96aTRdhDOCQfDgbHnt8SK0KY8SEjO0wHinhWOFTESbjVCMPbU1uGXg/ch4lifqx0wfjOawU2+WA==", "dev": true, "engines": { "node": ">=12" @@ -16438,9 +16810,9 @@ } }, "node_modules/decamelize-keys": { - "version": "1.1.0", - "resolved": "https://registry.npmjs.org/decamelize-keys/-/decamelize-keys-1.1.0.tgz", - "integrity": "sha512-ocLWuYzRPoS9bfiSdDd3cxvrzovVMZnRDVEzAs+hWIVXGDbHxWMECij2OBuyB/An0FFW/nLuq6Kv1i/YC5Qfzg==", + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/decamelize-keys/-/decamelize-keys-1.1.1.tgz", + "integrity": "sha512-WiPxgEirIV0/eIOMcnFBA3/IJZAZqKnwAwWyvvdi4lsr1WCN22nhdf/3db3DoZcUjTV2SqfzIwNyp6y2xs3nmg==", "dev": true, "dependencies": { "decamelize": "^1.1.0", @@ -16448,6 +16820,9 @@ }, "engines": { "node": ">=0.10.0" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" } }, "node_modules/decamelize-keys/node_modules/map-obj": { @@ -17744,9 +18119,9 @@ "dev": true }, "node_modules/esbuild": { - "version": "0.14.47", - "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.14.47.tgz", - "integrity": "sha512-wI4ZiIfFxpkuxB8ju4MHrGwGLyp1+awEHAHVpx6w7a+1pmYIq8T9FGEVVwFo0iFierDoMj++Xq69GXWYn2EiwA==", + "version": "0.16.4", + "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.16.4.tgz", + "integrity": "sha512-qQrPMQpPTWf8jHugLWHoGqZjApyx3OEm76dlTXobHwh/EBbavbRdjXdYi/GWr43GyN0sfpap14GPkb05NH3ROA==", "dev": true, "hasInstallScript": true, "bin": { @@ -17756,346 +18131,28 @@ "node": ">=12" }, "optionalDependencies": { - "esbuild-android-64": "0.14.47", - "esbuild-android-arm64": "0.14.47", - "esbuild-darwin-64": "0.14.47", - "esbuild-darwin-arm64": "0.14.47", - "esbuild-freebsd-64": "0.14.47", - "esbuild-freebsd-arm64": "0.14.47", - "esbuild-linux-32": "0.14.47", - "esbuild-linux-64": "0.14.47", - "esbuild-linux-arm": "0.14.47", - "esbuild-linux-arm64": "0.14.47", - "esbuild-linux-mips64le": "0.14.47", - "esbuild-linux-ppc64le": "0.14.47", - "esbuild-linux-riscv64": "0.14.47", - "esbuild-linux-s390x": "0.14.47", - "esbuild-netbsd-64": "0.14.47", - "esbuild-openbsd-64": "0.14.47", - "esbuild-sunos-64": "0.14.47", - "esbuild-windows-32": "0.14.47", - "esbuild-windows-64": "0.14.47", - "esbuild-windows-arm64": "0.14.47" - } - }, - "node_modules/esbuild-android-64": { - "version": "0.14.47", - "resolved": "https://registry.npmjs.org/esbuild-android-64/-/esbuild-android-64-0.14.47.tgz", - "integrity": "sha512-R13Bd9+tqLVFndncMHssZrPWe6/0Kpv2/dt4aA69soX4PRxlzsVpCvoJeFE8sOEoeVEiBkI0myjlkDodXlHa0g==", - "cpu": [ - "x64" - ], - "dev": true, - "optional": true, - "os": [ - "android" - ], - "engines": { - "node": ">=12" - } - }, - "node_modules/esbuild-android-arm64": { - "version": "0.14.47", - "resolved": "https://registry.npmjs.org/esbuild-android-arm64/-/esbuild-android-arm64-0.14.47.tgz", - "integrity": "sha512-OkwOjj7ts4lBp/TL6hdd8HftIzOy/pdtbrNA4+0oVWgGG64HrdVzAF5gxtJufAPOsEjkyh1oIYvKAUinKKQRSQ==", - "cpu": [ - "arm64" - ], - "dev": true, - "optional": true, - "os": [ - "android" - ], - "engines": { - "node": ">=12" - } - }, - "node_modules/esbuild-darwin-64": { - "version": "0.14.47", - "resolved": "https://registry.npmjs.org/esbuild-darwin-64/-/esbuild-darwin-64-0.14.47.tgz", - "integrity": "sha512-R6oaW0y5/u6Eccti/TS6c/2c1xYTb1izwK3gajJwi4vIfNs1s8B1dQzI1UiC9T61YovOQVuePDcfqHLT3mUZJA==", - "cpu": [ - "x64" - ], - "dev": true, - "optional": true, - "os": [ - "darwin" - ], - "engines": { - "node": ">=12" - } - }, - "node_modules/esbuild-darwin-arm64": { - "version": "0.14.47", - "resolved": "https://registry.npmjs.org/esbuild-darwin-arm64/-/esbuild-darwin-arm64-0.14.47.tgz", - "integrity": "sha512-seCmearlQyvdvM/noz1L9+qblC5vcBrhUaOoLEDDoLInF/VQ9IkobGiLlyTPYP5dW1YD4LXhtBgOyevoIHGGnw==", - "cpu": [ - "arm64" - ], - "dev": true, - "optional": true, - "os": [ - "darwin" - ], - "engines": { - "node": ">=12" - } - }, - "node_modules/esbuild-freebsd-64": { - "version": "0.14.47", - "resolved": "https://registry.npmjs.org/esbuild-freebsd-64/-/esbuild-freebsd-64-0.14.47.tgz", - "integrity": "sha512-ZH8K2Q8/Ux5kXXvQMDsJcxvkIwut69KVrYQhza/ptkW50DC089bCVrJZZ3sKzIoOx+YPTrmsZvqeZERjyYrlvQ==", - "cpu": [ - "x64" - ], - "dev": true, - "optional": true, - "os": [ - "freebsd" - ], - "engines": { - "node": ">=12" - } - }, - "node_modules/esbuild-freebsd-arm64": { - "version": "0.14.47", - "resolved": "https://registry.npmjs.org/esbuild-freebsd-arm64/-/esbuild-freebsd-arm64-0.14.47.tgz", - "integrity": "sha512-ZJMQAJQsIOhn3XTm7MPQfCzEu5b9STNC+s90zMWe2afy9EwnHV7Ov7ohEMv2lyWlc2pjqLW8QJnz2r0KZmeAEQ==", - "cpu": [ - "arm64" - ], - "dev": true, - "optional": true, - "os": [ - "freebsd" - ], - "engines": { - "node": ">=12" - } - }, - "node_modules/esbuild-linux-32": { - "version": "0.14.47", - "resolved": "https://registry.npmjs.org/esbuild-linux-32/-/esbuild-linux-32-0.14.47.tgz", - "integrity": "sha512-FxZOCKoEDPRYvq300lsWCTv1kcHgiiZfNrPtEhFAiqD7QZaXrad8LxyJ8fXGcWzIFzRiYZVtB3ttvITBvAFhKw==", - "cpu": [ - "ia32" - ], - "dev": true, - "optional": true, - "os": [ - "linux" - ], - "engines": { - "node": ">=12" - } - }, - "node_modules/esbuild-linux-64": { - "version": "0.14.47", - "resolved": "https://registry.npmjs.org/esbuild-linux-64/-/esbuild-linux-64-0.14.47.tgz", - "integrity": "sha512-nFNOk9vWVfvWYF9YNYksZptgQAdstnDCMtR6m42l5Wfugbzu11VpMCY9XrD4yFxvPo9zmzcoUL/88y0lfJZJJw==", - "cpu": [ - "x64" - ], - "dev": true, - "optional": true, - "os": [ - "linux" - ], - "engines": { - "node": ">=12" - } - }, - "node_modules/esbuild-linux-arm": { - "version": "0.14.47", - "resolved": "https://registry.npmjs.org/esbuild-linux-arm/-/esbuild-linux-arm-0.14.47.tgz", - "integrity": "sha512-ZGE1Bqg/gPRXrBpgpvH81tQHpiaGxa8c9Rx/XOylkIl2ypLuOcawXEAo8ls+5DFCcRGt/o3sV+PzpAFZobOsmA==", - "cpu": [ - "arm" - ], - "dev": true, - "optional": true, - "os": [ - "linux" - ], - "engines": { - "node": ">=12" - } - }, - "node_modules/esbuild-linux-arm64": { - "version": "0.14.47", - "resolved": "https://registry.npmjs.org/esbuild-linux-arm64/-/esbuild-linux-arm64-0.14.47.tgz", - "integrity": "sha512-ywfme6HVrhWcevzmsufjd4iT3PxTfCX9HOdxA7Hd+/ZM23Y9nXeb+vG6AyA6jgq/JovkcqRHcL9XwRNpWG6XRw==", - "cpu": [ - "arm64" - ], - "dev": true, - "optional": true, - "os": [ - "linux" - ], - "engines": { - "node": ">=12" - } - }, - "node_modules/esbuild-linux-mips64le": { - "version": "0.14.47", - "resolved": "https://registry.npmjs.org/esbuild-linux-mips64le/-/esbuild-linux-mips64le-0.14.47.tgz", - "integrity": "sha512-mg3D8YndZ1LvUiEdDYR3OsmeyAew4MA/dvaEJxvyygahWmpv1SlEEnhEZlhPokjsUMfRagzsEF/d/2XF+kTQGg==", - "cpu": [ - "mips64el" - ], - "dev": true, - "optional": true, - "os": [ - "linux" - ], - "engines": { - "node": ">=12" - } - }, - "node_modules/esbuild-linux-ppc64le": { - "version": "0.14.47", - "resolved": "https://registry.npmjs.org/esbuild-linux-ppc64le/-/esbuild-linux-ppc64le-0.14.47.tgz", - "integrity": "sha512-WER+f3+szmnZiWoK6AsrTKGoJoErG2LlauSmk73LEZFQ/iWC+KhhDsOkn1xBUpzXWsxN9THmQFltLoaFEH8F8w==", - "cpu": [ - "ppc64" - ], - "dev": true, - "optional": true, - "os": [ - "linux" - ], - "engines": { - "node": ">=12" - } - }, - "node_modules/esbuild-linux-riscv64": { - "version": "0.14.47", - "resolved": "https://registry.npmjs.org/esbuild-linux-riscv64/-/esbuild-linux-riscv64-0.14.47.tgz", - "integrity": "sha512-1fI6bP3A3rvI9BsaaXbMoaOjLE3lVkJtLxsgLHqlBhLlBVY7UqffWBvkrX/9zfPhhVMd9ZRFiaqXnB1T7BsL2g==", - "cpu": [ - "riscv64" - ], - "dev": true, - "optional": true, - "os": [ - "linux" - ], - "engines": { - "node": ">=12" - } - }, - "node_modules/esbuild-linux-s390x": { - "version": "0.14.47", - "resolved": "https://registry.npmjs.org/esbuild-linux-s390x/-/esbuild-linux-s390x-0.14.47.tgz", - "integrity": "sha512-eZrWzy0xFAhki1CWRGnhsHVz7IlSKX6yT2tj2Eg8lhAwlRE5E96Hsb0M1mPSE1dHGpt1QVwwVivXIAacF/G6mw==", - "cpu": [ - "s390x" - ], - "dev": true, - "optional": true, - "os": [ - "linux" - ], - "engines": { - "node": ">=12" - } - }, - "node_modules/esbuild-netbsd-64": { - "version": "0.14.47", - "resolved": "https://registry.npmjs.org/esbuild-netbsd-64/-/esbuild-netbsd-64-0.14.47.tgz", - "integrity": "sha512-Qjdjr+KQQVH5Q2Q1r6HBYswFTToPpss3gqCiSw2Fpq/ua8+eXSQyAMG+UvULPqXceOwpnPo4smyZyHdlkcPppQ==", - "cpu": [ - "x64" - ], - "dev": true, - "optional": true, - "os": [ - "netbsd" - ], - "engines": { - "node": ">=12" - } - }, - "node_modules/esbuild-openbsd-64": { - "version": "0.14.47", - "resolved": "https://registry.npmjs.org/esbuild-openbsd-64/-/esbuild-openbsd-64-0.14.47.tgz", - "integrity": "sha512-QpgN8ofL7B9z8g5zZqJE+eFvD1LehRlxr25PBkjyyasakm4599iroUpaj96rdqRlO2ShuyqwJdr+oNqWwTUmQw==", - "cpu": [ - "x64" - ], - "dev": true, - "optional": true, - "os": [ - "openbsd" - ], - "engines": { - "node": ">=12" - } - }, - "node_modules/esbuild-sunos-64": { - "version": "0.14.47", - "resolved": "https://registry.npmjs.org/esbuild-sunos-64/-/esbuild-sunos-64-0.14.47.tgz", - "integrity": "sha512-uOeSgLUwukLioAJOiGYm3kNl+1wJjgJA8R671GYgcPgCx7QR73zfvYqXFFcIO93/nBdIbt5hd8RItqbbf3HtAQ==", - "cpu": [ - "x64" - ], - "dev": true, - "optional": true, - "os": [ - "sunos" - ], - "engines": { - "node": ">=12" - } - }, - "node_modules/esbuild-windows-32": { - "version": "0.14.47", - "resolved": "https://registry.npmjs.org/esbuild-windows-32/-/esbuild-windows-32-0.14.47.tgz", - "integrity": "sha512-H0fWsLTp2WBfKLBgwYT4OTfFly4Im/8B5f3ojDv1Kx//kiubVY0IQunP2Koc/fr/0wI7hj3IiBDbSrmKlrNgLQ==", - "cpu": [ - "ia32" - ], - "dev": true, - "optional": true, - "os": [ - "win32" - ], - "engines": { - "node": ">=12" - } - }, - "node_modules/esbuild-windows-64": { - "version": "0.14.47", - "resolved": "https://registry.npmjs.org/esbuild-windows-64/-/esbuild-windows-64-0.14.47.tgz", - "integrity": "sha512-/Pk5jIEH34T68r8PweKRi77W49KwanZ8X6lr3vDAtOlH5EumPE4pBHqkCUdELanvsT14yMXLQ/C/8XPi1pAtkQ==", - "cpu": [ - "x64" - ], - "dev": true, - "optional": true, - "os": [ - "win32" - ], - "engines": { - "node": ">=12" - } - }, - "node_modules/esbuild-windows-arm64": { - "version": "0.14.47", - "resolved": "https://registry.npmjs.org/esbuild-windows-arm64/-/esbuild-windows-arm64-0.14.47.tgz", - "integrity": "sha512-HFSW2lnp62fl86/qPQlqw6asIwCnEsEoNIL1h2uVMgakddf+vUuMcCbtUY1i8sst7KkgHrVKCJQB33YhhOweCQ==", - "cpu": [ - "arm64" - ], - "dev": true, - "optional": true, - "os": [ - "win32" - ], - "engines": { - "node": ">=12" + "@esbuild/android-arm": "0.16.4", + "@esbuild/android-arm64": "0.16.4", + "@esbuild/android-x64": "0.16.4", + "@esbuild/darwin-arm64": "0.16.4", + "@esbuild/darwin-x64": "0.16.4", + "@esbuild/freebsd-arm64": "0.16.4", + "@esbuild/freebsd-x64": "0.16.4", + "@esbuild/linux-arm": "0.16.4", + "@esbuild/linux-arm64": "0.16.4", + "@esbuild/linux-ia32": "0.16.4", + "@esbuild/linux-loong64": "0.16.4", + "@esbuild/linux-mips64el": "0.16.4", + "@esbuild/linux-ppc64": "0.16.4", + "@esbuild/linux-riscv64": "0.16.4", + "@esbuild/linux-s390x": "0.16.4", + "@esbuild/linux-x64": "0.16.4", + "@esbuild/netbsd-x64": "0.16.4", + "@esbuild/openbsd-x64": "0.16.4", + "@esbuild/sunos-x64": "0.16.4", + "@esbuild/win32-arm64": "0.16.4", + "@esbuild/win32-ia32": "0.16.4", + "@esbuild/win32-x64": "0.16.4" } }, "node_modules/escalade": { @@ -19389,9 +19446,9 @@ } }, "node_modules/filelist/node_modules/minimatch": { - "version": "5.1.0", - "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-5.1.0.tgz", - "integrity": "sha512-9TPBGGak4nHfGZsPBohm9AWg6NoT7QTCehS3BIJABslyZbzxfV78QM2Y6+i741OPZIafFAaiiEMh5OyIrJPgtg==", + "version": "5.1.1", + "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-5.1.1.tgz", + "integrity": "sha512-362NP+zlprccbEt/SkxKfRMHnNY85V74mVnpUpNyr3F35covl09Kec7/sEFLt3RA4oXmewtoaanoIf67SE5Y5g==", "dev": true, "dependencies": { "brace-expansion": "^2.0.1" @@ -21276,9 +21333,9 @@ } }, "node_modules/ignore-walk/node_modules/minimatch": { - "version": "5.1.0", - "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-5.1.0.tgz", - "integrity": "sha512-9TPBGGak4nHfGZsPBohm9AWg6NoT7QTCehS3BIJABslyZbzxfV78QM2Y6+i741OPZIafFAaiiEMh5OyIrJPgtg==", + "version": "5.1.1", + "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-5.1.1.tgz", + "integrity": "sha512-362NP+zlprccbEt/SkxKfRMHnNY85V74mVnpUpNyr3F35covl09Kec7/sEFLt3RA4oXmewtoaanoIf67SE5Y5g==", "dev": true, "dependencies": { "brace-expansion": "^2.0.1" @@ -21475,9 +21532,9 @@ } }, "node_modules/init-package-json/node_modules/hosted-git-info": { - "version": "5.1.0", - "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-5.1.0.tgz", - "integrity": "sha512-Ek+QmMEqZF8XrbFdwoDjSbm7rT23pCgEMOJmz6GPk/s4yH//RQfNPArhIxbguNxROq/+5lNBwCDHMhA903Kx1Q==", + "version": "5.2.1", + "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-5.2.1.tgz", + "integrity": "sha512-xIcQYMnhcx2Nr4JTjsFmwwnr9vldugPy9uVm0o87bjqqWMv9GaqsTeT+i99wTl0mk1uLxJtHxLb8kymqTENQsw==", "dev": true, "dependencies": { "lru-cache": "^7.5.1" @@ -21487,9 +21544,9 @@ } }, "node_modules/init-package-json/node_modules/hosted-git-info/node_modules/lru-cache": { - "version": "7.14.0", - "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-7.14.0.tgz", - "integrity": "sha512-EIRtP1GrSJny0dqb50QXRUNBxHJhcpxHC++M5tD7RYbvLLn5KVWKsbyswSSqDuU15UFi3bgTQIY8nhDMeF6aDQ==", + "version": "7.14.1", + "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-7.14.1.tgz", + "integrity": "sha512-ysxwsnTKdAx96aTRdhDOCQfDgbHnt8SK0KY8SEjO0wHinhWOFTESbjVCMPbU1uGXg/ch4lifqx0wfjOawU2+WA==", "dev": true, "engines": { "node": ">=12" @@ -21532,9 +21589,9 @@ "dev": true }, "node_modules/inquirer": { - "version": "8.2.4", - "resolved": "https://registry.npmjs.org/inquirer/-/inquirer-8.2.4.tgz", - "integrity": "sha512-nn4F01dxU8VeKfq192IjLsxu0/OmMZ4Lg3xKAns148rCaXP6ntAoEkVYZThWjwON8AlzdZZi6oqnhNbxUG9hVg==", + "version": "8.2.5", + "resolved": "https://registry.npmjs.org/inquirer/-/inquirer-8.2.5.tgz", + "integrity": "sha512-QAgPDQMEgrDssk1XiwwHoOGYF9BAbUcc1+j+FhEvaOt8/cKRqyLn0U5qA6F74fGhTMGxf92pOvPBeh29jQJDTQ==", "dev": true, "dependencies": { "ansi-escapes": "^4.2.1", @@ -22073,15 +22130,6 @@ "optional": true, "peer": true }, - "node_modules/is-reference": { - "version": "1.2.1", - "resolved": "https://registry.npmjs.org/is-reference/-/is-reference-1.2.1.tgz", - "integrity": "sha512-U82MsXXiFIrjCK4otLT+o2NA2Cd2g5MLoOVXUZjIOhLurrRxpEXzI8O0KZHr3IjLvlAH1kTPYSuqer5T9ZVBKQ==", - "dev": true, - "dependencies": { - "@types/estree": "*" - } - }, "node_modules/is-regex": { "version": "1.1.4", "resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.1.4.tgz", @@ -22637,15 +22685,15 @@ } }, "node_modules/just-diff": { - "version": "5.1.1", - "resolved": "https://registry.npmjs.org/just-diff/-/just-diff-5.1.1.tgz", - "integrity": "sha512-u8HXJ3HlNrTzY7zrYYKjNEfBlyjqhdBkoyTVdjtn7p02RJD5NvR8rIClzeGA7t+UYP1/7eAkWNLU0+P3QrEqKQ==", + "version": "5.2.0", + "resolved": "https://registry.npmjs.org/just-diff/-/just-diff-5.2.0.tgz", + "integrity": "sha512-6ufhP9SHjb7jibNFrNxyFZ6od3g+An6Ai9mhGRvcYe8UJlH0prseN64M+6ZBBUoKYHZsitDP42gAJ8+eVWr3lw==", "dev": true }, "node_modules/just-diff-apply": { - "version": "5.4.1", - "resolved": "https://registry.npmjs.org/just-diff-apply/-/just-diff-apply-5.4.1.tgz", - "integrity": "sha512-AAV5Jw7tsniWwih8Ly3fXxEZ06y+6p5TwQMsw0dzZ/wPKilzyDgdAnL0Ug4NNIquPUOh1vfFWEHbmXUqM5+o8g==", + "version": "5.5.0", + "resolved": "https://registry.npmjs.org/just-diff-apply/-/just-diff-apply-5.5.0.tgz", + "integrity": "sha512-OYTthRfSh55WOItVqwpefPtNt2VdKsq5AnAK6apdtR6yCH8pr0CmSr710J0Mf+WdQy7K/OzMy7K2MgAfdQURDw==", "dev": true }, "node_modules/jwa": { @@ -22842,9 +22890,9 @@ } }, "node_modules/libnpmaccess/node_modules/hosted-git-info": { - "version": "5.1.0", - "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-5.1.0.tgz", - "integrity": "sha512-Ek+QmMEqZF8XrbFdwoDjSbm7rT23pCgEMOJmz6GPk/s4yH//RQfNPArhIxbguNxROq/+5lNBwCDHMhA903Kx1Q==", + "version": "5.2.1", + "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-5.2.1.tgz", + "integrity": "sha512-xIcQYMnhcx2Nr4JTjsFmwwnr9vldugPy9uVm0o87bjqqWMv9GaqsTeT+i99wTl0mk1uLxJtHxLb8kymqTENQsw==", "dev": true, "dependencies": { "lru-cache": "^7.5.1" @@ -22854,9 +22902,9 @@ } }, "node_modules/libnpmaccess/node_modules/hosted-git-info/node_modules/lru-cache": { - "version": "7.14.0", - "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-7.14.0.tgz", - "integrity": "sha512-EIRtP1GrSJny0dqb50QXRUNBxHJhcpxHC++M5tD7RYbvLLn5KVWKsbyswSSqDuU15UFi3bgTQIY8nhDMeF6aDQ==", + "version": "7.14.1", + "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-7.14.1.tgz", + "integrity": "sha512-ysxwsnTKdAx96aTRdhDOCQfDgbHnt8SK0KY8SEjO0wHinhWOFTESbjVCMPbU1uGXg/ch4lifqx0wfjOawU2+WA==", "dev": true, "engines": { "node": ">=12" @@ -22909,9 +22957,9 @@ } }, "node_modules/libnpmpublish/node_modules/hosted-git-info": { - "version": "5.1.0", - "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-5.1.0.tgz", - "integrity": "sha512-Ek+QmMEqZF8XrbFdwoDjSbm7rT23pCgEMOJmz6GPk/s4yH//RQfNPArhIxbguNxROq/+5lNBwCDHMhA903Kx1Q==", + "version": "5.2.1", + "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-5.2.1.tgz", + "integrity": "sha512-xIcQYMnhcx2Nr4JTjsFmwwnr9vldugPy9uVm0o87bjqqWMv9GaqsTeT+i99wTl0mk1uLxJtHxLb8kymqTENQsw==", "dev": true, "dependencies": { "lru-cache": "^7.5.1" @@ -22921,9 +22969,9 @@ } }, "node_modules/libnpmpublish/node_modules/hosted-git-info/node_modules/lru-cache": { - "version": "7.14.0", - "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-7.14.0.tgz", - "integrity": "sha512-EIRtP1GrSJny0dqb50QXRUNBxHJhcpxHC++M5tD7RYbvLLn5KVWKsbyswSSqDuU15UFi3bgTQIY8nhDMeF6aDQ==", + "version": "7.14.1", + "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-7.14.1.tgz", + "integrity": "sha512-ysxwsnTKdAx96aTRdhDOCQfDgbHnt8SK0KY8SEjO0wHinhWOFTESbjVCMPbU1uGXg/ch4lifqx0wfjOawU2+WA==", "dev": true, "engines": { "node": ">=12" @@ -23064,9 +23112,9 @@ } }, "node_modules/local-pkg": { - "version": "0.4.1", - "resolved": "https://registry.npmjs.org/local-pkg/-/local-pkg-0.4.1.tgz", - "integrity": "sha512-lL87ytIGP2FU5PWwNDo0w3WhIo2gopIAxPg9RxDYF7m4rr5ahuZxP22xnJHIvaLTe4Z9P6uKKY2UHiwyB4pcrw==", + "version": "0.4.2", + "resolved": "https://registry.npmjs.org/local-pkg/-/local-pkg-0.4.2.tgz", + "integrity": "sha512-mlERgSPrbxU3BP4qBqAvvwlgW4MTg78iwJdGGnv7kibKjWcJksrG3t6LB5lXI93wXRDvG4NpUgJFmTG4T6rdrg==", "dev": true, "engines": { "node": ">=14" @@ -23375,9 +23423,9 @@ } }, "node_modules/make-fetch-happen/node_modules/lru-cache": { - "version": "7.14.0", - "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-7.14.0.tgz", - "integrity": "sha512-EIRtP1GrSJny0dqb50QXRUNBxHJhcpxHC++M5tD7RYbvLLn5KVWKsbyswSSqDuU15UFi3bgTQIY8nhDMeF6aDQ==", + "version": "7.14.1", + "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-7.14.1.tgz", + "integrity": "sha512-ysxwsnTKdAx96aTRdhDOCQfDgbHnt8SK0KY8SEjO0wHinhWOFTESbjVCMPbU1uGXg/ch4lifqx0wfjOawU2+WA==", "dev": true, "engines": { "node": ">=12" @@ -24842,9 +24890,9 @@ } }, "node_modules/npm-pick-manifest/node_modules/hosted-git-info": { - "version": "5.1.0", - "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-5.1.0.tgz", - "integrity": "sha512-Ek+QmMEqZF8XrbFdwoDjSbm7rT23pCgEMOJmz6GPk/s4yH//RQfNPArhIxbguNxROq/+5lNBwCDHMhA903Kx1Q==", + "version": "5.2.1", + "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-5.2.1.tgz", + "integrity": "sha512-xIcQYMnhcx2Nr4JTjsFmwwnr9vldugPy9uVm0o87bjqqWMv9GaqsTeT+i99wTl0mk1uLxJtHxLb8kymqTENQsw==", "dev": true, "dependencies": { "lru-cache": "^7.5.1" @@ -24854,9 +24902,9 @@ } }, "node_modules/npm-pick-manifest/node_modules/hosted-git-info/node_modules/lru-cache": { - "version": "7.14.0", - "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-7.14.0.tgz", - "integrity": "sha512-EIRtP1GrSJny0dqb50QXRUNBxHJhcpxHC++M5tD7RYbvLLn5KVWKsbyswSSqDuU15UFi3bgTQIY8nhDMeF6aDQ==", + "version": "7.14.1", + "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-7.14.1.tgz", + "integrity": "sha512-ysxwsnTKdAx96aTRdhDOCQfDgbHnt8SK0KY8SEjO0wHinhWOFTESbjVCMPbU1uGXg/ch4lifqx0wfjOawU2+WA==", "dev": true, "engines": { "node": ">=12" @@ -24920,9 +24968,9 @@ } }, "node_modules/npm-registry-fetch/node_modules/hosted-git-info": { - "version": "5.1.0", - "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-5.1.0.tgz", - "integrity": "sha512-Ek+QmMEqZF8XrbFdwoDjSbm7rT23pCgEMOJmz6GPk/s4yH//RQfNPArhIxbguNxROq/+5lNBwCDHMhA903Kx1Q==", + "version": "5.2.1", + "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-5.2.1.tgz", + "integrity": "sha512-xIcQYMnhcx2Nr4JTjsFmwwnr9vldugPy9uVm0o87bjqqWMv9GaqsTeT+i99wTl0mk1uLxJtHxLb8kymqTENQsw==", "dev": true, "dependencies": { "lru-cache": "^7.5.1" @@ -24932,9 +24980,9 @@ } }, "node_modules/npm-registry-fetch/node_modules/hosted-git-info/node_modules/lru-cache": { - "version": "7.14.0", - "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-7.14.0.tgz", - "integrity": "sha512-EIRtP1GrSJny0dqb50QXRUNBxHJhcpxHC++M5tD7RYbvLLn5KVWKsbyswSSqDuU15UFi3bgTQIY8nhDMeF6aDQ==", + "version": "7.14.1", + "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-7.14.1.tgz", + "integrity": "sha512-ysxwsnTKdAx96aTRdhDOCQfDgbHnt8SK0KY8SEjO0wHinhWOFTESbjVCMPbU1uGXg/ch4lifqx0wfjOawU2+WA==", "dev": true, "engines": { "node": ">=12" @@ -25030,14 +25078,14 @@ "peer": true }, "node_modules/nx": { - "version": "15.0.0", - "resolved": "https://registry.npmjs.org/nx/-/nx-15.0.0.tgz", - "integrity": "sha512-uh9Ou5oj7yr6Uyp4QhqW1vIVoanYn1sJM1jzOyoT17GAhhODfS0BtQgUvlmInDuRqP8LMaPg4LXFMby07U1HXg==", + "version": "15.3.3", + "resolved": "https://registry.npmjs.org/nx/-/nx-15.3.3.tgz", + "integrity": "sha512-yR102AlVW5Sb7X1e9cyR+0h44RD6c3eLJbAZ0yVFKPCKw+zQTdGvAqITtB6ZeFnPkg6Qq6f1oWu6G0n6f2cTpw==", "dev": true, "hasInstallScript": true, "dependencies": { - "@nrwl/cli": "15.0.0", - "@nrwl/tao": "15.0.0", + "@nrwl/cli": "15.3.3", + "@nrwl/tao": "15.3.3", "@parcel/watcher": "2.0.4", "@yarnpkg/lockfile": "^1.1.0", "@yarnpkg/parsers": "^3.0.0-rc.18", @@ -25069,8 +25117,8 @@ "tsconfig-paths": "^3.9.0", "tslib": "^2.3.0", "v8-compile-cache": "2.3.0", - "yargs": "^17.4.0", - "yargs-parser": "21.0.1" + "yargs": "^17.6.2", + "yargs-parser": "21.1.1" }, "bin": { "nx": "bin/nx.js" @@ -25089,9 +25137,9 @@ } }, "node_modules/nx/node_modules/axios": { - "version": "1.1.3", - "resolved": "https://registry.npmjs.org/axios/-/axios-1.1.3.tgz", - "integrity": "sha512-00tXVRwKx/FZr/IDVFt4C+f9FYairX517WoGCL6dpOntqLkZofjhu43F/Xl44UOpqa+9sLFDrG/XAnFsUYgkDA==", + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/axios/-/axios-1.2.1.tgz", + "integrity": "sha512-I88cFiGu9ryt/tfVEi4kX2SITsvDddTajXTOFmt2uK1ZVA8LytjtdeyefdQWEf5PU8w+4SSJDoYnggflB5tW4A==", "dev": true, "dependencies": { "follow-redirects": "^1.15.0", @@ -25249,9 +25297,9 @@ } }, "node_modules/nx/node_modules/yargs": { - "version": "17.6.0", - "resolved": "https://registry.npmjs.org/yargs/-/yargs-17.6.0.tgz", - "integrity": "sha512-8H/wTDqlSwoSnScvV2N/JHfLWOKuh5MVla9hqLjK3nsfyy6Y4kDSYSvkU5YCUEPOSnRXfIyx3Sq+B/IWudTo4g==", + "version": "17.6.2", + "resolved": "https://registry.npmjs.org/yargs/-/yargs-17.6.2.tgz", + "integrity": "sha512-1/9UrdHjDZc0eOU0HxOHoS78C69UD3JRMvzlJ7S79S2nTaWRA/whGCTV8o9e/N/1Va9YIV7Q4sOxD8VV4pCWOw==", "dev": true, "dependencies": { "cliui": "^8.0.1", @@ -25260,16 +25308,16 @@ "require-directory": "^2.1.1", "string-width": "^4.2.3", "y18n": "^5.0.5", - "yargs-parser": "^21.0.0" + "yargs-parser": "^21.1.1" }, "engines": { "node": ">=12" } }, "node_modules/nx/node_modules/yargs-parser": { - "version": "21.0.1", - "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-21.0.1.tgz", - "integrity": "sha512-9BK1jFpLzJROCI5TzwZL/TU4gqjK5xiHV/RfWLOahrjAko/e4DJkRDZQXfvqAsiZzzYhgAzbgz6lg48jcm4GLg==", + "version": "21.1.1", + "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-21.1.1.tgz", + "integrity": "sha512-tVpsJW7DdjecAiFpbIB1e3qxIQsE6NoPc5/eTdrbbIC4h0LVsWhnoa3g+m2HclBIujHzsxZ4VJVA+GUuc2/LBw==", "dev": true, "engines": { "node": ">=12" @@ -25911,9 +25959,9 @@ } }, "node_modules/pacote/node_modules/hosted-git-info": { - "version": "5.1.0", - "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-5.1.0.tgz", - "integrity": "sha512-Ek+QmMEqZF8XrbFdwoDjSbm7rT23pCgEMOJmz6GPk/s4yH//RQfNPArhIxbguNxROq/+5lNBwCDHMhA903Kx1Q==", + "version": "5.2.1", + "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-5.2.1.tgz", + "integrity": "sha512-xIcQYMnhcx2Nr4JTjsFmwwnr9vldugPy9uVm0o87bjqqWMv9GaqsTeT+i99wTl0mk1uLxJtHxLb8kymqTENQsw==", "dev": true, "dependencies": { "lru-cache": "^7.5.1" @@ -25923,9 +25971,9 @@ } }, "node_modules/pacote/node_modules/hosted-git-info/node_modules/lru-cache": { - "version": "7.14.0", - "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-7.14.0.tgz", - "integrity": "sha512-EIRtP1GrSJny0dqb50QXRUNBxHJhcpxHC++M5tD7RYbvLLn5KVWKsbyswSSqDuU15UFi3bgTQIY8nhDMeF6aDQ==", + "version": "7.14.1", + "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-7.14.1.tgz", + "integrity": "sha512-ysxwsnTKdAx96aTRdhDOCQfDgbHnt8SK0KY8SEjO0wHinhWOFTESbjVCMPbU1uGXg/ch4lifqx0wfjOawU2+WA==", "dev": true, "engines": { "node": ">=12" @@ -26456,9 +26504,9 @@ } }, "node_modules/postcss": { - "version": "8.4.14", - "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.14.tgz", - "integrity": "sha512-E398TUmfAYFPBSdzgeieK2Y1+1cpdxJx8yXbK/m57nRhKSmk1GB2tO4lbLBtlkfPQTDKfe4Xqv1ASWPpayPEig==", + "version": "8.4.19", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.19.tgz", + "integrity": "sha512-h+pbPsyhlYj6N2ozBmHhHrs9DzGmbaarbLvWipMRO7RLS+v4onj26MPFXA5OBYFxyqYhUJK456SwDcY9H2/zsA==", "dev": true, "funding": [ { @@ -27254,9 +27302,9 @@ } }, "node_modules/read-package-json/node_modules/hosted-git-info": { - "version": "5.1.0", - "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-5.1.0.tgz", - "integrity": "sha512-Ek+QmMEqZF8XrbFdwoDjSbm7rT23pCgEMOJmz6GPk/s4yH//RQfNPArhIxbguNxROq/+5lNBwCDHMhA903Kx1Q==", + "version": "5.2.1", + "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-5.2.1.tgz", + "integrity": "sha512-xIcQYMnhcx2Nr4JTjsFmwwnr9vldugPy9uVm0o87bjqqWMv9GaqsTeT+i99wTl0mk1uLxJtHxLb8kymqTENQsw==", "dev": true, "dependencies": { "lru-cache": "^7.5.1" @@ -27266,9 +27314,9 @@ } }, "node_modules/read-package-json/node_modules/hosted-git-info/node_modules/lru-cache": { - "version": "7.14.0", - "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-7.14.0.tgz", - "integrity": "sha512-EIRtP1GrSJny0dqb50QXRUNBxHJhcpxHC++M5tD7RYbvLLn5KVWKsbyswSSqDuU15UFi3bgTQIY8nhDMeF6aDQ==", + "version": "7.14.1", + "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-7.14.1.tgz", + "integrity": "sha512-ysxwsnTKdAx96aTRdhDOCQfDgbHnt8SK0KY8SEjO0wHinhWOFTESbjVCMPbU1uGXg/ch4lifqx0wfjOawU2+WA==", "dev": true, "engines": { "node": ">=12" @@ -27559,6 +27607,7 @@ "version": "1.1.0", "resolved": "https://registry.npmjs.org/readdir-scoped-modules/-/readdir-scoped-modules-1.1.0.tgz", "integrity": "sha512-asaikDeqAQg7JifRsZn1NJZXo9E+VwlyCfbkZhwyISinqk5zNS6266HS5kah6P0SaQKGF6SkNnZVHUzHFYxYDw==", + "deprecated": "This functionality has been moved to @npmcli/fs", "dev": true, "dependencies": { "debuglog": "^1.0.1", @@ -28106,15 +28155,16 @@ } }, "node_modules/rollup": { - "version": "2.79.1", - "resolved": "https://registry.npmjs.org/rollup/-/rollup-2.79.1.tgz", - "integrity": "sha512-uKxbd0IhMZOhjAiD5oAFp7BqvkA4Dv47qpOCtaNvng4HBwdbWtdOh8f5nZNuk2rp51PMGk3bzfWu5oayNEuYnw==", + "version": "3.7.0", + "resolved": "https://registry.npmjs.org/rollup/-/rollup-3.7.0.tgz", + "integrity": "sha512-FIJe0msW9P7L9BTfvaJyvn1U1BVCNTL3w8O+PKIrCyiMLg+rIUGb4MbcgVZ10Lnm1uWXOTOWRNARjfXC1+M12Q==", "dev": true, "bin": { "rollup": "dist/bin/rollup" }, "engines": { - "node": ">=10.0.0" + "node": ">=14.18.0", + "npm": ">=8.0.0" }, "optionalDependencies": { "fsevents": "~2.3.2" @@ -28217,50 +28267,12 @@ } }, "node_modules/rollup-plugin-scss": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/rollup-plugin-scss/-/rollup-plugin-scss-3.0.0.tgz", - "integrity": "sha512-UldNaNHEon2a5IusHvj/Nnwc7q13YDvbFxz5pfNbHBNStxGoUNyM+0XwAA/UafJ1u8XRPGdBMrhWFthrrGZdWQ==", - "dev": true, - "dependencies": { - "rollup-pluginutils": "^2.3.3" - } - }, - "node_modules/rollup-plugin-terser": { - "version": "7.0.2", - "resolved": "https://registry.npmjs.org/rollup-plugin-terser/-/rollup-plugin-terser-7.0.2.tgz", - "integrity": "sha512-w3iIaU4OxcF52UUXiZNsNeuXIMDvFrr+ZXK6bFZ0Q60qyVfq4uLptoS4bbq3paG3x216eQllFZX7zt6TIImguQ==", - "dev": true, - "dependencies": { - "@babel/code-frame": "^7.10.4", - "jest-worker": "^26.2.1", - "serialize-javascript": "^4.0.0", - "terser": "^5.0.0" - }, - "peerDependencies": { - "rollup": "^2.0.0" - } - }, - "node_modules/rollup-plugin-terser/node_modules/jest-worker": { - "version": "26.6.2", - "resolved": "https://registry.npmjs.org/jest-worker/-/jest-worker-26.6.2.tgz", - "integrity": "sha512-KWYVV1c4i+jbMpaBC+U++4Va0cp8OisU185o73T1vo99hqi7w8tSJfUXYswwqqrjzwxa6KpRK54WhPvwf5w6PQ==", - "dev": true, - "dependencies": { - "@types/node": "*", - "merge-stream": "^2.0.0", - "supports-color": "^7.0.0" - }, - "engines": { - "node": ">= 10.13.0" - } - }, - "node_modules/rollup-plugin-terser/node_modules/serialize-javascript": { "version": "4.0.0", - "resolved": "https://registry.npmjs.org/serialize-javascript/-/serialize-javascript-4.0.0.tgz", - "integrity": "sha512-GaNA54380uFefWghODBWEGisLZFj00nS5ACs6yHa9nLqlLpVLO8ChDGeKRjZnV4Nh4n0Qi7nhYZD/9fCPzEqkw==", + "resolved": "https://registry.npmjs.org/rollup-plugin-scss/-/rollup-plugin-scss-4.0.0.tgz", + "integrity": "sha512-wxasNXDYC2m+fDxCMgK00WebVWYmeFvShyNABmjvSJZ6D1/SepwqFeaMFMQromveI79gfvb64yJjiZZxSZxEIA==", "dev": true, "dependencies": { - "randombytes": "^2.1.0" + "rollup-pluginutils": "^2.3.3" } }, "node_modules/rollup-pluginutils": { @@ -28723,6 +28735,12 @@ "npm": ">= 3.0.0" } }, + "node_modules/smob": { + "version": "0.0.6", + "resolved": "https://registry.npmjs.org/smob/-/smob-0.0.6.tgz", + "integrity": "sha512-V21+XeNni+tTyiST1MHsa84AQhT1aFZipzPpOFAVB8DkHzwJyjjAmt9bgwnuZiZWnIbMo2duE29wybxv/7HWUw==", + "dev": true + }, "node_modules/snapdragon": { "version": "0.8.2", "resolved": "https://registry.npmjs.org/snapdragon/-/snapdragon-0.8.2.tgz", @@ -29581,6 +29599,18 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/strip-literal": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/strip-literal/-/strip-literal-1.0.0.tgz", + "integrity": "sha512-5o4LsH1lzBzO9UFH63AJ2ad2/S2AVx6NtjOcaz+VTT2h1RiRvbipW72z8M/lxEhcPHDBQwpDrnTF7sXy/7OwCQ==", + "dev": true, + "dependencies": { + "acorn": "^8.8.1" + }, + "funding": { + "url": "https://github.com/sponsors/antfu" + } + }, "node_modules/strong-log-transformer": { "version": "2.1.0", "resolved": "https://registry.npmjs.org/strong-log-transformer/-/strong-log-transformer-2.1.0.tgz", @@ -29820,9 +29850,9 @@ } }, "node_modules/terser": { - "version": "5.14.0", - "resolved": "https://registry.npmjs.org/terser/-/terser-5.14.0.tgz", - "integrity": "sha512-JC6qfIEkPBd9j1SMO3Pfn+A6w2kQV54tv+ABQLgZr7dA3k/DL/OBoYSWxzVpZev3J+bUHXfr55L8Mox7AaNo6g==", + "version": "5.16.1", + "resolved": "https://registry.npmjs.org/terser/-/terser-5.16.1.tgz", + "integrity": "sha512-xvQfyfA1ayT0qdK47zskQgRZeWLoOQ8JQ6mIgRGVNwZKdQMU+5FkCBjmv4QjcrTzyZquRw2FVtlJSRUmMKQslw==", "dev": true, "dependencies": { "@jridgewell/source-map": "^0.3.2", @@ -31038,19 +31068,25 @@ "node": ">=0.6.0" } }, + "node_modules/tinybench": { + "version": "2.3.1", + "resolved": "https://registry.npmjs.org/tinybench/-/tinybench-2.3.1.tgz", + "integrity": "sha512-hGYWYBMPr7p4g5IarQE7XhlyWveh1EKhy4wUBS1LrHXCKYgvz+4/jCqgmJqZxxldesn05vccrtME2RLLZNW7iA==", + "dev": true + }, "node_modules/tinypool": { - "version": "0.2.1", - "resolved": "https://registry.npmjs.org/tinypool/-/tinypool-0.2.1.tgz", - "integrity": "sha512-HFU5ZYVq3wBfhSaf8qdqGsneaqXm0FgJQpoUlJbVdHpRLzm77IneKAD3RjzJWZvIv0YpPB9S7LUW53f6BE6ZSg==", + "version": "0.3.0", + "resolved": "https://registry.npmjs.org/tinypool/-/tinypool-0.3.0.tgz", + "integrity": "sha512-NX5KeqHOBZU6Bc0xj9Vr5Szbb1j8tUHIeD18s41aDJaPeC5QTdEhK0SpdpUrZlj2nv5cctNcSjaKNanXlfcVEQ==", "dev": true, "engines": { "node": ">=14.0.0" } }, "node_modules/tinyspy": { - "version": "0.3.3", - "resolved": "https://registry.npmjs.org/tinyspy/-/tinyspy-0.3.3.tgz", - "integrity": "sha512-gRiUR8fuhUf0W9lzojPf1N1euJYA30ISebSfgca8z76FOvXtVXqd5ojEIaKLWbDQhAaC3ibxZIjqbyi4ybjcTw==", + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/tinyspy/-/tinyspy-1.0.2.tgz", + "integrity": "sha512-bSGlgwLBYf7PnUsQ6WOc6SJ3pGOcd+d8AA6EUnLDDM0kWEstC1JIlSZA3UNliDXhd9ABoS7hiRBDCu+XP/sf1Q==", "dev": true, "engines": { "node": ">=14.0.0" @@ -32087,31 +32123,37 @@ } }, "node_modules/vite": { - "version": "2.9.13", - "resolved": "https://registry.npmjs.org/vite/-/vite-2.9.13.tgz", - "integrity": "sha512-AsOBAaT0AD7Mhe8DuK+/kE4aWYFMx/i0ZNi98hJclxb4e0OhQcZYUrvLjIaQ8e59Ui7txcvKMiJC1yftqpQoDw==", + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/vite/-/vite-4.0.0.tgz", + "integrity": "sha512-ynad+4kYs8Jcnn8J7SacS9vAbk7eMy0xWg6E7bAhS1s79TK+D7tVFGXVZ55S7RNLRROU1rxoKlvZ/qjaB41DGA==", "dev": true, "dependencies": { - "esbuild": "^0.14.27", - "postcss": "^8.4.13", - "resolve": "^1.22.0", - "rollup": "^2.59.0" + "esbuild": "^0.16.3", + "postcss": "^8.4.19", + "resolve": "^1.22.1", + "rollup": "^3.7.0" }, "bin": { "vite": "bin/vite.js" }, "engines": { - "node": ">=12.2.0" + "node": "^14.18.0 || >=16.0.0" }, "optionalDependencies": { "fsevents": "~2.3.2" }, "peerDependencies": { + "@types/node": ">= 14", "less": "*", "sass": "*", - "stylus": "*" + "stylus": "*", + "sugarss": "*", + "terser": "^5.4.0" }, "peerDependenciesMeta": { + "@types/node": { + "optional": true + }, "less": { "optional": true }, @@ -32120,24 +32162,35 @@ }, "stylus": { "optional": true + }, + "sugarss": { + "optional": true + }, + "terser": { + "optional": true } } }, "node_modules/vitest": { - "version": "0.16.0", - "resolved": "https://registry.npmjs.org/vitest/-/vitest-0.16.0.tgz", - "integrity": "sha512-Ntp6jrM8wf2NMtamMBLkRBBdeqHkgAH/WMh5Xryts1j2ft2D8QZQbiSVFkSl4WmEQzcPP0YM069g/Ga1vtnEtg==", + "version": "0.25.7", + "resolved": "https://registry.npmjs.org/vitest/-/vitest-0.25.7.tgz", + "integrity": "sha512-lJ+Ue+v8kHl2JzjaKHJ9u5Yo/loU7zrWK2/Whn8OKQjtq5G7nkeWfXuq3elZaC8xKdkdIuWiiIicaNBG1F5yzg==", "dev": true, "dependencies": { - "@types/chai": "^4.3.1", + "@types/chai": "^4.3.3", "@types/chai-subset": "^1.3.3", "@types/node": "*", + "acorn": "^8.8.0", + "acorn-walk": "^8.2.0", "chai": "^4.3.6", "debug": "^4.3.4", - "local-pkg": "^0.4.1", - "tinypool": "^0.2.1", - "tinyspy": "^0.3.3", - "vite": "^2.9.12" + "local-pkg": "^0.4.2", + "source-map": "^0.6.1", + "strip-literal": "^1.0.0", + "tinybench": "^2.3.1", + "tinypool": "^0.3.0", + "tinyspy": "^1.0.2", + "vite": "^3.0.0 || ^4.0.0" }, "bin": { "vitest": "vitest.mjs" @@ -32149,16 +32202,20 @@ "url": "https://github.com/sponsors/antfu" }, "peerDependencies": { + "@edge-runtime/vm": "*", + "@vitest/browser": "*", "@vitest/ui": "*", - "c8": "*", "happy-dom": "*", "jsdom": "*" }, "peerDependenciesMeta": { - "@vitest/ui": { + "@edge-runtime/vm": { "optional": true }, - "c8": { + "@vitest/browser": { + "optional": true + }, + "@vitest/ui": { "optional": true }, "happy-dom": { @@ -32169,6 +32226,15 @@ } } }, + "node_modules/vitest/node_modules/acorn-walk": { + "version": "8.2.0", + "resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-8.2.0.tgz", + "integrity": "sha512-k+iyHEuPgSw6SbuDpGQM+06HQUa04DZ3o+F6CSzXMvvI5KMvnaEqXe+YVe555R9nn6GPt404fos4wcgpw12SDA==", + "dev": true, + "engines": { + "node": ">=0.4.0" + } + }, "node_modules/vitest/node_modules/chai": { "version": "4.3.6", "resolved": "https://registry.npmjs.org/chai/-/chai-4.3.6.tgz", @@ -33322,14 +33388,6 @@ "@jridgewell/trace-mapping": "^0.3.9" } }, - "@axa-ch/materials": { - "version": "15.0.1", - "resolved": "https://registry.npmjs.org/@axa-ch/materials/-/materials-15.0.1.tgz", - "integrity": "sha512-7GU6NgkIXwxRqloKaYxRQ4tHGLzdL2lbkjaBx1ZZZpRf9Q13B1qox50UftJC7w1WhinjhpUowAnT8c+g688Hbg==", - "requires": { - "lit": "^2.2.1" - } - }, "@babel/code-frame": { "version": "7.18.6", "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.18.6.tgz", @@ -34723,6 +34781,160 @@ "integrity": "sha512-dBVuXR082gk3jsFp7Rd/JI4kytwGHecnCoTtXFb7DB6CNHp4rg5k1bhg0nWdLGLnOV71lmDzGQaLMy8iPLY0pw==", "dev": true }, + "@esbuild/android-arm": { + "version": "0.16.4", + "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.16.4.tgz", + "integrity": "sha512-rZzb7r22m20S1S7ufIc6DC6W659yxoOrl7sKP1nCYhuvUlnCFHVSbATG4keGUtV8rDz11sRRDbWkvQZpzPaHiw==", + "dev": true, + "optional": true + }, + "@esbuild/android-arm64": { + "version": "0.16.4", + "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.16.4.tgz", + "integrity": "sha512-VPuTzXFm/m2fcGfN6CiwZTlLzxrKsWbPkG7ArRFpuxyaHUm/XFHQPD4xNwZT6uUmpIHhnSjcaCmcla8COzmZ5Q==", + "dev": true, + "optional": true + }, + "@esbuild/android-x64": { + "version": "0.16.4", + "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.16.4.tgz", + "integrity": "sha512-MW+B2O++BkcOfMWmuHXB15/l1i7wXhJFqbJhp82IBOais8RBEQv2vQz/jHrDEHaY2X0QY7Wfw86SBL2PbVOr0g==", + "dev": true, + "optional": true + }, + "@esbuild/darwin-arm64": { + "version": "0.16.4", + "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.16.4.tgz", + "integrity": "sha512-a28X1O//aOfxwJVZVs7ZfM8Tyih2Za4nKJrBwW5Wm4yKsnwBy9aiS/xwpxiiTRttw3EaTg4Srerhcm6z0bu9Wg==", + "dev": true, + "optional": true + }, + "@esbuild/darwin-x64": { + "version": "0.16.4", + "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.16.4.tgz", + "integrity": "sha512-e3doCr6Ecfwd7VzlaQqEPrnbvvPjE9uoTpxG5pyLzr2rI2NMjDHmvY1E5EO81O/e9TUOLLkXA5m6T8lfjK9yAA==", + "dev": true, + "optional": true + }, + "@esbuild/freebsd-arm64": { + "version": "0.16.4", + "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.16.4.tgz", + "integrity": "sha512-Oup3G/QxBgvvqnXWrBed7xxkFNwAwJVHZcklWyQt7YCAL5bfUkaa6FVWnR78rNQiM8MqqLiT6ZTZSdUFuVIg1w==", + "dev": true, + "optional": true + }, + "@esbuild/freebsd-x64": { + "version": "0.16.4", + "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.16.4.tgz", + "integrity": "sha512-vAP+eYOxlN/Bpo/TZmzEQapNS8W1njECrqkTpNgvXskkkJC2AwOXwZWai/Kc2vEFZUXQttx6UJbj9grqjD/+9Q==", + "dev": true, + "optional": true + }, + "@esbuild/linux-arm": { + "version": "0.16.4", + "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.16.4.tgz", + "integrity": "sha512-A47ZmtpIPyERxkSvIv+zLd6kNIOtJH03XA0Hy7jaceRDdQaQVGSDt4mZqpWqJYgDk9rg96aglbF6kCRvPGDSUA==", + "dev": true, + "optional": true + }, + "@esbuild/linux-arm64": { + "version": "0.16.4", + "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.16.4.tgz", + "integrity": "sha512-2zXoBhv4r5pZiyjBKrOdFP4CXOChxXiYD50LRUU+65DkdS5niPFHbboKZd/c81l0ezpw7AQnHeoCy5hFrzzs4g==", + "dev": true, + "optional": true + }, + "@esbuild/linux-ia32": { + "version": "0.16.4", + "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.16.4.tgz", + "integrity": "sha512-uxdSrpe9wFhz4yBwt2kl2TxS/NWEINYBUFIxQtaEVtglm1eECvsj1vEKI0KX2k2wCe17zDdQ3v+jVxfwVfvvjw==", + "dev": true, + "optional": true + }, + "@esbuild/linux-loong64": { + "version": "0.16.4", + "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.16.4.tgz", + "integrity": "sha512-peDrrUuxbZ9Jw+DwLCh/9xmZAk0p0K1iY5d2IcwmnN+B87xw7kujOkig6ZRcZqgrXgeRGurRHn0ENMAjjD5DEg==", + "dev": true, + "optional": true + }, + "@esbuild/linux-mips64el": { + "version": "0.16.4", + "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.16.4.tgz", + "integrity": "sha512-sD9EEUoGtVhFjjsauWjflZklTNr57KdQ6xfloO4yH1u7vNQlOfAlhEzbyBKfgbJlW7rwXYBdl5/NcZ+Mg2XhQA==", + "dev": true, + "optional": true + }, + "@esbuild/linux-ppc64": { + "version": "0.16.4", + "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.16.4.tgz", + "integrity": "sha512-X1HSqHUX9D+d0l6/nIh4ZZJ94eQky8d8z6yxAptpZE3FxCWYWvTDd9X9ST84MGZEJx04VYUD/AGgciddwO0b8g==", + "dev": true, + "optional": true + }, + "@esbuild/linux-riscv64": { + "version": "0.16.4", + "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.16.4.tgz", + "integrity": "sha512-97ANpzyNp0GTXCt6SRdIx1ngwncpkV/z453ZuxbnBROCJ5p/55UjhbaG23UdHj88fGWLKPFtMoU4CBacz4j9FA==", + "dev": true, + "optional": true + }, + "@esbuild/linux-s390x": { + "version": "0.16.4", + "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.16.4.tgz", + "integrity": "sha512-pUvPQLPmbEeJRPjP0DYTC1vjHyhrnCklQmCGYbipkep+oyfTn7GTBJXoPodR7ZS5upmEyc8lzAkn2o29wD786A==", + "dev": true, + "optional": true + }, + "@esbuild/linux-x64": { + "version": "0.16.4", + "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.16.4.tgz", + "integrity": "sha512-N55Q0mJs3Sl8+utPRPBrL6NLYZKBCLLx0bme/+RbjvMforTGGzFvsRl4xLTZMUBFC1poDzBEPTEu5nxizQ9Nlw==", + "dev": true, + "optional": true + }, + "@esbuild/netbsd-x64": { + "version": "0.16.4", + "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.16.4.tgz", + "integrity": "sha512-LHSJLit8jCObEQNYkgsDYBh2JrJT53oJO2HVdkSYLa6+zuLJh0lAr06brXIkljrlI+N7NNW1IAXGn/6IZPi3YQ==", + "dev": true, + "optional": true + }, + "@esbuild/openbsd-x64": { + "version": "0.16.4", + "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.16.4.tgz", + "integrity": "sha512-nLgdc6tWEhcCFg/WVFaUxHcPK3AP/bh+KEwKtl69Ay5IBqUwKDaq/6Xk0E+fh/FGjnLwqFSsarsbPHeKM8t8Sw==", + "dev": true, + "optional": true + }, + "@esbuild/sunos-x64": { + "version": "0.16.4", + "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.16.4.tgz", + "integrity": "sha512-08SluG24GjPO3tXKk95/85n9kpyZtXCVwURR2i4myhrOfi3jspClV0xQQ0W0PYWHioJj+LejFMt41q+PG3mlAQ==", + "dev": true, + "optional": true + }, + "@esbuild/win32-arm64": { + "version": "0.16.4", + "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.16.4.tgz", + "integrity": "sha512-yYiRDQcqLYQSvNQcBKN7XogbrSvBE45FEQdH8fuXPl7cngzkCvpsG2H9Uey39IjQ6gqqc+Q4VXYHsQcKW0OMjQ==", + "dev": true, + "optional": true + }, + "@esbuild/win32-ia32": { + "version": "0.16.4", + "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.16.4.tgz", + "integrity": "sha512-5rabnGIqexekYkh9zXG5waotq8mrdlRoBqAktjx2W3kb0zsI83mdCwrcAeKYirnUaTGztR5TxXcXmQrEzny83w==", + "dev": true, + "optional": true + }, + "@esbuild/win32-x64": { + "version": "0.16.4", + "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.16.4.tgz", + "integrity": "sha512-sN/I8FMPtmtT2Yw+Dly8Ur5vQ5a/RmC8hW7jO9PtPSQUPkowxWpcUZnqOggU7VwyT3Xkj6vcXWd3V/qTXwultQ==", + "dev": true, + "optional": true + }, "@eslint/eslintrc": { "version": "1.3.0", "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-1.3.0.tgz", @@ -37524,18 +37736,18 @@ } }, "hosted-git-info": { - "version": "5.1.0", - "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-5.1.0.tgz", - "integrity": "sha512-Ek+QmMEqZF8XrbFdwoDjSbm7rT23pCgEMOJmz6GPk/s4yH//RQfNPArhIxbguNxROq/+5lNBwCDHMhA903Kx1Q==", + "version": "5.2.1", + "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-5.2.1.tgz", + "integrity": "sha512-xIcQYMnhcx2Nr4JTjsFmwwnr9vldugPy9uVm0o87bjqqWMv9GaqsTeT+i99wTl0mk1uLxJtHxLb8kymqTENQsw==", "dev": true, "requires": { "lru-cache": "^7.5.1" }, "dependencies": { "lru-cache": { - "version": "7.14.0", - "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-7.14.0.tgz", - "integrity": "sha512-EIRtP1GrSJny0dqb50QXRUNBxHJhcpxHC++M5tD7RYbvLLn5KVWKsbyswSSqDuU15UFi3bgTQIY8nhDMeF6aDQ==", + "version": "7.14.1", + "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-7.14.1.tgz", + "integrity": "sha512-ysxwsnTKdAx96aTRdhDOCQfDgbHnt8SK0KY8SEjO0wHinhWOFTESbjVCMPbU1uGXg/ch4lifqx0wfjOawU2+WA==", "dev": true } } @@ -37620,9 +37832,9 @@ }, "dependencies": { "lru-cache": { - "version": "7.14.0", - "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-7.14.0.tgz", - "integrity": "sha512-EIRtP1GrSJny0dqb50QXRUNBxHJhcpxHC++M5tD7RYbvLLn5KVWKsbyswSSqDuU15UFi3bgTQIY8nhDMeF6aDQ==", + "version": "7.14.1", + "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-7.14.1.tgz", + "integrity": "sha512-ysxwsnTKdAx96aTRdhDOCQfDgbHnt8SK0KY8SEjO0wHinhWOFTESbjVCMPbU1uGXg/ch4lifqx0wfjOawU2+WA==", "dev": true }, "mkdirp": { @@ -37685,9 +37897,9 @@ } }, "minimatch": { - "version": "5.1.0", - "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-5.1.0.tgz", - "integrity": "sha512-9TPBGGak4nHfGZsPBohm9AWg6NoT7QTCehS3BIJABslyZbzxfV78QM2Y6+i741OPZIafFAaiiEMh5OyIrJPgtg==", + "version": "5.1.1", + "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-5.1.1.tgz", + "integrity": "sha512-362NP+zlprccbEt/SkxKfRMHnNY85V74mVnpUpNyr3F35covl09Kec7/sEFLt3RA4oXmewtoaanoIf67SE5Y5g==", "dev": true, "requires": { "brace-expansion": "^2.0.1" @@ -37780,18 +37992,18 @@ } }, "@nrwl/cli": { - "version": "15.0.0", - "resolved": "https://registry.npmjs.org/@nrwl/cli/-/cli-15.0.0.tgz", - "integrity": "sha512-D0zAhZ375bQnoUM2HLifMzAa75A3/lC9OkkewsiVVbqaznjEIry8ezHZepgfjFRVzLr3ue7FIpDEH3iJIYzvVw==", + "version": "15.3.3", + "resolved": "https://registry.npmjs.org/@nrwl/cli/-/cli-15.3.3.tgz", + "integrity": "sha512-ZWTmVP9H3ukppWWGaS/s3Nym2nOYgnt6eHtuUFNsroz8LesG5oFAJviOz9jDEM/b+pLIrvYfU5aAGZqrtM3Z2A==", "dev": true, "requires": { - "nx": "15.0.0" + "nx": "15.3.3" } }, "@nrwl/devkit": { - "version": "15.0.0", - "resolved": "https://registry.npmjs.org/@nrwl/devkit/-/devkit-15.0.0.tgz", - "integrity": "sha512-ALtPfILlxLDg77rV/XNdDGbhUkh0gZPj/4Ehy3ScvVqPhTrDIZNLGX13dXgUUF9xhGb7SXPmvzZkduBpqmHnfQ==", + "version": "15.3.3", + "resolved": "https://registry.npmjs.org/@nrwl/devkit/-/devkit-15.3.3.tgz", + "integrity": "sha512-48R9HAp6r6umWNXTlVTMsH94YYjU/XUPLDTtXBgKESMVbdq8Fk+HDHuN0thXG5dL6DFkXgD0MICLm3jSQU6xMw==", "dev": true, "requires": { "@phenomnomnominal/tsquery": "4.1.1", @@ -37813,12 +38025,12 @@ } }, "@nrwl/tao": { - "version": "15.0.0", - "resolved": "https://registry.npmjs.org/@nrwl/tao/-/tao-15.0.0.tgz", - "integrity": "sha512-qup1eSWYwp/KVrw/wxeWBvYttQ9dcbQnqpXb5NQMD31SpXEZSpJB1i3GV/o6CF5qQQSNLwICXZx25rNTTQAqpg==", + "version": "15.3.3", + "resolved": "https://registry.npmjs.org/@nrwl/tao/-/tao-15.3.3.tgz", + "integrity": "sha512-f9+VwhlJ/7TWpjHSgoUOAA067uP9DmzABMY9HC5OREEDaCx+rzYEvbLAPv6cXzWw+6IYM6cyKw0zWSQrdEVrWg==", "dev": true, "requires": { - "nx": "15.0.0" + "nx": "15.3.3" } }, "@octokit/auth-token": { @@ -37865,9 +38077,9 @@ } }, "@octokit/graphql": { - "version": "5.0.3", - "resolved": "https://registry.npmjs.org/@octokit/graphql/-/graphql-5.0.3.tgz", - "integrity": "sha512-VjhqOu2CHo2hwank1y2k8YcqF83zJW6upyP1+0l3wegvpq+4H31zOA5Rkyx76uJBUdJooUR5UnFyclBptzl86Q==", + "version": "5.0.4", + "resolved": "https://registry.npmjs.org/@octokit/graphql/-/graphql-5.0.4.tgz", + "integrity": "sha512-amO1M5QUQgYQo09aStR/XO7KAl13xpigcy/kI8/N1PnZYSS69fgte+xA4+c2DISKqUZfsh0wwjc2FaCt99L41A==", "dev": true, "requires": { "@octokit/request": "^6.0.0", @@ -38004,52 +38216,65 @@ } } }, - "@rollup/plugin-commonjs": { - "version": "23.0.0", - "resolved": "https://registry.npmjs.org/@rollup/plugin-commonjs/-/plugin-commonjs-23.0.0.tgz", - "integrity": "sha512-JbrTRyDNtLQj/rhl7RFUuYXwQ2fac+33oLDAu2k++WD95zweyo28UAomLVA0JMGx4vmCa7Nw4T6k/1F6lelExg==", - "dev": true, - "requires": { - "@rollup/pluginutils": "^4.2.1", - "commondir": "^1.0.1", - "estree-walker": "^2.0.2", - "glob": "^8.0.3", - "is-reference": "1.2.1", - "magic-string": "^0.26.4" - } - }, "@rollup/plugin-node-resolve": { - "version": "15.0.0", - "resolved": "https://registry.npmjs.org/@rollup/plugin-node-resolve/-/plugin-node-resolve-15.0.0.tgz", - "integrity": "sha512-iwJbzfTzlzDDQcGmkS7EkCKwe2kSkdBrjX87Fy/KrNjr6UNnLpod0t6X66e502LRe5JJCA4FFqrEscWPnZAkig==", + "version": "15.0.1", + "resolved": "https://registry.npmjs.org/@rollup/plugin-node-resolve/-/plugin-node-resolve-15.0.1.tgz", + "integrity": "sha512-ReY88T7JhJjeRVbfCyNj+NXAG3IIsVMsX9b5/9jC98dRP8/yxlZdz7mHZbHk5zHr24wZZICS5AcXsFZAXYUQEg==", "dev": true, "requires": { - "@rollup/pluginutils": "^4.2.1", + "@rollup/pluginutils": "^5.0.1", "@types/resolve": "1.20.2", "deepmerge": "^4.2.2", "is-builtin-module": "^3.2.0", "is-module": "^1.0.0", "resolve": "^1.22.1" + }, + "dependencies": { + "@rollup/pluginutils": { + "version": "5.0.2", + "resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-5.0.2.tgz", + "integrity": "sha512-pTd9rIsP92h+B6wWwFbW8RkZv4hiR/xKsqre4SIuAOaOEQRxi0lqLke9k2/7WegC85GgUs9pjmOjCUi3In4vwA==", + "dev": true, + "requires": { + "@types/estree": "^1.0.0", + "estree-walker": "^2.0.2", + "picomatch": "^2.3.1" + } + } } }, "@rollup/plugin-replace": { - "version": "5.0.0", - "resolved": "https://registry.npmjs.org/@rollup/plugin-replace/-/plugin-replace-5.0.0.tgz", - "integrity": "sha512-TiPmjMuBjQM+KLWK16O5TAM/eW4yXBYyQ17FbfeNzBC1t2kzX2aXoa8AlS9XTSmg6/2TNvkER1lMEEeN4Lhavw==", + "version": "5.0.1", + "resolved": "https://registry.npmjs.org/@rollup/plugin-replace/-/plugin-replace-5.0.1.tgz", + "integrity": "sha512-Z3MfsJ4CK17BfGrZgvrcp/l6WXoKb0kokULO+zt/7bmcyayokDaQ2K3eDJcRLCTAlp5FPI4/gz9MHAsosz4Rag==", "dev": true, "requires": { - "@rollup/pluginutils": "^4.2.1", + "@rollup/pluginutils": "^5.0.1", "magic-string": "^0.26.4" + }, + "dependencies": { + "@rollup/pluginutils": { + "version": "5.0.2", + "resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-5.0.2.tgz", + "integrity": "sha512-pTd9rIsP92h+B6wWwFbW8RkZv4hiR/xKsqre4SIuAOaOEQRxi0lqLke9k2/7WegC85GgUs9pjmOjCUi3In4vwA==", + "dev": true, + "requires": { + "@types/estree": "^1.0.0", + "estree-walker": "^2.0.2", + "picomatch": "^2.3.1" + } + } } }, - "@rollup/pluginutils": { - "version": "4.2.1", - "resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-4.2.1.tgz", - "integrity": "sha512-iKnFXr7NkdZAIHiIWE+BX5ULi/ucVFYWD6TbAV+rZctiRTY2PL6tsIKhoIOaoskiWAkgu+VsbXgUVDNLHf+InQ==", + "@rollup/plugin-terser": { + "version": "0.2.0", + "resolved": "https://registry.npmjs.org/@rollup/plugin-terser/-/plugin-terser-0.2.0.tgz", + "integrity": "sha512-UBr4WNXBFipKW2C2db9JIzIdq9bFZsaTZwKeAd9Y0N9Pv9G2XgRhaimGdotx1+Wf/2XTuTJ+FVS2SO+y2WyiUQ==", "dev": true, "requires": { - "estree-walker": "^2.0.1", - "picomatch": "^2.2.2" + "serialize-javascript": "^6.0.0", + "smob": "^0.0.6", + "terser": "^5.15.1" } }, "@sideway/address": { @@ -42576,9 +42801,9 @@ "dev": true }, "@types/chai": { - "version": "4.3.1", - "resolved": "https://registry.npmjs.org/@types/chai/-/chai-4.3.1.tgz", - "integrity": "sha512-/zPMqDkzSZ8t3VtxOa4KPq7uzzW978M9Tvh+j7GHKuo6k6GTLxPJ4J5gE5cjfJ26pnXst0N5Hax8Sr0T2Mi9zQ==", + "version": "4.3.4", + "resolved": "https://registry.npmjs.org/@types/chai/-/chai-4.3.4.tgz", + "integrity": "sha512-KnRanxnpfpjUTqTCXslZSEdLfXExwgNxYPdiO2WGUj8+HDjFi8R3k5RVKPeSCzLjCcshCAtVO2QBbVuAV4kTnw==", "dev": true }, "@types/chai-subset": { @@ -42620,9 +42845,9 @@ } }, "@types/estree": { - "version": "0.0.39", - "resolved": "https://registry.npmjs.org/@types/estree/-/estree-0.0.39.tgz", - "integrity": "sha512-EYNwp3bU+98cpU4lAWYYL7Zz+2gryWH1qbdDTidVd6hkiR6weksdbMadyXKXNPEkQFhXM+hVO9ZygomHXp+AIw==", + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.0.tgz", + "integrity": "sha512-WulqXMDUTYAXCjZnk6JtIHPigp55cVtDgDrO2gHRwhyJto21+1zbVCtOYB2L1F9w4qCQ0rOGWBnBe0FNTiEJIQ==", "dev": true }, "@types/fs-extra": { @@ -43116,9 +43341,9 @@ "dev": true }, "@yarnpkg/parsers": { - "version": "3.0.0-rc.26", - "resolved": "https://registry.npmjs.org/@yarnpkg/parsers/-/parsers-3.0.0-rc.26.tgz", - "integrity": "sha512-F52Zryoi6uSHi43A/htykDD7l1707TQjHeAHTKxNWJBTwvrEKWYvuu1w8bzSHpFVc06ig2KyrpHPfmeiuOip8Q==", + "version": "3.0.0-rc.33", + "resolved": "https://registry.npmjs.org/@yarnpkg/parsers/-/parsers-3.0.0-rc.33.tgz", + "integrity": "sha512-az35wEPH00kW6eZDqHC0BumzAB4XD+YJb1b5tHEfsy73viCN7uGy8kvutwig5bgVwt1Hx7GuU09G50Sc5osBlA==", "dev": true, "requires": { "js-yaml": "^3.10.0", @@ -43180,9 +43405,9 @@ } }, "acorn": { - "version": "8.7.1", - "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.7.1.tgz", - "integrity": "sha512-Xx54uLJQZ19lKygFXOWsscKUbsBZW0CPykPhVQdhIeIwrbPmJzqeASDInc8nKBnp/JT6igTs82qPXz069H8I/A==", + "version": "8.8.1", + "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.8.1.tgz", + "integrity": "sha512-7zFpHzhnqYKrkYdUjF1HI1bzd0VygEGX8lFk4k5zVMqHEoES+P+7TKI+EvLO9WVMJ8eekdO0aDEK044xTXwPPA==", "dev": true }, "acorn-globals": { @@ -44508,9 +44733,9 @@ }, "dependencies": { "lru-cache": { - "version": "7.14.0", - "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-7.14.0.tgz", - "integrity": "sha512-EIRtP1GrSJny0dqb50QXRUNBxHJhcpxHC++M5tD7RYbvLLn5KVWKsbyswSSqDuU15UFi3bgTQIY8nhDMeF6aDQ==", + "version": "7.14.1", + "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-7.14.1.tgz", + "integrity": "sha512-ysxwsnTKdAx96aTRdhDOCQfDgbHnt8SK0KY8SEjO0wHinhWOFTESbjVCMPbU1uGXg/ch4lifqx0wfjOawU2+WA==", "dev": true }, "mkdirp": { @@ -46187,9 +46412,9 @@ "dev": true }, "decamelize-keys": { - "version": "1.1.0", - "resolved": "https://registry.npmjs.org/decamelize-keys/-/decamelize-keys-1.1.0.tgz", - "integrity": "sha512-ocLWuYzRPoS9bfiSdDd3cxvrzovVMZnRDVEzAs+hWIVXGDbHxWMECij2OBuyB/An0FFW/nLuq6Kv1i/YC5Qfzg==", + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/decamelize-keys/-/decamelize-keys-1.1.1.tgz", + "integrity": "sha512-WiPxgEirIV0/eIOMcnFBA3/IJZAZqKnwAwWyvvdi4lsr1WCN22nhdf/3db3DoZcUjTV2SqfzIwNyp6y2xs3nmg==", "dev": true, "requires": { "decamelize": "^1.1.0", @@ -47239,172 +47464,34 @@ "dev": true }, "esbuild": { - "version": "0.14.47", - "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.14.47.tgz", - "integrity": "sha512-wI4ZiIfFxpkuxB8ju4MHrGwGLyp1+awEHAHVpx6w7a+1pmYIq8T9FGEVVwFo0iFierDoMj++Xq69GXWYn2EiwA==", - "dev": true, - "requires": { - "esbuild-android-64": "0.14.47", - "esbuild-android-arm64": "0.14.47", - "esbuild-darwin-64": "0.14.47", - "esbuild-darwin-arm64": "0.14.47", - "esbuild-freebsd-64": "0.14.47", - "esbuild-freebsd-arm64": "0.14.47", - "esbuild-linux-32": "0.14.47", - "esbuild-linux-64": "0.14.47", - "esbuild-linux-arm": "0.14.47", - "esbuild-linux-arm64": "0.14.47", - "esbuild-linux-mips64le": "0.14.47", - "esbuild-linux-ppc64le": "0.14.47", - "esbuild-linux-riscv64": "0.14.47", - "esbuild-linux-s390x": "0.14.47", - "esbuild-netbsd-64": "0.14.47", - "esbuild-openbsd-64": "0.14.47", - "esbuild-sunos-64": "0.14.47", - "esbuild-windows-32": "0.14.47", - "esbuild-windows-64": "0.14.47", - "esbuild-windows-arm64": "0.14.47" - } - }, - "esbuild-android-64": { - "version": "0.14.47", - "resolved": "https://registry.npmjs.org/esbuild-android-64/-/esbuild-android-64-0.14.47.tgz", - "integrity": "sha512-R13Bd9+tqLVFndncMHssZrPWe6/0Kpv2/dt4aA69soX4PRxlzsVpCvoJeFE8sOEoeVEiBkI0myjlkDodXlHa0g==", - "dev": true, - "optional": true - }, - "esbuild-android-arm64": { - "version": "0.14.47", - "resolved": "https://registry.npmjs.org/esbuild-android-arm64/-/esbuild-android-arm64-0.14.47.tgz", - "integrity": "sha512-OkwOjj7ts4lBp/TL6hdd8HftIzOy/pdtbrNA4+0oVWgGG64HrdVzAF5gxtJufAPOsEjkyh1oIYvKAUinKKQRSQ==", - "dev": true, - "optional": true - }, - "esbuild-darwin-64": { - "version": "0.14.47", - "resolved": "https://registry.npmjs.org/esbuild-darwin-64/-/esbuild-darwin-64-0.14.47.tgz", - "integrity": "sha512-R6oaW0y5/u6Eccti/TS6c/2c1xYTb1izwK3gajJwi4vIfNs1s8B1dQzI1UiC9T61YovOQVuePDcfqHLT3mUZJA==", - "dev": true, - "optional": true - }, - "esbuild-darwin-arm64": { - "version": "0.14.47", - "resolved": "https://registry.npmjs.org/esbuild-darwin-arm64/-/esbuild-darwin-arm64-0.14.47.tgz", - "integrity": "sha512-seCmearlQyvdvM/noz1L9+qblC5vcBrhUaOoLEDDoLInF/VQ9IkobGiLlyTPYP5dW1YD4LXhtBgOyevoIHGGnw==", - "dev": true, - "optional": true - }, - "esbuild-freebsd-64": { - "version": "0.14.47", - "resolved": "https://registry.npmjs.org/esbuild-freebsd-64/-/esbuild-freebsd-64-0.14.47.tgz", - "integrity": "sha512-ZH8K2Q8/Ux5kXXvQMDsJcxvkIwut69KVrYQhza/ptkW50DC089bCVrJZZ3sKzIoOx+YPTrmsZvqeZERjyYrlvQ==", - "dev": true, - "optional": true - }, - "esbuild-freebsd-arm64": { - "version": "0.14.47", - "resolved": "https://registry.npmjs.org/esbuild-freebsd-arm64/-/esbuild-freebsd-arm64-0.14.47.tgz", - "integrity": "sha512-ZJMQAJQsIOhn3XTm7MPQfCzEu5b9STNC+s90zMWe2afy9EwnHV7Ov7ohEMv2lyWlc2pjqLW8QJnz2r0KZmeAEQ==", - "dev": true, - "optional": true - }, - "esbuild-linux-32": { - "version": "0.14.47", - "resolved": "https://registry.npmjs.org/esbuild-linux-32/-/esbuild-linux-32-0.14.47.tgz", - "integrity": "sha512-FxZOCKoEDPRYvq300lsWCTv1kcHgiiZfNrPtEhFAiqD7QZaXrad8LxyJ8fXGcWzIFzRiYZVtB3ttvITBvAFhKw==", - "dev": true, - "optional": true - }, - "esbuild-linux-64": { - "version": "0.14.47", - "resolved": "https://registry.npmjs.org/esbuild-linux-64/-/esbuild-linux-64-0.14.47.tgz", - "integrity": "sha512-nFNOk9vWVfvWYF9YNYksZptgQAdstnDCMtR6m42l5Wfugbzu11VpMCY9XrD4yFxvPo9zmzcoUL/88y0lfJZJJw==", - "dev": true, - "optional": true - }, - "esbuild-linux-arm": { - "version": "0.14.47", - "resolved": "https://registry.npmjs.org/esbuild-linux-arm/-/esbuild-linux-arm-0.14.47.tgz", - "integrity": "sha512-ZGE1Bqg/gPRXrBpgpvH81tQHpiaGxa8c9Rx/XOylkIl2ypLuOcawXEAo8ls+5DFCcRGt/o3sV+PzpAFZobOsmA==", - "dev": true, - "optional": true - }, - "esbuild-linux-arm64": { - "version": "0.14.47", - "resolved": "https://registry.npmjs.org/esbuild-linux-arm64/-/esbuild-linux-arm64-0.14.47.tgz", - "integrity": "sha512-ywfme6HVrhWcevzmsufjd4iT3PxTfCX9HOdxA7Hd+/ZM23Y9nXeb+vG6AyA6jgq/JovkcqRHcL9XwRNpWG6XRw==", - "dev": true, - "optional": true - }, - "esbuild-linux-mips64le": { - "version": "0.14.47", - "resolved": "https://registry.npmjs.org/esbuild-linux-mips64le/-/esbuild-linux-mips64le-0.14.47.tgz", - "integrity": "sha512-mg3D8YndZ1LvUiEdDYR3OsmeyAew4MA/dvaEJxvyygahWmpv1SlEEnhEZlhPokjsUMfRagzsEF/d/2XF+kTQGg==", - "dev": true, - "optional": true - }, - "esbuild-linux-ppc64le": { - "version": "0.14.47", - "resolved": "https://registry.npmjs.org/esbuild-linux-ppc64le/-/esbuild-linux-ppc64le-0.14.47.tgz", - "integrity": "sha512-WER+f3+szmnZiWoK6AsrTKGoJoErG2LlauSmk73LEZFQ/iWC+KhhDsOkn1xBUpzXWsxN9THmQFltLoaFEH8F8w==", - "dev": true, - "optional": true - }, - "esbuild-linux-riscv64": { - "version": "0.14.47", - "resolved": "https://registry.npmjs.org/esbuild-linux-riscv64/-/esbuild-linux-riscv64-0.14.47.tgz", - "integrity": "sha512-1fI6bP3A3rvI9BsaaXbMoaOjLE3lVkJtLxsgLHqlBhLlBVY7UqffWBvkrX/9zfPhhVMd9ZRFiaqXnB1T7BsL2g==", - "dev": true, - "optional": true - }, - "esbuild-linux-s390x": { - "version": "0.14.47", - "resolved": "https://registry.npmjs.org/esbuild-linux-s390x/-/esbuild-linux-s390x-0.14.47.tgz", - "integrity": "sha512-eZrWzy0xFAhki1CWRGnhsHVz7IlSKX6yT2tj2Eg8lhAwlRE5E96Hsb0M1mPSE1dHGpt1QVwwVivXIAacF/G6mw==", - "dev": true, - "optional": true - }, - "esbuild-netbsd-64": { - "version": "0.14.47", - "resolved": "https://registry.npmjs.org/esbuild-netbsd-64/-/esbuild-netbsd-64-0.14.47.tgz", - "integrity": "sha512-Qjdjr+KQQVH5Q2Q1r6HBYswFTToPpss3gqCiSw2Fpq/ua8+eXSQyAMG+UvULPqXceOwpnPo4smyZyHdlkcPppQ==", - "dev": true, - "optional": true - }, - "esbuild-openbsd-64": { - "version": "0.14.47", - "resolved": "https://registry.npmjs.org/esbuild-openbsd-64/-/esbuild-openbsd-64-0.14.47.tgz", - "integrity": "sha512-QpgN8ofL7B9z8g5zZqJE+eFvD1LehRlxr25PBkjyyasakm4599iroUpaj96rdqRlO2ShuyqwJdr+oNqWwTUmQw==", - "dev": true, - "optional": true - }, - "esbuild-sunos-64": { - "version": "0.14.47", - "resolved": "https://registry.npmjs.org/esbuild-sunos-64/-/esbuild-sunos-64-0.14.47.tgz", - "integrity": "sha512-uOeSgLUwukLioAJOiGYm3kNl+1wJjgJA8R671GYgcPgCx7QR73zfvYqXFFcIO93/nBdIbt5hd8RItqbbf3HtAQ==", - "dev": true, - "optional": true - }, - "esbuild-windows-32": { - "version": "0.14.47", - "resolved": "https://registry.npmjs.org/esbuild-windows-32/-/esbuild-windows-32-0.14.47.tgz", - "integrity": "sha512-H0fWsLTp2WBfKLBgwYT4OTfFly4Im/8B5f3ojDv1Kx//kiubVY0IQunP2Koc/fr/0wI7hj3IiBDbSrmKlrNgLQ==", - "dev": true, - "optional": true - }, - "esbuild-windows-64": { - "version": "0.14.47", - "resolved": "https://registry.npmjs.org/esbuild-windows-64/-/esbuild-windows-64-0.14.47.tgz", - "integrity": "sha512-/Pk5jIEH34T68r8PweKRi77W49KwanZ8X6lr3vDAtOlH5EumPE4pBHqkCUdELanvsT14yMXLQ/C/8XPi1pAtkQ==", - "dev": true, - "optional": true - }, - "esbuild-windows-arm64": { - "version": "0.14.47", - "resolved": "https://registry.npmjs.org/esbuild-windows-arm64/-/esbuild-windows-arm64-0.14.47.tgz", - "integrity": "sha512-HFSW2lnp62fl86/qPQlqw6asIwCnEsEoNIL1h2uVMgakddf+vUuMcCbtUY1i8sst7KkgHrVKCJQB33YhhOweCQ==", - "dev": true, - "optional": true + "version": "0.16.4", + "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.16.4.tgz", + "integrity": "sha512-qQrPMQpPTWf8jHugLWHoGqZjApyx3OEm76dlTXobHwh/EBbavbRdjXdYi/GWr43GyN0sfpap14GPkb05NH3ROA==", + "dev": true, + "requires": { + "@esbuild/android-arm": "0.16.4", + "@esbuild/android-arm64": "0.16.4", + "@esbuild/android-x64": "0.16.4", + "@esbuild/darwin-arm64": "0.16.4", + "@esbuild/darwin-x64": "0.16.4", + "@esbuild/freebsd-arm64": "0.16.4", + "@esbuild/freebsd-x64": "0.16.4", + "@esbuild/linux-arm": "0.16.4", + "@esbuild/linux-arm64": "0.16.4", + "@esbuild/linux-ia32": "0.16.4", + "@esbuild/linux-loong64": "0.16.4", + "@esbuild/linux-mips64el": "0.16.4", + "@esbuild/linux-ppc64": "0.16.4", + "@esbuild/linux-riscv64": "0.16.4", + "@esbuild/linux-s390x": "0.16.4", + "@esbuild/linux-x64": "0.16.4", + "@esbuild/netbsd-x64": "0.16.4", + "@esbuild/openbsd-x64": "0.16.4", + "@esbuild/sunos-x64": "0.16.4", + "@esbuild/win32-arm64": "0.16.4", + "@esbuild/win32-ia32": "0.16.4", + "@esbuild/win32-x64": "0.16.4" + } }, "escalade": { "version": "3.1.1", @@ -48421,9 +48508,9 @@ } }, "minimatch": { - "version": "5.1.0", - "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-5.1.0.tgz", - "integrity": "sha512-9TPBGGak4nHfGZsPBohm9AWg6NoT7QTCehS3BIJABslyZbzxfV78QM2Y6+i741OPZIafFAaiiEMh5OyIrJPgtg==", + "version": "5.1.1", + "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-5.1.1.tgz", + "integrity": "sha512-362NP+zlprccbEt/SkxKfRMHnNY85V74mVnpUpNyr3F35covl09Kec7/sEFLt3RA4oXmewtoaanoIf67SE5Y5g==", "dev": true, "requires": { "brace-expansion": "^2.0.1" @@ -49878,9 +49965,9 @@ } }, "minimatch": { - "version": "5.1.0", - "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-5.1.0.tgz", - "integrity": "sha512-9TPBGGak4nHfGZsPBohm9AWg6NoT7QTCehS3BIJABslyZbzxfV78QM2Y6+i741OPZIafFAaiiEMh5OyIrJPgtg==", + "version": "5.1.1", + "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-5.1.1.tgz", + "integrity": "sha512-362NP+zlprccbEt/SkxKfRMHnNY85V74mVnpUpNyr3F35covl09Kec7/sEFLt3RA4oXmewtoaanoIf67SE5Y5g==", "dev": true, "requires": { "brace-expansion": "^2.0.1" @@ -50032,18 +50119,18 @@ }, "dependencies": { "hosted-git-info": { - "version": "5.1.0", - "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-5.1.0.tgz", - "integrity": "sha512-Ek+QmMEqZF8XrbFdwoDjSbm7rT23pCgEMOJmz6GPk/s4yH//RQfNPArhIxbguNxROq/+5lNBwCDHMhA903Kx1Q==", + "version": "5.2.1", + "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-5.2.1.tgz", + "integrity": "sha512-xIcQYMnhcx2Nr4JTjsFmwwnr9vldugPy9uVm0o87bjqqWMv9GaqsTeT+i99wTl0mk1uLxJtHxLb8kymqTENQsw==", "dev": true, "requires": { "lru-cache": "^7.5.1" }, "dependencies": { "lru-cache": { - "version": "7.14.0", - "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-7.14.0.tgz", - "integrity": "sha512-EIRtP1GrSJny0dqb50QXRUNBxHJhcpxHC++M5tD7RYbvLLn5KVWKsbyswSSqDuU15UFi3bgTQIY8nhDMeF6aDQ==", + "version": "7.14.1", + "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-7.14.1.tgz", + "integrity": "sha512-ysxwsnTKdAx96aTRdhDOCQfDgbHnt8SK0KY8SEjO0wHinhWOFTESbjVCMPbU1uGXg/ch4lifqx0wfjOawU2+WA==", "dev": true } } @@ -50078,9 +50165,9 @@ "dev": true }, "inquirer": { - "version": "8.2.4", - "resolved": "https://registry.npmjs.org/inquirer/-/inquirer-8.2.4.tgz", - "integrity": "sha512-nn4F01dxU8VeKfq192IjLsxu0/OmMZ4Lg3xKAns148rCaXP6ntAoEkVYZThWjwON8AlzdZZi6oqnhNbxUG9hVg==", + "version": "8.2.5", + "resolved": "https://registry.npmjs.org/inquirer/-/inquirer-8.2.5.tgz", + "integrity": "sha512-QAgPDQMEgrDssk1XiwwHoOGYF9BAbUcc1+j+FhEvaOt8/cKRqyLn0U5qA6F74fGhTMGxf92pOvPBeh29jQJDTQ==", "dev": true, "requires": { "ansi-escapes": "^4.2.1", @@ -50450,15 +50537,6 @@ "optional": true, "peer": true }, - "is-reference": { - "version": "1.2.1", - "resolved": "https://registry.npmjs.org/is-reference/-/is-reference-1.2.1.tgz", - "integrity": "sha512-U82MsXXiFIrjCK4otLT+o2NA2Cd2g5MLoOVXUZjIOhLurrRxpEXzI8O0KZHr3IjLvlAH1kTPYSuqer5T9ZVBKQ==", - "dev": true, - "requires": { - "@types/estree": "*" - } - }, "is-regex": { "version": "1.1.4", "resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.1.4.tgz", @@ -50873,15 +50951,15 @@ "dev": true }, "just-diff": { - "version": "5.1.1", - "resolved": "https://registry.npmjs.org/just-diff/-/just-diff-5.1.1.tgz", - "integrity": "sha512-u8HXJ3HlNrTzY7zrYYKjNEfBlyjqhdBkoyTVdjtn7p02RJD5NvR8rIClzeGA7t+UYP1/7eAkWNLU0+P3QrEqKQ==", + "version": "5.2.0", + "resolved": "https://registry.npmjs.org/just-diff/-/just-diff-5.2.0.tgz", + "integrity": "sha512-6ufhP9SHjb7jibNFrNxyFZ6od3g+An6Ai9mhGRvcYe8UJlH0prseN64M+6ZBBUoKYHZsitDP42gAJ8+eVWr3lw==", "dev": true }, "just-diff-apply": { - "version": "5.4.1", - "resolved": "https://registry.npmjs.org/just-diff-apply/-/just-diff-apply-5.4.1.tgz", - "integrity": "sha512-AAV5Jw7tsniWwih8Ly3fXxEZ06y+6p5TwQMsw0dzZ/wPKilzyDgdAnL0Ug4NNIquPUOh1vfFWEHbmXUqM5+o8g==", + "version": "5.5.0", + "resolved": "https://registry.npmjs.org/just-diff-apply/-/just-diff-apply-5.5.0.tgz", + "integrity": "sha512-OYTthRfSh55WOItVqwpefPtNt2VdKsq5AnAK6apdtR6yCH8pr0CmSr710J0Mf+WdQy7K/OzMy7K2MgAfdQURDw==", "dev": true }, "jwa": { @@ -51045,18 +51123,18 @@ }, "dependencies": { "hosted-git-info": { - "version": "5.1.0", - "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-5.1.0.tgz", - "integrity": "sha512-Ek+QmMEqZF8XrbFdwoDjSbm7rT23pCgEMOJmz6GPk/s4yH//RQfNPArhIxbguNxROq/+5lNBwCDHMhA903Kx1Q==", + "version": "5.2.1", + "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-5.2.1.tgz", + "integrity": "sha512-xIcQYMnhcx2Nr4JTjsFmwwnr9vldugPy9uVm0o87bjqqWMv9GaqsTeT+i99wTl0mk1uLxJtHxLb8kymqTENQsw==", "dev": true, "requires": { "lru-cache": "^7.5.1" }, "dependencies": { "lru-cache": { - "version": "7.14.0", - "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-7.14.0.tgz", - "integrity": "sha512-EIRtP1GrSJny0dqb50QXRUNBxHJhcpxHC++M5tD7RYbvLLn5KVWKsbyswSSqDuU15UFi3bgTQIY8nhDMeF6aDQ==", + "version": "7.14.1", + "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-7.14.1.tgz", + "integrity": "sha512-ysxwsnTKdAx96aTRdhDOCQfDgbHnt8SK0KY8SEjO0wHinhWOFTESbjVCMPbU1uGXg/ch4lifqx0wfjOawU2+WA==", "dev": true } } @@ -51098,18 +51176,18 @@ }, "dependencies": { "hosted-git-info": { - "version": "5.1.0", - "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-5.1.0.tgz", - "integrity": "sha512-Ek+QmMEqZF8XrbFdwoDjSbm7rT23pCgEMOJmz6GPk/s4yH//RQfNPArhIxbguNxROq/+5lNBwCDHMhA903Kx1Q==", + "version": "5.2.1", + "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-5.2.1.tgz", + "integrity": "sha512-xIcQYMnhcx2Nr4JTjsFmwwnr9vldugPy9uVm0o87bjqqWMv9GaqsTeT+i99wTl0mk1uLxJtHxLb8kymqTENQsw==", "dev": true, "requires": { "lru-cache": "^7.5.1" }, "dependencies": { "lru-cache": { - "version": "7.14.0", - "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-7.14.0.tgz", - "integrity": "sha512-EIRtP1GrSJny0dqb50QXRUNBxHJhcpxHC++M5tD7RYbvLLn5KVWKsbyswSSqDuU15UFi3bgTQIY8nhDMeF6aDQ==", + "version": "7.14.1", + "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-7.14.1.tgz", + "integrity": "sha512-ysxwsnTKdAx96aTRdhDOCQfDgbHnt8SK0KY8SEjO0wHinhWOFTESbjVCMPbU1uGXg/ch4lifqx0wfjOawU2+WA==", "dev": true } } @@ -51229,9 +51307,9 @@ } }, "local-pkg": { - "version": "0.4.1", - "resolved": "https://registry.npmjs.org/local-pkg/-/local-pkg-0.4.1.tgz", - "integrity": "sha512-lL87ytIGP2FU5PWwNDo0w3WhIo2gopIAxPg9RxDYF7m4rr5ahuZxP22xnJHIvaLTe4Z9P6uKKY2UHiwyB4pcrw==", + "version": "0.4.2", + "resolved": "https://registry.npmjs.org/local-pkg/-/local-pkg-0.4.2.tgz", + "integrity": "sha512-mlERgSPrbxU3BP4qBqAvvwlgW4MTg78iwJdGGnv7kibKjWcJksrG3t6LB5lXI93wXRDvG4NpUgJFmTG4T6rdrg==", "dev": true }, "locate-path": { @@ -51486,9 +51564,9 @@ } }, "lru-cache": { - "version": "7.14.0", - "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-7.14.0.tgz", - "integrity": "sha512-EIRtP1GrSJny0dqb50QXRUNBxHJhcpxHC++M5tD7RYbvLLn5KVWKsbyswSSqDuU15UFi3bgTQIY8nhDMeF6aDQ==", + "version": "7.14.1", + "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-7.14.1.tgz", + "integrity": "sha512-ysxwsnTKdAx96aTRdhDOCQfDgbHnt8SK0KY8SEjO0wHinhWOFTESbjVCMPbU1uGXg/ch4lifqx0wfjOawU2+WA==", "dev": true } } @@ -52674,18 +52752,18 @@ }, "dependencies": { "hosted-git-info": { - "version": "5.1.0", - "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-5.1.0.tgz", - "integrity": "sha512-Ek+QmMEqZF8XrbFdwoDjSbm7rT23pCgEMOJmz6GPk/s4yH//RQfNPArhIxbguNxROq/+5lNBwCDHMhA903Kx1Q==", + "version": "5.2.1", + "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-5.2.1.tgz", + "integrity": "sha512-xIcQYMnhcx2Nr4JTjsFmwwnr9vldugPy9uVm0o87bjqqWMv9GaqsTeT+i99wTl0mk1uLxJtHxLb8kymqTENQsw==", "dev": true, "requires": { "lru-cache": "^7.5.1" }, "dependencies": { "lru-cache": { - "version": "7.14.0", - "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-7.14.0.tgz", - "integrity": "sha512-EIRtP1GrSJny0dqb50QXRUNBxHJhcpxHC++M5tD7RYbvLLn5KVWKsbyswSSqDuU15UFi3bgTQIY8nhDMeF6aDQ==", + "version": "7.14.1", + "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-7.14.1.tgz", + "integrity": "sha512-ysxwsnTKdAx96aTRdhDOCQfDgbHnt8SK0KY8SEjO0wHinhWOFTESbjVCMPbU1uGXg/ch4lifqx0wfjOawU2+WA==", "dev": true } } @@ -52735,18 +52813,18 @@ }, "dependencies": { "hosted-git-info": { - "version": "5.1.0", - "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-5.1.0.tgz", - "integrity": "sha512-Ek+QmMEqZF8XrbFdwoDjSbm7rT23pCgEMOJmz6GPk/s4yH//RQfNPArhIxbguNxROq/+5lNBwCDHMhA903Kx1Q==", + "version": "5.2.1", + "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-5.2.1.tgz", + "integrity": "sha512-xIcQYMnhcx2Nr4JTjsFmwwnr9vldugPy9uVm0o87bjqqWMv9GaqsTeT+i99wTl0mk1uLxJtHxLb8kymqTENQsw==", "dev": true, "requires": { "lru-cache": "^7.5.1" }, "dependencies": { "lru-cache": { - "version": "7.14.0", - "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-7.14.0.tgz", - "integrity": "sha512-EIRtP1GrSJny0dqb50QXRUNBxHJhcpxHC++M5tD7RYbvLLn5KVWKsbyswSSqDuU15UFi3bgTQIY8nhDMeF6aDQ==", + "version": "7.14.1", + "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-7.14.1.tgz", + "integrity": "sha512-ysxwsnTKdAx96aTRdhDOCQfDgbHnt8SK0KY8SEjO0wHinhWOFTESbjVCMPbU1uGXg/ch4lifqx0wfjOawU2+WA==", "dev": true } } @@ -52827,13 +52905,13 @@ "peer": true }, "nx": { - "version": "15.0.0", - "resolved": "https://registry.npmjs.org/nx/-/nx-15.0.0.tgz", - "integrity": "sha512-uh9Ou5oj7yr6Uyp4QhqW1vIVoanYn1sJM1jzOyoT17GAhhODfS0BtQgUvlmInDuRqP8LMaPg4LXFMby07U1HXg==", + "version": "15.3.3", + "resolved": "https://registry.npmjs.org/nx/-/nx-15.3.3.tgz", + "integrity": "sha512-yR102AlVW5Sb7X1e9cyR+0h44RD6c3eLJbAZ0yVFKPCKw+zQTdGvAqITtB6ZeFnPkg6Qq6f1oWu6G0n6f2cTpw==", "dev": true, "requires": { - "@nrwl/cli": "15.0.0", - "@nrwl/tao": "15.0.0", + "@nrwl/cli": "15.3.3", + "@nrwl/tao": "15.3.3", "@parcel/watcher": "2.0.4", "@yarnpkg/lockfile": "^1.1.0", "@yarnpkg/parsers": "^3.0.0-rc.18", @@ -52865,14 +52943,14 @@ "tsconfig-paths": "^3.9.0", "tslib": "^2.3.0", "v8-compile-cache": "2.3.0", - "yargs": "^17.4.0", - "yargs-parser": "21.0.1" + "yargs": "^17.6.2", + "yargs-parser": "21.1.1" }, "dependencies": { "axios": { - "version": "1.1.3", - "resolved": "https://registry.npmjs.org/axios/-/axios-1.1.3.tgz", - "integrity": "sha512-00tXVRwKx/FZr/IDVFt4C+f9FYairX517WoGCL6dpOntqLkZofjhu43F/Xl44UOpqa+9sLFDrG/XAnFsUYgkDA==", + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/axios/-/axios-1.2.1.tgz", + "integrity": "sha512-I88cFiGu9ryt/tfVEi4kX2SITsvDddTajXTOFmt2uK1ZVA8LytjtdeyefdQWEf5PU8w+4SSJDoYnggflB5tW4A==", "dev": true, "requires": { "follow-redirects": "^1.15.0", @@ -52991,9 +53069,9 @@ } }, "yargs": { - "version": "17.6.0", - "resolved": "https://registry.npmjs.org/yargs/-/yargs-17.6.0.tgz", - "integrity": "sha512-8H/wTDqlSwoSnScvV2N/JHfLWOKuh5MVla9hqLjK3nsfyy6Y4kDSYSvkU5YCUEPOSnRXfIyx3Sq+B/IWudTo4g==", + "version": "17.6.2", + "resolved": "https://registry.npmjs.org/yargs/-/yargs-17.6.2.tgz", + "integrity": "sha512-1/9UrdHjDZc0eOU0HxOHoS78C69UD3JRMvzlJ7S79S2nTaWRA/whGCTV8o9e/N/1Va9YIV7Q4sOxD8VV4pCWOw==", "dev": true, "requires": { "cliui": "^8.0.1", @@ -53002,7 +53080,7 @@ "require-directory": "^2.1.1", "string-width": "^4.2.3", "y18n": "^5.0.5", - "yargs-parser": "^21.0.0" + "yargs-parser": "^21.1.1" }, "dependencies": { "cliui": { @@ -53019,9 +53097,9 @@ } }, "yargs-parser": { - "version": "21.0.1", - "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-21.0.1.tgz", - "integrity": "sha512-9BK1jFpLzJROCI5TzwZL/TU4gqjK5xiHV/RfWLOahrjAko/e4DJkRDZQXfvqAsiZzzYhgAzbgz6lg48jcm4GLg==", + "version": "21.1.1", + "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-21.1.1.tgz", + "integrity": "sha512-tVpsJW7DdjecAiFpbIB1e3qxIQsE6NoPc5/eTdrbbIC4h0LVsWhnoa3g+m2HclBIujHzsxZ4VJVA+GUuc2/LBw==", "dev": true } } @@ -53479,18 +53557,18 @@ }, "dependencies": { "hosted-git-info": { - "version": "5.1.0", - "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-5.1.0.tgz", - "integrity": "sha512-Ek+QmMEqZF8XrbFdwoDjSbm7rT23pCgEMOJmz6GPk/s4yH//RQfNPArhIxbguNxROq/+5lNBwCDHMhA903Kx1Q==", + "version": "5.2.1", + "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-5.2.1.tgz", + "integrity": "sha512-xIcQYMnhcx2Nr4JTjsFmwwnr9vldugPy9uVm0o87bjqqWMv9GaqsTeT+i99wTl0mk1uLxJtHxLb8kymqTENQsw==", "dev": true, "requires": { "lru-cache": "^7.5.1" }, "dependencies": { "lru-cache": { - "version": "7.14.0", - "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-7.14.0.tgz", - "integrity": "sha512-EIRtP1GrSJny0dqb50QXRUNBxHJhcpxHC++M5tD7RYbvLLn5KVWKsbyswSSqDuU15UFi3bgTQIY8nhDMeF6aDQ==", + "version": "7.14.1", + "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-7.14.1.tgz", + "integrity": "sha512-ysxwsnTKdAx96aTRdhDOCQfDgbHnt8SK0KY8SEjO0wHinhWOFTESbjVCMPbU1uGXg/ch4lifqx0wfjOawU2+WA==", "dev": true } } @@ -53916,9 +53994,9 @@ "dev": true }, "postcss": { - "version": "8.4.14", - "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.14.tgz", - "integrity": "sha512-E398TUmfAYFPBSdzgeieK2Y1+1cpdxJx8yXbK/m57nRhKSmk1GB2tO4lbLBtlkfPQTDKfe4Xqv1ASWPpayPEig==", + "version": "8.4.19", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.19.tgz", + "integrity": "sha512-h+pbPsyhlYj6N2ozBmHhHrs9DzGmbaarbLvWipMRO7RLS+v4onj26MPFXA5OBYFxyqYhUJK456SwDcY9H2/zsA==", "dev": true, "requires": { "nanoid": "^3.3.4", @@ -54499,18 +54577,18 @@ }, "dependencies": { "hosted-git-info": { - "version": "5.1.0", - "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-5.1.0.tgz", - "integrity": "sha512-Ek+QmMEqZF8XrbFdwoDjSbm7rT23pCgEMOJmz6GPk/s4yH//RQfNPArhIxbguNxROq/+5lNBwCDHMhA903Kx1Q==", + "version": "5.2.1", + "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-5.2.1.tgz", + "integrity": "sha512-xIcQYMnhcx2Nr4JTjsFmwwnr9vldugPy9uVm0o87bjqqWMv9GaqsTeT+i99wTl0mk1uLxJtHxLb8kymqTENQsw==", "dev": true, "requires": { "lru-cache": "^7.5.1" }, "dependencies": { "lru-cache": { - "version": "7.14.0", - "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-7.14.0.tgz", - "integrity": "sha512-EIRtP1GrSJny0dqb50QXRUNBxHJhcpxHC++M5tD7RYbvLLn5KVWKsbyswSSqDuU15UFi3bgTQIY8nhDMeF6aDQ==", + "version": "7.14.1", + "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-7.14.1.tgz", + "integrity": "sha512-ysxwsnTKdAx96aTRdhDOCQfDgbHnt8SK0KY8SEjO0wHinhWOFTESbjVCMPbU1uGXg/ch4lifqx0wfjOawU2+WA==", "dev": true } } @@ -55176,9 +55254,9 @@ } }, "rollup": { - "version": "2.79.1", - "resolved": "https://registry.npmjs.org/rollup/-/rollup-2.79.1.tgz", - "integrity": "sha512-uKxbd0IhMZOhjAiD5oAFp7BqvkA4Dv47qpOCtaNvng4HBwdbWtdOh8f5nZNuk2rp51PMGk3bzfWu5oayNEuYnw==", + "version": "3.7.0", + "resolved": "https://registry.npmjs.org/rollup/-/rollup-3.7.0.tgz", + "integrity": "sha512-FIJe0msW9P7L9BTfvaJyvn1U1BVCNTL3w8O+PKIrCyiMLg+rIUGb4MbcgVZ10Lnm1uWXOTOWRNARjfXC1+M12Q==", "dev": true, "requires": { "fsevents": "~2.3.2" @@ -55262,48 +55340,14 @@ } }, "rollup-plugin-scss": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/rollup-plugin-scss/-/rollup-plugin-scss-3.0.0.tgz", - "integrity": "sha512-UldNaNHEon2a5IusHvj/Nnwc7q13YDvbFxz5pfNbHBNStxGoUNyM+0XwAA/UafJ1u8XRPGdBMrhWFthrrGZdWQ==", + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/rollup-plugin-scss/-/rollup-plugin-scss-4.0.0.tgz", + "integrity": "sha512-wxasNXDYC2m+fDxCMgK00WebVWYmeFvShyNABmjvSJZ6D1/SepwqFeaMFMQromveI79gfvb64yJjiZZxSZxEIA==", "dev": true, "requires": { "rollup-pluginutils": "^2.3.3" } }, - "rollup-plugin-terser": { - "version": "7.0.2", - "resolved": "https://registry.npmjs.org/rollup-plugin-terser/-/rollup-plugin-terser-7.0.2.tgz", - "integrity": "sha512-w3iIaU4OxcF52UUXiZNsNeuXIMDvFrr+ZXK6bFZ0Q60qyVfq4uLptoS4bbq3paG3x216eQllFZX7zt6TIImguQ==", - "dev": true, - "requires": { - "@babel/code-frame": "^7.10.4", - "jest-worker": "^26.2.1", - "serialize-javascript": "^4.0.0", - "terser": "^5.0.0" - }, - "dependencies": { - "jest-worker": { - "version": "26.6.2", - "resolved": "https://registry.npmjs.org/jest-worker/-/jest-worker-26.6.2.tgz", - "integrity": "sha512-KWYVV1c4i+jbMpaBC+U++4Va0cp8OisU185o73T1vo99hqi7w8tSJfUXYswwqqrjzwxa6KpRK54WhPvwf5w6PQ==", - "dev": true, - "requires": { - "@types/node": "*", - "merge-stream": "^2.0.0", - "supports-color": "^7.0.0" - } - }, - "serialize-javascript": { - "version": "4.0.0", - "resolved": "https://registry.npmjs.org/serialize-javascript/-/serialize-javascript-4.0.0.tgz", - "integrity": "sha512-GaNA54380uFefWghODBWEGisLZFj00nS5ACs6yHa9nLqlLpVLO8ChDGeKRjZnV4Nh4n0Qi7nhYZD/9fCPzEqkw==", - "dev": true, - "requires": { - "randombytes": "^2.1.0" - } - } - } - }, "rollup-pluginutils": { "version": "2.8.2", "resolved": "https://registry.npmjs.org/rollup-pluginutils/-/rollup-pluginutils-2.8.2.tgz", @@ -55672,6 +55716,12 @@ "integrity": "sha512-94hK0Hh8rPqQl2xXc3HsaBoOXKV20MToPkcXvwbISWLEs+64sBq5kFgn2kJDHb1Pry9yrP0dxrCI9RRci7RXKg==", "dev": true }, + "smob": { + "version": "0.0.6", + "resolved": "https://registry.npmjs.org/smob/-/smob-0.0.6.tgz", + "integrity": "sha512-V21+XeNni+tTyiST1MHsa84AQhT1aFZipzPpOFAVB8DkHzwJyjjAmt9bgwnuZiZWnIbMo2duE29wybxv/7HWUw==", + "dev": true + }, "snapdragon": { "version": "0.8.2", "resolved": "https://registry.npmjs.org/snapdragon/-/snapdragon-0.8.2.tgz", @@ -56386,6 +56436,15 @@ "integrity": "sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==", "dev": true }, + "strip-literal": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/strip-literal/-/strip-literal-1.0.0.tgz", + "integrity": "sha512-5o4LsH1lzBzO9UFH63AJ2ad2/S2AVx6NtjOcaz+VTT2h1RiRvbipW72z8M/lxEhcPHDBQwpDrnTF7sXy/7OwCQ==", + "dev": true, + "requires": { + "acorn": "^8.8.1" + } + }, "strong-log-transformer": { "version": "2.1.0", "resolved": "https://registry.npmjs.org/strong-log-transformer/-/strong-log-transformer-2.1.0.tgz", @@ -56565,9 +56624,9 @@ "dev": true }, "terser": { - "version": "5.14.0", - "resolved": "https://registry.npmjs.org/terser/-/terser-5.14.0.tgz", - "integrity": "sha512-JC6qfIEkPBd9j1SMO3Pfn+A6w2kQV54tv+ABQLgZr7dA3k/DL/OBoYSWxzVpZev3J+bUHXfr55L8Mox7AaNo6g==", + "version": "5.16.1", + "resolved": "https://registry.npmjs.org/terser/-/terser-5.16.1.tgz", + "integrity": "sha512-xvQfyfA1ayT0qdK47zskQgRZeWLoOQ8JQ6mIgRGVNwZKdQMU+5FkCBjmv4QjcrTzyZquRw2FVtlJSRUmMKQslw==", "dev": true, "requires": { "@jridgewell/source-map": "^0.3.2", @@ -57546,16 +57605,22 @@ "setimmediate": "^1.0.4" } }, + "tinybench": { + "version": "2.3.1", + "resolved": "https://registry.npmjs.org/tinybench/-/tinybench-2.3.1.tgz", + "integrity": "sha512-hGYWYBMPr7p4g5IarQE7XhlyWveh1EKhy4wUBS1LrHXCKYgvz+4/jCqgmJqZxxldesn05vccrtME2RLLZNW7iA==", + "dev": true + }, "tinypool": { - "version": "0.2.1", - "resolved": "https://registry.npmjs.org/tinypool/-/tinypool-0.2.1.tgz", - "integrity": "sha512-HFU5ZYVq3wBfhSaf8qdqGsneaqXm0FgJQpoUlJbVdHpRLzm77IneKAD3RjzJWZvIv0YpPB9S7LUW53f6BE6ZSg==", + "version": "0.3.0", + "resolved": "https://registry.npmjs.org/tinypool/-/tinypool-0.3.0.tgz", + "integrity": "sha512-NX5KeqHOBZU6Bc0xj9Vr5Szbb1j8tUHIeD18s41aDJaPeC5QTdEhK0SpdpUrZlj2nv5cctNcSjaKNanXlfcVEQ==", "dev": true }, "tinyspy": { - "version": "0.3.3", - "resolved": "https://registry.npmjs.org/tinyspy/-/tinyspy-0.3.3.tgz", - "integrity": "sha512-gRiUR8fuhUf0W9lzojPf1N1euJYA30ISebSfgca8z76FOvXtVXqd5ojEIaKLWbDQhAaC3ibxZIjqbyi4ybjcTw==", + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/tinyspy/-/tinyspy-1.0.2.tgz", + "integrity": "sha512-bSGlgwLBYf7PnUsQ6WOc6SJ3pGOcd+d8AA6EUnLDDM0kWEstC1JIlSZA3UNliDXhd9ABoS7hiRBDCu+XP/sf1Q==", "dev": true }, "tmp": { @@ -58347,35 +58412,46 @@ } }, "vite": { - "version": "2.9.13", - "resolved": "https://registry.npmjs.org/vite/-/vite-2.9.13.tgz", - "integrity": "sha512-AsOBAaT0AD7Mhe8DuK+/kE4aWYFMx/i0ZNi98hJclxb4e0OhQcZYUrvLjIaQ8e59Ui7txcvKMiJC1yftqpQoDw==", + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/vite/-/vite-4.0.0.tgz", + "integrity": "sha512-ynad+4kYs8Jcnn8J7SacS9vAbk7eMy0xWg6E7bAhS1s79TK+D7tVFGXVZ55S7RNLRROU1rxoKlvZ/qjaB41DGA==", "dev": true, "requires": { - "esbuild": "^0.14.27", + "esbuild": "^0.16.3", "fsevents": "~2.3.2", - "postcss": "^8.4.13", - "resolve": "^1.22.0", - "rollup": "^2.59.0" + "postcss": "^8.4.19", + "resolve": "^1.22.1", + "rollup": "^3.7.0" } }, "vitest": { - "version": "0.16.0", - "resolved": "https://registry.npmjs.org/vitest/-/vitest-0.16.0.tgz", - "integrity": "sha512-Ntp6jrM8wf2NMtamMBLkRBBdeqHkgAH/WMh5Xryts1j2ft2D8QZQbiSVFkSl4WmEQzcPP0YM069g/Ga1vtnEtg==", + "version": "0.25.7", + "resolved": "https://registry.npmjs.org/vitest/-/vitest-0.25.7.tgz", + "integrity": "sha512-lJ+Ue+v8kHl2JzjaKHJ9u5Yo/loU7zrWK2/Whn8OKQjtq5G7nkeWfXuq3elZaC8xKdkdIuWiiIicaNBG1F5yzg==", "dev": true, "requires": { - "@types/chai": "^4.3.1", + "@types/chai": "^4.3.3", "@types/chai-subset": "^1.3.3", "@types/node": "*", + "acorn": "^8.8.0", + "acorn-walk": "^8.2.0", "chai": "^4.3.6", "debug": "^4.3.4", - "local-pkg": "^0.4.1", - "tinypool": "^0.2.1", - "tinyspy": "^0.3.3", - "vite": "^2.9.12" + "local-pkg": "^0.4.2", + "source-map": "^0.6.1", + "strip-literal": "^1.0.0", + "tinybench": "^2.3.1", + "tinypool": "^0.3.0", + "tinyspy": "^1.0.2", + "vite": "^3.0.0 || ^4.0.0" }, "dependencies": { + "acorn-walk": { + "version": "8.2.0", + "resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-8.2.0.tgz", + "integrity": "sha512-k+iyHEuPgSw6SbuDpGQM+06HQUa04DZ3o+F6CSzXMvvI5KMvnaEqXe+YVe555R9nn6GPt404fos4wcgpw12SDA==", + "dev": true + }, "chai": { "version": "4.3.6", "resolved": "https://registry.npmjs.org/chai/-/chai-4.3.6.tgz", diff --git a/package.json b/package.json index dc59286ca0..457473a190 100644 --- a/package.json +++ b/package.json @@ -36,7 +36,6 @@ "prepare": "is-ci || husky install" }, "dependencies": { - "@axa-ch/materials": "latest", "blueimp-canvas-to-blob": "^3.29.0", "date-fns": "^2.28.0", "lit": "^2.2.1" @@ -46,9 +45,9 @@ "@babel/preset-env": "^7.3.1", "@babel/preset-react": "^7.0.0", "@playwright/test": "^1.24.1", - "@rollup/plugin-commonjs": "^23.0.0", - "@rollup/plugin-node-resolve": "^15.0.0", - "@rollup/plugin-replace": "^5.0.0", + "@rollup/plugin-node-resolve": "^15.0.1", + "@rollup/plugin-replace": "^5.0.1", + "@rollup/plugin-terser": "^0.2.0", "@storybook/addon-backgrounds": "^6.5.12", "@storybook/addon-controls": "^6.5.12", "@storybook/addon-viewport": "^6.5.12", @@ -79,7 +78,7 @@ "http-server": "^14.1.1", "husky": "^8.0.0", "is-ci": "^3.0.1", - "lerna": "^6.0.1", + "lerna": "6.0.1", "marked": "^1.2.4", "mkdirp": "^0.5.1", "mv": "^2.1.1", @@ -89,15 +88,14 @@ "react": "^18.2.0", "react-dom": "^18.2.0", "react-syntax-highlighter": "^15.5.0", - "rollup": "^2.72.1", + "rollup": "^3.7.0", "rollup-plugin-copy": "^3.4.0", - "rollup-plugin-scss": "^3.0.0", - "rollup-plugin-terser": "^7.0.2", + "rollup-plugin-scss": "^4.0.0", "sass": "^1.52.3", "sass-loader": "^13.0.0", "svgo": "^2.8.0", "testcafe": "1.19.0", - "vitest": "^0.16.0", + "vitest": "^0.25.7", "wait-on": "^6.0.1", "webpack": "^5.72.1" }, diff --git a/rollup.config.cjs b/rollup.config.cjs new file mode 100644 index 0000000000..36349c7910 --- /dev/null +++ b/rollup.config.cjs @@ -0,0 +1,56 @@ +const path = require('path'); +const nodeResolve = require('@rollup/plugin-node-resolve'); +const terser = require('@rollup/plugin-terser'); +const replace = require('@rollup/plugin-replace'); +const copy = require('rollup-plugin-copy'); +const scss = require('rollup-plugin-scss'); +const { gatherVersions } = require('./scripts/version_info.js'); + +const globalSassImports = [ + 'variables.scss', + '00-colors.scss', + '20-animations.scss', + 'typography.scss', +] + .map(item => { + return `@import "${__dirname}/src/components/00-materials/styles/${item}";`; + }) + .join('\n'); + +const stringifiedVersionInfo = gatherVersions(); + +module.exports = { + input: 'index.js', + external: ['lit'], + output: { + file: './lib/index.js', + format: 'es', + }, + plugins: [ + replace({ + 'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV), + __VERSION_INFO__: stringifiedVersionInfo, + preventAssignment: true, + }), + scss({ + output: false, + include: '/**/*.scss', + includePaths: [path.resolve('node_modules')], + prefix: globalSassImports, + }), + // Resolve bare module specifiers to relative paths + nodeResolve({ + // threat all node_modules as external apart od .scss files + resolveOnly: [/^\.{0,2}\/|\.scss$/i], + }), + // Minify JS + terser({ + ecma: 2019, + module: true, + }), + // Copy types to lib directory + copy({ + targets: [{ src: 'index.d.ts', dest: './lib' }], + }), + ], +}; diff --git a/rollup.config.dist.js b/rollup.config.dist.js deleted file mode 100644 index 8ba91e3ef0..0000000000 --- a/rollup.config.dist.js +++ /dev/null @@ -1,12 +0,0 @@ -const { preDist, dist, postDist } = require('./scripts/build/dist.rollup.js'); - -const rollupConfigDist = [ - // Prepare src for dist - preDist, - // Bundle and build dist - dist, - // Cleanup after - postDist, -]; - -export default rollupConfigDist; diff --git a/rollup.config.js b/rollup.config.js deleted file mode 100644 index 7c2298e5c7..0000000000 --- a/rollup.config.js +++ /dev/null @@ -1,12 +0,0 @@ -const fs = require('fs'); - -const { lib, libReact } = require('./scripts/build/lib.rollup.js'); - -// Sometimes there is no react version to build. I.e icons -const rollupConfig = [lib]; - -if (fs.existsSync('./index.react.js')) { - rollupConfig.push(libReact); -} - -export default rollupConfig; diff --git a/scripts/build/common.rollup.js b/scripts/build/common.rollup.js deleted file mode 100644 index 9b649711cb..0000000000 --- a/scripts/build/common.rollup.js +++ /dev/null @@ -1,35 +0,0 @@ -const path = require('path'); -const replace = require('@rollup/plugin-replace'); // use to setup project enviroment variables -const scss = require('rollup-plugin-scss'); - -const { resolve: pathResolve } = require('path'); - -const base = pathResolve(__dirname, '../../src').replace(/\\/g, '/'); - -const globalSassImports = [ - 'components/00-materials/styles/variables.scss', - 'components/00-materials/styles/00-colors.scss', - 'components/00-materials/styles/20-animations.scss', - 'components/00-materials/styles/typography.scss', -] - .map(item => { - return `@import '${base}/${item}';`; - }) - .join('\n'); - -const { gatherVersions } = require('./version_info.js'); - -const stringifiedVersionInfo = gatherVersions(); - -module.exports.commonPlugins = [ - replace({ - 'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV), - __VERSION_INFO__: stringifiedVersionInfo, - }), - scss({ - output: false, - include: '/**/*.scss', - includePaths: [path.resolve('node_modules')], - prefix: globalSassImports, - }), -]; diff --git a/scripts/build/dist.rollup.js b/scripts/build/dist.rollup.js deleted file mode 100644 index 4695bf78f0..0000000000 --- a/scripts/build/dist.rollup.js +++ /dev/null @@ -1,91 +0,0 @@ -const fs = require('fs'); -const commonjs = require('@rollup/plugin-commonjs'); -const { extname } = require('path'); -const { terser } = require('rollup-plugin-terser'); -const { nodeResolve } = require('@rollup/plugin-node-resolve'); -const { commonPlugins } = require('./common.rollup.js'); - -const memory = {}; - -const preDist = { - input: 'package.json', - plugins: [ - { - name: 'pre-dist', - transform(code, id) { - if (extname(id) !== '.json') { - return null; - } - const jsonData = code; - let parsedJson = '{}'; - try { - parsedJson = JSON.parse(jsonData); - // save a backup in memory - memory.preDistJsonData = jsonData; - - // prepare each component for the dist build. make sure to use the just created lib file instead of src due to - // rollup's node-sass not being able to be applied throught the whole node-resolve algorythm, having as effect that - // scss inside js works only in the first level of the node-resolve algorythm - parsedJson.main = 'lib/index.js'; - } catch (e) { - throw new Error( - `Something went wrong while parsing the package.json of the component. Error: ${e}` - ); - } - // Rollup cant handle internally .json files therefore do not return code - fs.writeFileSync(id, JSON.stringify(parsedJson, null, 2)); - return ''; - }, - }, - ], -}; - -const dist = { - input: 'index.js', - context: 'window', - output: { - file: './dist/index.js', // no react dist on purpose - format: 'iife', - name: 'window', - }, - plugins: [ - ...commonPlugins, - // Resolve bare module specifiers to relative paths - nodeResolve({ - mainFields: ['module', 'main', 'browser'], - }), - // needed because we are in a monorepo and the node_modules could be somewhere up or in the root - commonjs({ - include: /node_modules/, - }), - // Minify JS - terser({ - ecma: 2019, - compress: true, - mangle: true, - }), - ], -}; - -const postDist = { - input: 'package.json', - plugins: [ - { - name: 'post-dist', - transform(code, id) { - if (extname(id) !== '.json') { - return null; - } - if (!memory.preDistJsonData) { - throw new Error( - 'Package json cannot be reverted. Something must have gone wrong in the preDist build. Please revert package.json' - ); - } - fs.writeFileSync(id, memory.preDistJsonData, 'UTF-8'); - return ''; - }, - }, - ], -}; - -module.exports = { preDist, dist, postDist }; diff --git a/scripts/build/fix.js b/scripts/build/fix.js deleted file mode 100755 index 3625291aa8..0000000000 --- a/scripts/build/fix.js +++ /dev/null @@ -1,61 +0,0 @@ -#!/usr/bin/env node - -/* - * Fix incorrect component package.json files left over by a broken build. - * Example invocation: - * patterns-library$ ./scripts/build/fix.js - */ - -// imports -const { cwd } = process; -const fs = require('fs'); -const path = require('path'); - -// synchronous directory-walker iterator -function* walkSync(dir, filter = /.*/, acceptable = () => true) { - const files = fs.readdirSync(dir); - - // eslint-disable-next-line no-restricted-syntax - for (const file of files) { - const pathToFile = path.join(dir, file); - const isDirectory = fs.statSync(pathToFile).isDirectory(); - if (isDirectory) { - yield* walkSync(pathToFile, filter, acceptable); - } else if (filter.test(pathToFile) && acceptable(dir, file, pathToFile)) { - yield pathToFile.split(path.sep); - } - } -} - -// helpers -const requirePackageJSON = dir => fs.existsSync(path.join(dir, 'package.json')); - -const currentDirectory = cwd(); - -// find all importable components ... -// eslint-disable-next-line no-restricted-syntax -for (const file of walkSync( - `src${path.sep}components`, - /(? () => { fs.writeFileSync( `${BASE_FOLDER}/index.react.js`, outdent` - import withReact from '../../../utils/with-react'; - import ${className} from './index'; + import withReact from '../../../utils/with-react.js'; + import ${className} from './index.js'; export default (createElement, version) => withReact(createElement, ${className}, version); @@ -240,10 +240,10 @@ const createFiles = (store, a, m, o, done) => () => { `${BASE_FOLDER}/story.js`, outdent` import { html } from 'lit'; - import { args, argTypes } from './story.args'; + import { args, argTypes } from './story.args.js'; import changelog from './CHANGELOG.md'; import readme from './README.md'; - import './index'; + import './index.js'; export default { title: 'Components', @@ -287,7 +287,7 @@ const createFiles = (store, a, m, o, done) => () => { `${BASE_FOLDER}/e2e.js`, outdent` import { expect, test } from '@playwright/test'; -import { fixtureURL } from '../../../utils/e2e-helpers'; +import { fixtureURL } from '../../../utils/e2e-helpers.cjs'; test.describe('${compTitle}', () => { test('should render', async ({ page }) => { @@ -313,8 +313,8 @@ test.describe('${compTitle}', () => { import { defineVersioned, /* versionedHtml, */ - } from '../../../utils/component-versioning'; - import applyDefaults from '../../../utils/apply-defaults'; + } from '../../../utils/component-versioning.js'; + import applyDefaults from '../../../utils/apply-defaults.js'; import styles from './index.scss'; class ${className} extends LitElement { diff --git a/scripts/build/version_info.js b/scripts/version_info.js similarity index 100% rename from scripts/build/version_info.js rename to scripts/version_info.js diff --git a/src/components/00-materials/brand-colors/story.js b/src/components/00-materials/brand-colors/story.js index f58aa6f292..6aa6162b29 100644 --- a/src/components/00-materials/brand-colors/story.js +++ b/src/components/00-materials/brand-colors/story.js @@ -1,8 +1,8 @@ import { html } from 'lit'; import changelog from '../CHANGELOG.md'; import readme from '../README.md'; -import '../../10-atoms/heading'; -import '../../10-atoms/text'; +import '../../10-atoms/heading/index.wc.js'; +import '../../10-atoms/text/index.wc.js'; import styles from '../story.scss'; const colors = __COLORS_SCSS_AS_STRING__; diff --git a/src/components/00-materials/package.json b/src/components/00-materials/package.json index dcd942f5ca..9d9859ede9 100644 --- a/src/components/00-materials/package.json +++ b/src/components/00-materials/package.json @@ -5,10 +5,15 @@ "author": "Pattern Warriors", "homepage": "https://github.com/axa-ch-webhub-cloud/pattern-library/tree/develop/src/components/00-materials/#readme", "license": "Copyright 2019 AXA Versicherungen AG", + "exports": { + "./icons": "./icons/index.js", + "./icons/material-design": "./icons/material-design/index.js", + "./images": "./images/index.js" + }, "scripts": { "build-icons": "rm -rf ./icons-raw/.tmp && svgo --quiet --disable=removeViewBox -f icons-raw -r -o icons-raw/.tmp", "build-images": "rm -rf ./images-raw/.tmp && svgo --quiet --disable=removeViewBox --config 'svgo-config.json' -f images-raw -r -o images-raw/.tmp", - "build": "node scripts/export-svg", + "build": "node scripts/export-svg.cjs", "genPackagelock": "npm i --package-lock-only" }, "files": [ diff --git a/src/components/00-materials/scripts/export-svg.js b/src/components/00-materials/scripts/export-svg.cjs similarity index 100% rename from src/components/00-materials/scripts/export-svg.js rename to src/components/00-materials/scripts/export-svg.cjs diff --git a/src/components/00-materials/story.js b/src/components/00-materials/story.js index d551134aa2..8c5dabe5e8 100644 --- a/src/components/00-materials/story.js +++ b/src/components/00-materials/story.js @@ -1,9 +1,9 @@ import { html } from 'lit'; import { repeat } from 'lit/directives/repeat.js'; import { unsafeHTML } from 'lit/directives/unsafe-html.js'; -import '../10-atoms/heading/index'; -import '../10-atoms/text/index'; -import '../10-atoms/button/index'; +import '../10-atoms/heading/index.js'; +import '../10-atoms/text/index.js'; +import '../10-atoms/button/index.js'; import changelog from './CHANGELOG.md'; import readme from './README.md'; import styles from './story.scss'; diff --git a/src/components/10-atoms/button/CHANGELOG.md b/src/components/10-atoms/button/CHANGELOG.md index 3a76b0ccb7..e8d1c3222c 100644 --- a/src/components/10-atoms/button/CHANGELOG.md +++ b/src/components/10-atoms/button/CHANGELOG.md @@ -1,3 +1,8 @@ +## 9.0.0 + +- Remove dist build +- Named Export + ## 8.2.2 Improve `onClick` type with `AXAMouseEvent` diff --git a/src/components/10-atoms/button/demo.js b/src/components/10-atoms/button/demo.js index 425e600d74..0fd2436b0b 100644 --- a/src/components/10-atoms/button/demo.js +++ b/src/components/10-atoms/button/demo.js @@ -1,9 +1,9 @@ import { html } from 'lit'; import changelog from './CHANGELOG.md'; import readme from './README.md'; -import './index'; -import '../text'; -import '../input-text/index'; +import './index.wc.js'; +import '../text/index.wc.js'; +import '../input-text/index.wc.js'; export default { title: 'Examples/Button', diff --git a/src/components/10-atoms/button/index.react.d.ts b/src/components/10-atoms/button/index.d.ts similarity index 93% rename from src/components/10-atoms/button/index.react.d.ts rename to src/components/10-atoms/button/index.d.ts index 5d313f4cf8..1319356d2d 100644 --- a/src/components/10-atoms/button/index.react.d.ts +++ b/src/components/10-atoms/button/index.d.ts @@ -33,9 +33,7 @@ export interface AXAButtonProps { onClick?: (event: AXAMouseEvent) => void; } -declare function createAXAButton( +declare function createAXAButtonReact( createElement: typeof React.createElement, version?: string ): React.ComponentType; - -export default createAXAButton; diff --git a/src/components/10-atoms/button/index.js b/src/components/10-atoms/button/index.js index 19644b8c9b..e96c6e8ab3 100644 --- a/src/components/10-atoms/button/index.js +++ b/src/components/10-atoms/button/index.js @@ -1,214 +1,5 @@ -import { html, css, unsafeCSS, LitElement } from 'lit'; -import { classMap } from 'lit/directives/class-map.js'; +import AXAButton from './index.wc.js'; -import AXAIcon from '@axa-ch/icon'; - -import applyDefaults from '../../../utils/apply-defaults'; -import { - defineVersioned, - versionedHtml, -} from '../../../utils/component-versioning'; -import buttonCSS from './index.scss'; - -const ARROW_RIGHT = 'arrow-right'; - -class AXAButton extends LitElement { - static get tagName() { - return 'axa-button'; - } - - static get styles() { - return css` - ${unsafeCSS(buttonCSS)} - `; - } - - static get properties() { - return { - // button, submit, reset - type: { type: String, reflect: true, defaultValue: 'button' }, - // secondary, red, inverted, inverted-blue-ocean, inverted-red-tosca, inverted-purple-logan, inverted-green-viridian, inverted-blue-teal - variant: { type: String }, - icon: { type: String }, - size: { type: String }, - block: { type: Boolean, reflect: true }, - motionOff: { type: Boolean }, - disabled: { type: Boolean, reflect: true }, - href: { type: String }, - external: { type: Boolean }, - onClick: { type: Function, attribute: false }, - }; - } - - constructor() { - super(); - applyDefaults(this); - defineVersioned([AXAIcon], __VERSION_INFO__, this); - this.handleClick = this.handleClick.bind(this); - } - - get isTypeSubmitOrReset() { - return this.type === 'submit' || this.type === 'reset'; - } - - get showIcon() { - return this.icon && this.icon !== ARROW_RIGHT; - } - - get showArrow() { - return this.icon === ARROW_RIGHT; - } - - watch(mode) { - switch (mode) { - case 'stop': - if (this._observer) { - this._observer.disconnect(); - } - break; - case 'start': - if (!this._observer) { - this._observer = new MutationObserver(() => this.attachFakeButton()); - } - this._observer.observe(this, { - childList: true, - }); - break; - default: - break; - } - } - - attachFakeButton() { - const fakeButton = document.createElement('button'); - fakeButton.type = this.type; - fakeButton.style.display = 'none'; - this.watch('stop'); - this.appendChild(fakeButton); - this.watch('start'); - this.fakeButton = fakeButton; - } - - firstUpdated() { - // shadow dom submit btn workaround - // only use fakeButton when shadowDom is natively supported - if (this.isTypeSubmitOrReset) { - this.attachFakeButton(); - } - - if (typeof this.onclick === 'function') { - // cache original event so that we can fire it when internal button is pressed - // We are going to override original event so that someone can manually trigger - // onclick via function call - this.originalOnclick = this.onclick; - } - - // If someone fires a click on the button and its type is submit then trigger fake button - // press - this.onclick = e => { - // call handle click and pass flag to be sure that handle click does not call - // us back. - this.handleClick(e, true); - }; - } - - handleClick(e, eventIsManuallyFunctionTriggered = false) { - // block propagation if event is not synthetic. We need only that - // the event coming from fake button is fired so that default - // form behaviour works (submit, reset, etc). The reason why it works with fake button is - // that fake button is NOT inside a ShadowDOM. The event instead - // bubbles out of ShadowDOM, hence the stop propagation trick - - if (e.isTrusted && this.isTypeSubmitOrReset) { - e.stopPropagation(); - this.fakeButton.click(); - } - - // If we are under react, onClick will be camel Case onClick. If so, use it - // otherwise if a consumer defined a onclick="fn", call that instead - const onclick = this.onClick || this.originalOnclick; - - // if click event is fired manually via javascript, the this.onclick = e => { function - // will be called and therefore make sure to not trigger it again. - if (!eventIsManuallyFunctionTriggered && typeof onclick === 'function') { - onclick(e); - } - } - - render() { - const { - type, - motionOff, - disabled, - variant = '', - icon = '', - size = '', - href, - external, - } = this; - - const classes = { - 'a-button': true, - 'a-button--large': size === 'large', - 'a-button--small': size === 'small', - 'a-button--motion': !motionOff, - 'a-button--secondary': variant === 'secondary', - 'a-button--red': variant === 'red', - 'a-button--inverted': variant.includes('inverted'), - 'a-button--inverted-blue-ocean': variant === 'inverted-blue-ocean', - 'a-button--inverted-red-tosca': variant === 'inverted-red-tosca', - 'a-button--inverted-purple-logan': variant === 'inverted-purple-logan', - 'a-button--inverted-green-viridian': - variant === 'inverted-green-viridian', - 'a-button--inverted-blue-teal': variant === 'inverted-blue-teal', - }; - - const renderContent = () => html` - ${this.showIcon - ? versionedHtml( - this - )` ` - : ''} - - ${this.showArrow - ? versionedHtml( - this - )`` - : html``} - `; - - if (this.href) { - return html`${renderContent()}`; - } - - return html` - - `; - } - - disconnectedCallback() { - super.disconnectedCallback(); - // remove installed observer, if any - this.watch('stop'); - } -} - -/* eslint-disable no-undef */ -defineVersioned([AXAButton], __VERSION_INFO__); +export { default as createAXAButtonReact } from './index.react.js'; export default AXAButton; diff --git a/src/components/10-atoms/button/index.react.js b/src/components/10-atoms/button/index.react.js index ac8961ce0f..598b75b480 100644 --- a/src/components/10-atoms/button/index.react.js +++ b/src/components/10-atoms/button/index.react.js @@ -1,5 +1,5 @@ -import withReact from '../../../utils/with-react'; -import AXAButton from './index'; +import withReact from '../../../utils/with-react.js'; +import AXAButton from './index.wc.js'; export default (createElement, version) => withReact(createElement, AXAButton, version); diff --git a/src/components/10-atoms/button/index.wc.js b/src/components/10-atoms/button/index.wc.js new file mode 100644 index 0000000000..747c8c9c12 --- /dev/null +++ b/src/components/10-atoms/button/index.wc.js @@ -0,0 +1,212 @@ +import { html, css, unsafeCSS, LitElement } from 'lit'; +import { classMap } from 'lit/directives/class-map.js'; +import AXAIcon from '@axa-ch/icon'; +import applyDefaults from '../../../utils/apply-defaults.js'; +import { + defineVersioned, + versionedHtml, +} from '../../../utils/component-versioning.js'; +import buttonCSS from './index.scss'; + +const ARROW_RIGHT = 'arrow-right'; + +class AXAButton extends LitElement { + static get tagName() { + return 'axa-button'; + } + + static get styles() { + return css` + ${unsafeCSS(buttonCSS)} + `; + } + + static get properties() { + return { + // button, submit, reset + type: { type: String, reflect: true, defaultValue: 'button' }, + // secondary, red, inverted, inverted-blue-ocean, inverted-red-tosca, inverted-purple-logan, inverted-green-viridian, inverted-blue-teal + variant: { type: String }, + icon: { type: String }, + size: { type: String }, + block: { type: Boolean, reflect: true }, + motionOff: { type: Boolean }, + disabled: { type: Boolean, reflect: true }, + href: { type: String }, + external: { type: Boolean }, + onClick: { type: Function, attribute: false }, + }; + } + + constructor() { + super(); + applyDefaults(this); + defineVersioned([AXAIcon], __VERSION_INFO__, this); + this.handleClick = this.handleClick.bind(this); + } + + get isTypeSubmitOrReset() { + return this.type === 'submit' || this.type === 'reset'; + } + + get showIcon() { + return this.icon && this.icon !== ARROW_RIGHT; + } + + get showArrow() { + return this.icon === ARROW_RIGHT; + } + + watch(mode) { + switch (mode) { + case 'stop': + if (this._observer) { + this._observer.disconnect(); + } + break; + case 'start': + if (!this._observer) { + this._observer = new MutationObserver(() => this.attachFakeButton()); + } + this._observer.observe(this, { + childList: true, + }); + break; + default: + break; + } + } + + attachFakeButton() { + const fakeButton = document.createElement('button'); + fakeButton.type = this.type; + fakeButton.style.display = 'none'; + this.watch('stop'); + this.appendChild(fakeButton); + this.watch('start'); + this.fakeButton = fakeButton; + } + + firstUpdated() { + // shadow dom submit btn workaround + // only use fakeButton when shadowDom is natively supported + if (this.isTypeSubmitOrReset) { + this.attachFakeButton(); + } + + if (typeof this.onclick === 'function') { + // cache original event so that we can fire it when internal button is pressed + // We are going to override original event so that someone can manually trigger + // onclick via function call + this.originalOnclick = this.onclick; + } + + // If someone fires a click on the button and its type is submit then trigger fake button + // press + this.onclick = e => { + // call handle click and pass flag to be sure that handle click does not call + // us back. + this.handleClick(e, true); + }; + } + + handleClick(e, eventIsManuallyFunctionTriggered = false) { + // block propagation if event is not synthetic. We need only that + // the event coming from fake button is fired so that default + // form behaviour works (submit, reset, etc). The reason why it works with fake button is + // that fake button is NOT inside a ShadowDOM. The event instead + // bubbles out of ShadowDOM, hence the stop propagation trick + + if (e.isTrusted && this.isTypeSubmitOrReset) { + e.stopPropagation(); + this.fakeButton.click(); + } + + // If we are under react, onClick will be camel Case onClick. If so, use it + // otherwise if a consumer defined a onclick="fn", call that instead + const onclick = this.onClick || this.originalOnclick; + + // if click event is fired manually via javascript, the this.onclick = e => { function + // will be called and therefore make sure to not trigger it again. + if (!eventIsManuallyFunctionTriggered && typeof onclick === 'function') { + onclick(e); + } + } + + render() { + const { + type, + motionOff, + disabled, + variant = '', + icon = '', + size = '', + href, + external, + } = this; + + const classes = { + 'a-button': true, + 'a-button--large': size === 'large', + 'a-button--small': size === 'small', + 'a-button--motion': !motionOff, + 'a-button--secondary': variant === 'secondary', + 'a-button--red': variant === 'red', + 'a-button--inverted': variant.includes('inverted'), + 'a-button--inverted-blue-ocean': variant === 'inverted-blue-ocean', + 'a-button--inverted-red-tosca': variant === 'inverted-red-tosca', + 'a-button--inverted-purple-logan': variant === 'inverted-purple-logan', + 'a-button--inverted-green-viridian': + variant === 'inverted-green-viridian', + 'a-button--inverted-blue-teal': variant === 'inverted-blue-teal', + }; + + const renderContent = () => html` + ${this.showIcon + ? versionedHtml( + this + )` ` + : ''} + + ${this.showArrow + ? versionedHtml( + this + )`` + : html``} + `; + + if (this.href) { + return html`${renderContent()}`; + } + + return html` + + `; + } + + disconnectedCallback() { + super.disconnectedCallback(); + // remove installed observer, if any + this.watch('stop'); + } +} + +/* eslint-disable no-undef */ +defineVersioned([AXAButton], __VERSION_INFO__); + +export default AXAButton; diff --git a/src/components/10-atoms/button/package.json b/src/components/10-atoms/button/package.json index 155474d415..d4deec12eb 100644 --- a/src/components/10-atoms/button/package.json +++ b/src/components/10-atoms/button/package.json @@ -5,21 +5,19 @@ "author": "Pattern Warriors", "homepage": "https://github.com/axa-ch-webhub-cloud/pattern-library/tree/develop/src/components/10-atoms/button#readme", "license": "Copyright 2019 AXA Versicherungen AG", - "directories": { - "lib": "lib" + "type": "module", + "main": "lib/index.js", + "exports": { + ".": "./lib/index.js" }, + "files": [ + "lib" + ], "scripts": { - "prepublishOnly": "../../../../scripts/build/prepublish.js", - "build": "rollup --silent --config ../../../../rollup.config.js", - "build-dist": "rollup --silent --config ../../../../rollup.config.dist.js", - "postpublish": "../../../../scripts/build/postpublish.js", - "watch": "rollup --watch --silent --config ../../../../rollup.config.js", + "build": "rollup --silent --config ../../../../rollup.config.cjs", + "watch": "rollup --watch --silent --config ../../../../rollup.config.cjs", "genPackagelock": "npm i --package-lock-only" }, - "files": [ - "lib", - "dist" - ], "publishConfig": { "access": "public" }, diff --git a/src/components/10-atoms/button/react/AXAButton.jsx b/src/components/10-atoms/button/react/AXAButton.jsx index 5bfeca3b17..562856ed10 100644 --- a/src/components/10-atoms/button/react/AXAButton.jsx +++ b/src/components/10-atoms/button/react/AXAButton.jsx @@ -1,5 +1,5 @@ import { createElement } from 'react'; -import createAXAButton from '../index.react'; +import createAXAButton from '../index.react.js'; const AXAButton = createAXAButton(createElement); diff --git a/src/components/10-atoms/button/react/DemoButtonClick.jsx b/src/components/10-atoms/button/react/DemoButtonClick.jsx index bd9aab7679..8afb4a4fef 100644 --- a/src/components/10-atoms/button/react/DemoButtonClick.jsx +++ b/src/components/10-atoms/button/react/DemoButtonClick.jsx @@ -1,5 +1,5 @@ import React, { useState } from 'react'; -import AXAButton from './AXAButton'; +import AXAButton from './AXAButton.jsx'; const DemoButtonClick = () => { const [counter, setCounter] = useState(0); diff --git a/src/components/10-atoms/button/react/DemoButtonForm.jsx b/src/components/10-atoms/button/react/DemoButtonForm.jsx index 8623242887..e477ed48de 100644 --- a/src/components/10-atoms/button/react/DemoButtonForm.jsx +++ b/src/components/10-atoms/button/react/DemoButtonForm.jsx @@ -1,5 +1,5 @@ import React, { useState } from 'react'; -import AXAButton from './AXAButton'; +import AXAButton from './AXAButton.jsx'; const DemoButtonForm = () => { const [counter, setCounter] = useState(0); diff --git a/src/components/10-atoms/button/react/demo.jsx b/src/components/10-atoms/button/react/demo.jsx index f6d6309e28..3ea3675c0b 100644 --- a/src/components/10-atoms/button/react/demo.jsx +++ b/src/components/10-atoms/button/react/demo.jsx @@ -1,9 +1,9 @@ import React from 'react'; import readme from '../README.md'; import changelog from '../CHANGELOG.md'; -import { createReactContainer } from '../../../../utils/create-react-container'; -import DemoButtonClick from './DemoButtonClick'; -import DemoButtonForm from './DemoButtonForm'; +import { createReactContainer } from '../../../../utils/create-react-container.jsx'; +import DemoButtonClick from './DemoButtonClick.jsx'; +import DemoButtonForm from './DemoButtonForm.jsx'; export default { title: 'Examples/Button/React', diff --git a/src/components/10-atoms/button/react/story.jsx b/src/components/10-atoms/button/react/story.jsx index 7b471b7d17..3e7386371a 100644 --- a/src/components/10-atoms/button/react/story.jsx +++ b/src/components/10-atoms/button/react/story.jsx @@ -1,9 +1,9 @@ import React from 'react'; import changelog from '../CHANGELOG.md'; import readme from '../README.md'; -import { createReactContainer } from '../../../../utils/create-react-container'; -import { args, argTypes, invertedBgs } from '../story.args'; -import AXAButton from './AXAButton'; +import { createReactContainer } from '../../../../utils/create-react-container.jsx'; +import { args, argTypes, invertedBgs } from '../story.args.js'; +import AXAButton from './AXAButton.jsx'; export default { title: 'Examples/Button/React', diff --git a/src/components/10-atoms/button/story.args.js b/src/components/10-atoms/button/story.args.js index d9211b831f..ce4483ed9f 100644 --- a/src/components/10-atoms/button/story.args.js +++ b/src/components/10-atoms/button/story.args.js @@ -1,4 +1,4 @@ -import { iconList } from '../icon/icon-list'; +import { iconList } from '../icon/icon-list.js'; const variants = { default: '', diff --git a/src/components/10-atoms/button/story.js b/src/components/10-atoms/button/story.js index 0d60f91f82..3c60c5f008 100644 --- a/src/components/10-atoms/button/story.js +++ b/src/components/10-atoms/button/story.js @@ -1,8 +1,8 @@ import { html } from 'lit'; -import { args, argTypes, invertedBgs } from './story.args'; +import { args, argTypes, invertedBgs } from './story.args.js'; import changelog from './CHANGELOG.md'; import readme from './README.md'; -import './index'; +import './index.wc.js'; export default { title: 'Components/Button', diff --git a/src/components/10-atoms/button/test/basic/e2e.js b/src/components/10-atoms/button/test/basic/e2e.js index 95cb959557..f47707ef8b 100644 --- a/src/components/10-atoms/button/test/basic/e2e.js +++ b/src/components/10-atoms/button/test/basic/e2e.js @@ -1,5 +1,5 @@ import { expect, test } from '@playwright/test'; -import { fixtureURL } from '../../../../../utils/e2e-helpers'; +import { fixtureURL } from '../../../../../utils/e2e-helpers.cjs'; test.describe('button: basic', () => { test('should be button with axa blue bg', async ({ page }) => { diff --git a/src/components/10-atoms/button/test/form/e2e.js b/src/components/10-atoms/button/test/form/e2e.js index af3a8d31ef..fa8890f081 100644 --- a/src/components/10-atoms/button/test/form/e2e.js +++ b/src/components/10-atoms/button/test/form/e2e.js @@ -1,5 +1,5 @@ import { expect, test } from '@playwright/test'; -import { fixtureURL } from '../../../../../utils/e2e-helpers'; +import { fixtureURL } from '../../../../../utils/e2e-helpers.cjs'; test.describe('button: form', () => { test('should submit inputs', async ({ page }) => { diff --git a/src/components/10-atoms/button/test/icon/e2e.js b/src/components/10-atoms/button/test/icon/e2e.js index 0757e88518..ca6c2b763a 100644 --- a/src/components/10-atoms/button/test/icon/e2e.js +++ b/src/components/10-atoms/button/test/icon/e2e.js @@ -1,5 +1,5 @@ import { expect, test } from '@playwright/test'; -import { fixtureURL } from '../../../../../utils/e2e-helpers'; +import { fixtureURL } from '../../../../../utils/e2e-helpers.cjs'; test.describe('button: icon', () => { test('should render icon', async ({ page }) => { diff --git a/src/components/10-atoms/carousel/index.react.d.ts b/src/components/10-atoms/carousel/index.d.ts similarity index 81% rename from src/components/10-atoms/carousel/index.react.d.ts rename to src/components/10-atoms/carousel/index.d.ts index 98aa833e72..edb2997619 100644 --- a/src/components/10-atoms/carousel/index.react.d.ts +++ b/src/components/10-atoms/carousel/index.d.ts @@ -8,9 +8,7 @@ export interface AXACarouselProps { children?: React.ReactNode; } -declare function createAXACarousel( +declare function createAXACarouselReact( createElement: typeof React.createElement, version?: string ): React.ComponentType; - -export default createAXACarousel; diff --git a/src/components/10-atoms/carousel/index.js b/src/components/10-atoms/carousel/index.js index 398bb6edc8..c5e45e5973 100644 --- a/src/components/10-atoms/carousel/index.js +++ b/src/components/10-atoms/carousel/index.js @@ -1,290 +1,5 @@ -import { html, css, unsafeCSS } from 'lit'; +import AXACarousel from './index.wc.js'; -import { defineVersioned } from '../../../utils/component-versioning'; -import styles from './index.scss'; -import Swipe from './swipe'; -import debounce from '../../../utils/debounce'; -import InlineStyles from '../../../utils/inline-styles'; -import applyDefaults from '../../../utils/apply-defaults'; -import childStyles from './child.scss'; - -const ELEMENT_NODE = 1; -const ANIMATION_LEFT_CLASS = 'animation-left'; -const ANIMATION_RIGHT_CLASS = 'animation-right'; - -class AXACarousel extends InlineStyles { - static get tagName() { - return 'axa-carousel'; - } - - static get styles() { - return css` - ${unsafeCSS(styles)} - `; - } - - static get childStyles() { - return childStyles; - } - - static get properties() { - return { - autorotatedisabled: { type: Boolean }, - autorotatetime: { type: Number, defaultValue: 5000 }, - keysenabled: { type: Boolean }, - _animationWrapperClass: { type: String }, - _carouselMinHeight: { type: Number }, - }; - } - - constructor() { - super(); - // Props - applyDefaults(this); - this._onSwipeLeft = this._onSwipeLeft.bind(this); - this._onSwipeRight = this._onSwipeRight.bind(this); - this._handleKeyUp = this._handleKeyUp.bind(this); - this._onResize = debounce(() => { - this._carouselMinHeight = 0; - this._calculateContainerMinHeight(); - }, 200); - // Internal - this.autoRotateTimerID = null; - this.slides = null; - this.visibleSlideIndex = 0; - this.swiper = null; - this.removeEventListenerAnimationEnd = () => {}; - } - - // public methods - - handleNextButtonClick() { - this._nextSlide(); - this._stopAutoRotate(); - } - - handlePreviousButtonClick() { - this._previousSlide(); - this._stopAutoRotate(); - } - - // private methods - - _getSlides(usedThis = this) { - const slotsSelectedByShadowRootFiltered = usedThis.shadowRoot - .querySelector('.js-carousel__wrapper > slot') - .assignedNodes({ flatten: true }) - .filter(node => node.nodeType === ELEMENT_NODE); - - const slotsSelectedWithoutShadowRoot = usedThis.querySelector('slot'); - - let slotsSelectedWithoutShadowRootFiltered = []; - let slots = []; - - if (slotsSelectedWithoutShadowRoot) { - slotsSelectedWithoutShadowRootFiltered = slotsSelectedWithoutShadowRoot - .assignedNodes({ flatten: true }) - .filter(node => node.nodeType === ELEMENT_NODE); - } - - // IE: slotsSelectedByShadowRootFiltered is [] - // IE and Chrome: Carousel standalone: slotsSelectedWithoutShadowRoot is null - if (slotsSelectedByShadowRootFiltered.length > 0) { - slots = slotsSelectedByShadowRootFiltered; - } else { - slots = slotsSelectedWithoutShadowRootFiltered; - } - - return slots; - } - - _addEventListenerAnimationEnd(usedShadowRoot = this.shadowRoot) { - // usedShadowRoot as a property to encapsulate for unit tests - const eventName = 'animationend'; - const onAnimationEnd = () => { - this._animationWrapperClass = ''; - }; - const elementWithAnimationEvent = usedShadowRoot.querySelector( - '.js-carousel__wrapper' - ); - elementWithAnimationEvent.addEventListener(eventName, onAnimationEnd); - - return () => { - elementWithAnimationEvent.removeEventListener(eventName, onAnimationEnd); - }; - } - - _setSlideVisibleWithAnimation(slideIndex, animationClass) { - this.visibleSlideIndex = slideIndex; - this.slides.forEach(node => { - node.style.display = 'none'; - }); - this.slides[slideIndex].style.display = 'block'; - this._animationWrapperClass = animationClass; - } - - _nextSlide() { - let nextSlideIndex = this.visibleSlideIndex + 1; - - if (nextSlideIndex > this.slides.length - 1) { - nextSlideIndex = 0; - } - - this._setSlideVisibleWithAnimation(nextSlideIndex, ANIMATION_RIGHT_CLASS); - } - - _previousSlide() { - let nextSlideIndex = this.visibleSlideIndex - 1; - - if (nextSlideIndex < 0) { - nextSlideIndex = this.slides.length - 1; - } - - this._setSlideVisibleWithAnimation(nextSlideIndex, ANIMATION_LEFT_CLASS); - } - - // Resize: - - _setSlideVisibleAndAllOthersNone(inputNode) { - this.slides.forEach(node => { - if (node === inputNode) { - node.style.display = 'block'; - } else { - node.style.display = 'none'; - } - }); - } - - _calculateContainerMinHeight() { - // we need to set carousel min height in case there are elements with different heights. - this.slides.forEach(node => { - this._setSlideVisibleAndAllOthersNone(node); - - if (node.clientHeight > this._carouselMinHeight) { - this._carouselMinHeight = node.clientHeight; - } - }); - - this._setSlideVisibleAndAllOthersNone(this.slides[this.visibleSlideIndex]); - } - // AutoRotate: - - _startAutoRotate() { - if ( - !this.autorotatedisabled && - !!this.autorotatetime === true && - // eslint-disable-next-line no-restricted-globals - !isNaN(this.autorotatetime) - ) { - this.autoRotateTimerID = setInterval(() => { - this._nextSlide(); - }, this.autorotatetime); - } - } - - _stopAutoRotate() { - clearInterval(this.autoRotateTimerID); - } - - // Swipe for mobile devices: - - _onSwipeLeft() { - this.handleNextButtonClick(); - } - - _onSwipeRight() { - this.handlePreviousButtonClick(); - } - - _initSwipe(usedElement = this) { - // usedElement as a property to encapsulate for unit tests - this.swiper = new Swipe( - usedElement, - usedElement._onSwipeLeft, - usedElement._onSwipeRight - ); - this.swiper.run(); - } - - _terminateSwipe() { - if (this.swiper && this.swiper.stop) { - this.swiper.stop(); - } - } - - // Key Navigation: - - _initKeyNavigation(usedDocument = this.ownerDocument) { - // usedDocument as a property to encapsulate for unit tests - if (this.keysenabled) { - usedDocument.addEventListener('keyup', this._handleKeyUp); - } - } - - _terminateKeyNavigation(usedDocument = this.ownerDocument) { - // usedDocument as a property to encapsulate for unit tests - usedDocument.removeEventListener('keyup', this._handleKeyUp); - } - - _handleKeyUp(ev) { - const e = ev || window.event; - - if (e.keyCode === 37) { - this.handlePreviousButtonClick(); - } else if (e.keyCode === 39) { - this.handleNextButtonClick(); - } - } - - firstUpdated() { - this.inlineStyles('childStyles'); - this.slides = this._getSlides(); - this._calculateContainerMinHeight(); - this._setSlideVisibleWithAnimation(0); - this._initSwipe(); - this._initKeyNavigation(); - this._startAutoRotate(); - this.removeEventListenerAnimationEnd = this._addEventListenerAnimationEnd(); - window.addEventListener('resize', this._onResize); - } - - render() { - return html` -
- -
- -
- -
- `; - } - - disconnectedCallback() { - super.disconnectedCallback(); - - this._stopAutoRotate(); - this._terminateSwipe(); - this._terminateKeyNavigation(); - window.removeEventListener('resize', this._onResize); - this.removeEventListenerAnimationEnd(); - } -} - -defineVersioned([AXACarousel], __VERSION_INFO__); +export { default as createAXACarouselReact } from './index.react.js'; export default AXACarousel; diff --git a/src/components/10-atoms/carousel/index.react.js b/src/components/10-atoms/carousel/index.react.js index 05c4b06f8c..6ad2f1f8c6 100644 --- a/src/components/10-atoms/carousel/index.react.js +++ b/src/components/10-atoms/carousel/index.react.js @@ -1,5 +1,5 @@ -import withReact from '../../../utils/with-react'; -import AXACarousel from './index'; +import withReact from '../../../utils/with-react.js'; +import AXACarousel from './index.wc.js'; export default (createElement, version) => withReact(createElement, AXACarousel, version); diff --git a/src/components/10-atoms/carousel/index.wc.js b/src/components/10-atoms/carousel/index.wc.js new file mode 100644 index 0000000000..b520ecacfa --- /dev/null +++ b/src/components/10-atoms/carousel/index.wc.js @@ -0,0 +1,290 @@ +import { html, css, unsafeCSS } from 'lit'; + +import { defineVersioned } from '../../../utils/component-versioning.js'; +import styles from './index.scss'; +import Swipe from './swipe.js'; +import debounce from '../../../utils/debounce.js'; +import InlineStyles from '../../../utils/inline-styles.js'; +import applyDefaults from '../../../utils/apply-defaults.js'; +import childStyles from './child.scss'; + +const ELEMENT_NODE = 1; +const ANIMATION_LEFT_CLASS = 'animation-left'; +const ANIMATION_RIGHT_CLASS = 'animation-right'; + +class AXACarousel extends InlineStyles { + static get tagName() { + return 'axa-carousel'; + } + + static get styles() { + return css` + ${unsafeCSS(styles)} + `; + } + + static get childStyles() { + return childStyles; + } + + static get properties() { + return { + autorotatedisabled: { type: Boolean }, + autorotatetime: { type: Number, defaultValue: 5000 }, + keysenabled: { type: Boolean }, + _animationWrapperClass: { type: String }, + _carouselMinHeight: { type: Number }, + }; + } + + constructor() { + super(); + // Props + applyDefaults(this); + this._onSwipeLeft = this._onSwipeLeft.bind(this); + this._onSwipeRight = this._onSwipeRight.bind(this); + this._handleKeyUp = this._handleKeyUp.bind(this); + this._onResize = debounce(() => { + this._carouselMinHeight = 0; + this._calculateContainerMinHeight(); + }, 200); + // Internal + this.autoRotateTimerID = null; + this.slides = null; + this.visibleSlideIndex = 0; + this.swiper = null; + this.removeEventListenerAnimationEnd = () => {}; + } + + // public methods + + handleNextButtonClick() { + this._nextSlide(); + this._stopAutoRotate(); + } + + handlePreviousButtonClick() { + this._previousSlide(); + this._stopAutoRotate(); + } + + // private methods + + _getSlides(usedThis = this) { + const slotsSelectedByShadowRootFiltered = usedThis.shadowRoot + .querySelector('.js-carousel__wrapper > slot') + .assignedNodes({ flatten: true }) + .filter(node => node.nodeType === ELEMENT_NODE); + + const slotsSelectedWithoutShadowRoot = usedThis.querySelector('slot'); + + let slotsSelectedWithoutShadowRootFiltered = []; + let slots = []; + + if (slotsSelectedWithoutShadowRoot) { + slotsSelectedWithoutShadowRootFiltered = slotsSelectedWithoutShadowRoot + .assignedNodes({ flatten: true }) + .filter(node => node.nodeType === ELEMENT_NODE); + } + + // IE: slotsSelectedByShadowRootFiltered is [] + // IE and Chrome: Carousel standalone: slotsSelectedWithoutShadowRoot is null + if (slotsSelectedByShadowRootFiltered.length > 0) { + slots = slotsSelectedByShadowRootFiltered; + } else { + slots = slotsSelectedWithoutShadowRootFiltered; + } + + return slots; + } + + _addEventListenerAnimationEnd(usedShadowRoot = this.shadowRoot) { + // usedShadowRoot as a property to encapsulate for unit tests + const eventName = 'animationend'; + const onAnimationEnd = () => { + this._animationWrapperClass = ''; + }; + const elementWithAnimationEvent = usedShadowRoot.querySelector( + '.js-carousel__wrapper' + ); + elementWithAnimationEvent.addEventListener(eventName, onAnimationEnd); + + return () => { + elementWithAnimationEvent.removeEventListener(eventName, onAnimationEnd); + }; + } + + _setSlideVisibleWithAnimation(slideIndex, animationClass) { + this.visibleSlideIndex = slideIndex; + this.slides.forEach(node => { + node.style.display = 'none'; + }); + this.slides[slideIndex].style.display = 'block'; + this._animationWrapperClass = animationClass; + } + + _nextSlide() { + let nextSlideIndex = this.visibleSlideIndex + 1; + + if (nextSlideIndex > this.slides.length - 1) { + nextSlideIndex = 0; + } + + this._setSlideVisibleWithAnimation(nextSlideIndex, ANIMATION_RIGHT_CLASS); + } + + _previousSlide() { + let nextSlideIndex = this.visibleSlideIndex - 1; + + if (nextSlideIndex < 0) { + nextSlideIndex = this.slides.length - 1; + } + + this._setSlideVisibleWithAnimation(nextSlideIndex, ANIMATION_LEFT_CLASS); + } + + // Resize: + + _setSlideVisibleAndAllOthersNone(inputNode) { + this.slides.forEach(node => { + if (node === inputNode) { + node.style.display = 'block'; + } else { + node.style.display = 'none'; + } + }); + } + + _calculateContainerMinHeight() { + // we need to set carousel min height in case there are elements with different heights. + this.slides.forEach(node => { + this._setSlideVisibleAndAllOthersNone(node); + + if (node.clientHeight > this._carouselMinHeight) { + this._carouselMinHeight = node.clientHeight; + } + }); + + this._setSlideVisibleAndAllOthersNone(this.slides[this.visibleSlideIndex]); + } + // AutoRotate: + + _startAutoRotate() { + if ( + !this.autorotatedisabled && + !!this.autorotatetime === true && + // eslint-disable-next-line no-restricted-globals + !isNaN(this.autorotatetime) + ) { + this.autoRotateTimerID = setInterval(() => { + this._nextSlide(); + }, this.autorotatetime); + } + } + + _stopAutoRotate() { + clearInterval(this.autoRotateTimerID); + } + + // Swipe for mobile devices: + + _onSwipeLeft() { + this.handleNextButtonClick(); + } + + _onSwipeRight() { + this.handlePreviousButtonClick(); + } + + _initSwipe(usedElement = this) { + // usedElement as a property to encapsulate for unit tests + this.swiper = new Swipe( + usedElement, + usedElement._onSwipeLeft, + usedElement._onSwipeRight + ); + this.swiper.run(); + } + + _terminateSwipe() { + if (this.swiper && this.swiper.stop) { + this.swiper.stop(); + } + } + + // Key Navigation: + + _initKeyNavigation(usedDocument = this.ownerDocument) { + // usedDocument as a property to encapsulate for unit tests + if (this.keysenabled) { + usedDocument.addEventListener('keyup', this._handleKeyUp); + } + } + + _terminateKeyNavigation(usedDocument = this.ownerDocument) { + // usedDocument as a property to encapsulate for unit tests + usedDocument.removeEventListener('keyup', this._handleKeyUp); + } + + _handleKeyUp(ev) { + const e = ev || window.event; + + if (e.keyCode === 37) { + this.handlePreviousButtonClick(); + } else if (e.keyCode === 39) { + this.handleNextButtonClick(); + } + } + + firstUpdated() { + this.inlineStyles('childStyles'); + this.slides = this._getSlides(); + this._calculateContainerMinHeight(); + this._setSlideVisibleWithAnimation(0); + this._initSwipe(); + this._initKeyNavigation(); + this._startAutoRotate(); + this.removeEventListenerAnimationEnd = this._addEventListenerAnimationEnd(); + window.addEventListener('resize', this._onResize); + } + + render() { + return html` +
+ +
+ +
+ +
+ `; + } + + disconnectedCallback() { + super.disconnectedCallback(); + + this._stopAutoRotate(); + this._terminateSwipe(); + this._terminateKeyNavigation(); + window.removeEventListener('resize', this._onResize); + this.removeEventListenerAnimationEnd(); + } +} + +defineVersioned([AXACarousel], __VERSION_INFO__); + +export default AXACarousel; diff --git a/src/components/10-atoms/carousel/package.json b/src/components/10-atoms/carousel/package.json index dade7d8072..338f267e3a 100644 --- a/src/components/10-atoms/carousel/package.json +++ b/src/components/10-atoms/carousel/package.json @@ -5,18 +5,19 @@ "author": "Pattern Warriors", "homepage": "https://github.com/axa-ch-webhub-cloud/pattern-library/tree/develop/src/components/30-organisms/carousel#readme", "license": "Copyright 2019 AXA Versicherungen AG", - "scripts": { - "prepublishOnly": "../../../../scripts/build/prepublish.js", - "build": "rollup --silent --config ../../../../rollup.config.js", - "build-dist": "rollup --silent --config ../../../../rollup.config.dist.js", - "postpublish": "../../../../scripts/build/postpublish.js", - "watch": "rollup --watch --silent --config ../../../../rollup.config.js", - "genPackagelock": "npm i --package-lock-only" + "type": "module", + "main": "lib/index.js", + "exports": { + ".": "./lib/index.js" }, "files": [ - "lib", - "dist" + "lib" ], + "scripts": { + "build": "rollup --silent --config ../../../../rollup.config.cjs", + "watch": "rollup --watch --silent --config ../../../../rollup.config.cjs", + "genPackagelock": "npm i --package-lock-only" + }, "publishConfig": { "access": "public" }, diff --git a/src/components/10-atoms/carousel/story.js b/src/components/10-atoms/carousel/story.js index 100a0f3849..dcaed0b6fd 100644 --- a/src/components/10-atoms/carousel/story.js +++ b/src/components/10-atoms/carousel/story.js @@ -1,7 +1,7 @@ import { html } from 'lit'; import changelog from './CHANGELOG.md'; import readme from './README.md'; -import './index'; +import './index.wc.js'; export default { title: 'Components/Carousel', diff --git a/src/components/10-atoms/checkbox/demo.js b/src/components/10-atoms/checkbox/demo.js index 2af2832f5e..9884862e83 100644 --- a/src/components/10-atoms/checkbox/demo.js +++ b/src/components/10-atoms/checkbox/demo.js @@ -1,7 +1,7 @@ import { html } from 'lit'; import changelog from './CHANGELOG.md'; import readme from './README.md'; -import './index'; +import './index.wc.js'; export default { title: 'Examples/Checkbox/Pure HTML', diff --git a/src/components/10-atoms/checkbox/index.react.d.ts b/src/components/10-atoms/checkbox/index.d.ts similarity index 88% rename from src/components/10-atoms/checkbox/index.react.d.ts rename to src/components/10-atoms/checkbox/index.d.ts index 6a72ada6b6..9882b3953c 100644 --- a/src/components/10-atoms/checkbox/index.react.d.ts +++ b/src/components/10-atoms/checkbox/index.d.ts @@ -18,9 +18,7 @@ export interface AXACheckboxProps { onBlur?: (event: FocusEvent) => void; } -declare function createAXACheckbox( +declare function createAXACheckboxReact( createElement: typeof React.createElement, version?: string ): React.ComponentType; - -export default createAXACheckbox; diff --git a/src/components/10-atoms/checkbox/index.js b/src/components/10-atoms/checkbox/index.js index fd9fe5bb47..687b662efb 100644 --- a/src/components/10-atoms/checkbox/index.js +++ b/src/components/10-atoms/checkbox/index.js @@ -1,288 +1,5 @@ -import { html } from 'lit'; -import { unsafeHTML } from 'lit/directives/unsafe-html.js'; -import { classMap } from 'lit/directives/class-map.js'; -import { defineVersioned } from '../../../utils/component-versioning'; -import NoShadowDOM from '../../../utils/no-shadow'; -import applyDefaults from '../../../utils/apply-defaults'; -import styles from './index.scss'; -import createRefId from '../../../utils/create-ref-id'; +import AXACheckbox from './index.wc.js'; -// icon isolated from others, because it's a component specific icon -import CheckmarkHardEdgesSvg from './icon'; - -const CHECKMARK_ICON = unsafeHTML(CheckmarkHardEdgesSvg); -const REQUIRED_SYMBOL = '*'; - -class AXACheckbox extends NoShadowDOM { - static get tagName() { - return 'axa-checkbox'; - } - - static get properties() { - return { - refId: { type: String, defaultValue: `checkbox-${createRefId()}` }, - value: { type: String }, - name: { type: String, reflect: true }, - label: { type: String }, - styled: { type: Boolean, reflect: true }, - variant: { type: String, defaultValue: 'square' }, - required: { type: Boolean }, - checked: { - type: Boolean, - reflect: true, - defaultValue: undefined, // proper default for controlled-mode under React - }, - defaultChecked: { - type: Boolean, - }, - disabled: { type: Boolean, reflect: true }, - error: { - type: String, - reflect: true, - converter: { - toAttribute(value) { - return value ? String(value) : null; - }, - }, - }, - onChange: { type: Function, attribute: false }, - onBlur: { type: Function, attribute: false }, - onFocus: { type: Function, attribute: false }, - isReact: { type: Boolean }, - }; - } - - static get styles() { - return styles; - } - - constructor() { - super(); - // initialize model state - this.state = { - isControlled: false, - firstUpdate: true, - timer: null, - checked: false, - native: false, - }; - // detect absence of touch capabilities (to condition :hover styles) - if (!('ontouchstart' in document.documentElement)) { - this._noTouch = true; - } - // initialize properties - applyDefaults(this); - } - - // custom setter - set checked(value) { - const { - state: { isControlled, checked, firstUpdate }, - } = this; - // first incoming value indicates controlledness? - if (!isControlled && value !== undefined && firstUpdate) { - // yes, remember in model state - this.state.isControlled = true; - } - this.state.firstUpdate = false; - const oldValue = checked; - // remember value in model state - this.state.checked = value; - this.state.native = value; - // request re-render (custom setters need to do this themselves!) - this.requestUpdate('checked', oldValue); - } - - // custom getter - get checked() { - const { - state: { isControlled, checked, native }, - } = this; - return isControlled ? checked : native; - } - - handleChange(event) { - // initialize - const { onChange } = this; - // *schedule* a UI update from model state in the near future - // (if no changed prop value is seen, triggering re-rendering, - // that scheduled update actually happens!) - this.state.timer = setTimeout(() => this.updated('via-handleChange'), 0); - // set *uncontrolled* model state from native checkbox behaviour - this.state.native = event.target.checked; - // invoke event callback - onChange(event); - } - - handleSpacebar(e) { - // Key: Space - if (e.keyCode === 32) { - this.checked = !this.checked; - this.state.native = this.checked; - } - } - - // throttle re-rendering to once per animation frame - // (helps e.g. with static websites using this component together with static children - // (like my label), - // where those children (here, ) may not be DOM-constructed yet when using lit-element's default microtask timing!) - performUpdate() { - new Promise(resolve => - // eslint-disable-next-line no-promise-executor-return - window.requestAnimationFrame(() => resolve()) - ).then(() => super.performUpdate()); - } - - render() { - // extract props and state - const { - refId, - value, - name, - label = '', - variant, - checked, - disabled, - error = '', - required, - isReact, - state: { isControlled, timer }, - _childRoot = this.firstElementChild, - } = this; - - const isVariantInverted = variant.includes('inverted'); - const isVariantCheckmark = variant.includes('checkmark'); - - const classes = classMap({ - 'a-checkbox__icon': true, - 'js-checkbox__icon': true, - 'a-checkbox__icon--checkmark': isVariantCheckmark, - 'a-checkbox__icon--inverted': isVariantInverted, - }); - - const checkboxContentClasses = classMap({ - 'a-checkbox__content': true, - 'a-checkbox__content--inverted': isVariantInverted, - }); - - // now that we have the 'isReact' prop, determine if this - // component is a 'controlled input' in the *React* sense - const _isControlled = isControlled && isReact; - this.state.isControlled = _isControlled; - if (_isControlled) { - // cancel any scheduled UI update, since there is a real, - // changed prop value somewhere (likely 'checked') - clearTimeout(timer); - } - - const inputElements = html` - - - ${isVariantCheckmark - ? html` - ${CHECKMARK_ICON} - ` - : ``} - - `; - - const errorElement = - error && !disabled - ? html` ${unsafeHTML(error)} ` - : html``; - - if (_childRoot) { - // 1. harvest child content as live DOM (lit-html has documented support for text-content binding type 'DOM node') - // N.B. Using live DOM node here is crucial for React's DOM updating mechanism, e.g. for a

{updatedHere}

child root. - // 2. wrap it in

(aragraph tag), but with identical styling to - // prettier-ignore - this._label = html`

${_childRoot}

`; - } - - const renderLabel = this._label || (label ? unsafeHTML(label) : null); - - return renderLabel - ? html` - - ` - : html` - - `; - } - - firstUpdated() { - const { isReact, defaultChecked, _noTouch } = this; - if (isReact && defaultChecked) { - this.querySelector('input').checked = true; - this.state.native = true; - } - // first render has overwritten the child root - so prevent future child-root harvesting now - this._childRoot = null; - // mark non-touch devices (as detected in constructor) via hard-to-accidentallt-overwrite - // data- attribute, so that CSS can react to it - // (can't use a class because React users like to overwrite 'className', can't set in constructor - // because React expects attribute-free elements at construction time) - if (_noTouch) { - this.dataset.axaCheckboxNoTouch = ''; - } - } - - // this lifecycle method will regularly be called after render() - - // but also *indirectly* via the handleChange event handler! - updated(why) { - if (why === 'via-handleChange') { - this.state.firstUpdate = false; - } - const { - state: { isControlled, checked, native }, - } = this; - // coerce UI to conform with model state, - // no matter its native UI state - if (isControlled) { - this.querySelector('input').checked = checked; - return; - } - // correct reflection to attribute - if (native) { - this.setAttribute('checked', ''); - } else { - this.removeAttribute('checked'); - } - } -} - -defineVersioned([AXACheckbox], __VERSION_INFO__); +export { default as createAXACheckboxReact } from './index.react.js'; export default AXACheckbox; diff --git a/src/components/10-atoms/checkbox/index.react.js b/src/components/10-atoms/checkbox/index.react.js index cd8be53fa4..fa64694a91 100644 --- a/src/components/10-atoms/checkbox/index.react.js +++ b/src/components/10-atoms/checkbox/index.react.js @@ -1,5 +1,5 @@ -import withReact from '../../../utils/with-react'; -import AXACheckbox from './index'; +import withReact from '../../../utils/with-react.js'; +import AXACheckbox from './index.wc.js'; export default (createElement, version) => withReact(createElement, AXACheckbox, version); diff --git a/src/components/10-atoms/checkbox/index.wc.js b/src/components/10-atoms/checkbox/index.wc.js new file mode 100644 index 0000000000..7a52405a19 --- /dev/null +++ b/src/components/10-atoms/checkbox/index.wc.js @@ -0,0 +1,288 @@ +import { html } from 'lit'; +import { unsafeHTML } from 'lit/directives/unsafe-html.js'; +import { classMap } from 'lit/directives/class-map.js'; +import { defineVersioned } from '../../../utils/component-versioning.js'; +import NoShadowDOM from '../../../utils/no-shadow.js'; +import applyDefaults from '../../../utils/apply-defaults.js'; +import styles from './index.scss'; +import createRefId from '../../../utils/create-ref-id.js'; + +// icon isolated from others, because it's a component specific icon +import CheckmarkHardEdgesSvg from './icon/index.js'; + +const CHECKMARK_ICON = unsafeHTML(CheckmarkHardEdgesSvg); +const REQUIRED_SYMBOL = '*'; + +class AXACheckbox extends NoShadowDOM { + static get tagName() { + return 'axa-checkbox'; + } + + static get properties() { + return { + refId: { type: String, defaultValue: `checkbox-${createRefId()}` }, + value: { type: String }, + name: { type: String, reflect: true }, + label: { type: String }, + styled: { type: Boolean, reflect: true }, + variant: { type: String, defaultValue: 'square' }, + required: { type: Boolean }, + checked: { + type: Boolean, + reflect: true, + defaultValue: undefined, // proper default for controlled-mode under React + }, + defaultChecked: { + type: Boolean, + }, + disabled: { type: Boolean, reflect: true }, + error: { + type: String, + reflect: true, + converter: { + toAttribute(value) { + return value ? String(value) : null; + }, + }, + }, + onChange: { type: Function, attribute: false }, + onBlur: { type: Function, attribute: false }, + onFocus: { type: Function, attribute: false }, + isReact: { type: Boolean }, + }; + } + + static get styles() { + return styles; + } + + constructor() { + super(); + // initialize model state + this.state = { + isControlled: false, + firstUpdate: true, + timer: null, + checked: false, + native: false, + }; + // detect absence of touch capabilities (to condition :hover styles) + if (!('ontouchstart' in document.documentElement)) { + this._noTouch = true; + } + // initialize properties + applyDefaults(this); + } + + // custom setter + set checked(value) { + const { + state: { isControlled, checked, firstUpdate }, + } = this; + // first incoming value indicates controlledness? + if (!isControlled && value !== undefined && firstUpdate) { + // yes, remember in model state + this.state.isControlled = true; + } + this.state.firstUpdate = false; + const oldValue = checked; + // remember value in model state + this.state.checked = value; + this.state.native = value; + // request re-render (custom setters need to do this themselves!) + this.requestUpdate('checked', oldValue); + } + + // custom getter + get checked() { + const { + state: { isControlled, checked, native }, + } = this; + return isControlled ? checked : native; + } + + handleChange(event) { + // initialize + const { onChange } = this; + // *schedule* a UI update from model state in the near future + // (if no changed prop value is seen, triggering re-rendering, + // that scheduled update actually happens!) + this.state.timer = setTimeout(() => this.updated('via-handleChange'), 0); + // set *uncontrolled* model state from native checkbox behaviour + this.state.native = event.target.checked; + // invoke event callback + onChange(event); + } + + handleSpacebar(e) { + // Key: Space + if (e.keyCode === 32) { + this.checked = !this.checked; + this.state.native = this.checked; + } + } + + // throttle re-rendering to once per animation frame + // (helps e.g. with static websites using this component together with static children + // (like my label), + // where those children (here, ) may not be DOM-constructed yet when using lit-element's default microtask timing!) + performUpdate() { + new Promise(resolve => + // eslint-disable-next-line no-promise-executor-return + window.requestAnimationFrame(() => resolve()) + ).then(() => super.performUpdate()); + } + + render() { + // extract props and state + const { + refId, + value, + name, + label = '', + variant, + checked, + disabled, + error = '', + required, + isReact, + state: { isControlled, timer }, + _childRoot = this.firstElementChild, + } = this; + + const isVariantInverted = variant.includes('inverted'); + const isVariantCheckmark = variant.includes('checkmark'); + + const classes = classMap({ + 'a-checkbox__icon': true, + 'js-checkbox__icon': true, + 'a-checkbox__icon--checkmark': isVariantCheckmark, + 'a-checkbox__icon--inverted': isVariantInverted, + }); + + const checkboxContentClasses = classMap({ + 'a-checkbox__content': true, + 'a-checkbox__content--inverted': isVariantInverted, + }); + + // now that we have the 'isReact' prop, determine if this + // component is a 'controlled input' in the *React* sense + const _isControlled = isControlled && isReact; + this.state.isControlled = _isControlled; + if (_isControlled) { + // cancel any scheduled UI update, since there is a real, + // changed prop value somewhere (likely 'checked') + clearTimeout(timer); + } + + const inputElements = html` + + + ${isVariantCheckmark + ? html` + ${CHECKMARK_ICON} + ` + : ``} + + `; + + const errorElement = + error && !disabled + ? html` ${unsafeHTML(error)} ` + : html``; + + if (_childRoot) { + // 1. harvest child content as live DOM (lit-html has documented support for text-content binding type 'DOM node') + // N.B. Using live DOM node here is crucial for React's DOM updating mechanism, e.g. for a

{updatedHere}

child root. + // 2. wrap it in

(aragraph tag), but with identical styling to + // prettier-ignore + this._label = html`

${_childRoot}

`; + } + + const renderLabel = this._label || (label ? unsafeHTML(label) : null); + + return renderLabel + ? html` + + ` + : html` + + `; + } + + firstUpdated() { + const { isReact, defaultChecked, _noTouch } = this; + if (isReact && defaultChecked) { + this.querySelector('input').checked = true; + this.state.native = true; + } + // first render has overwritten the child root - so prevent future child-root harvesting now + this._childRoot = null; + // mark non-touch devices (as detected in constructor) via hard-to-accidentallt-overwrite + // data- attribute, so that CSS can react to it + // (can't use a class because React users like to overwrite 'className', can't set in constructor + // because React expects attribute-free elements at construction time) + if (_noTouch) { + this.dataset.axaCheckboxNoTouch = ''; + } + } + + // this lifecycle method will regularly be called after render() - + // but also *indirectly* via the handleChange event handler! + updated(why) { + if (why === 'via-handleChange') { + this.state.firstUpdate = false; + } + const { + state: { isControlled, checked, native }, + } = this; + // coerce UI to conform with model state, + // no matter its native UI state + if (isControlled) { + this.querySelector('input').checked = checked; + return; + } + // correct reflection to attribute + if (native) { + this.setAttribute('checked', ''); + } else { + this.removeAttribute('checked'); + } + } +} + +defineVersioned([AXACheckbox], __VERSION_INFO__); + +export default AXACheckbox; diff --git a/src/components/10-atoms/checkbox/package.json b/src/components/10-atoms/checkbox/package.json index a029ba4876..44f6c3c595 100644 --- a/src/components/10-atoms/checkbox/package.json +++ b/src/components/10-atoms/checkbox/package.json @@ -5,18 +5,19 @@ "author": "Pattern Warriors", "homepage": "https://github.com/axa-ch-webhub-cloud/pattern-library/tree/develop/src/components/10-atoms/checkbox#readme", "license": "Copyright 2019 AXA Versicherungen AG", - "scripts": { - "prepublishOnly": "../../../../scripts/build/prepublish.js", - "build": "rollup --silent --config ../../../../rollup.config.js", - "build-dist": "rollup --silent --config ../../../../rollup.config.dist.js", - "postpublish": "../../../../scripts/build/postpublish.js", - "watch": "rollup --watch --silent --config ../../../../rollup.config.js", - "genPackagelock": "npm i --package-lock-only" + "type": "module", + "main": "lib/index.js", + "exports": { + ".": "./lib/index.js" }, "files": [ - "lib", - "dist" + "lib" ], + "scripts": { + "build": "rollup --silent --config ../../../../rollup.config.cjs", + "watch": "rollup --watch --silent --config ../../../../rollup.config.cjs", + "genPackagelock": "npm i --package-lock-only" + }, "publishConfig": { "access": "public" }, diff --git a/src/components/10-atoms/checkbox/react/AXACheckboxReact.jsx b/src/components/10-atoms/checkbox/react/AXACheckboxReact.jsx index 06c32204b6..6e24450fb3 100644 --- a/src/components/10-atoms/checkbox/react/AXACheckboxReact.jsx +++ b/src/components/10-atoms/checkbox/react/AXACheckboxReact.jsx @@ -1,5 +1,5 @@ import { createElement } from 'react'; -import createAXACheckboxReact from '../index.react'; +import createAXACheckboxReact from '../index.react.js'; const AXACheckboxReact = createAXACheckboxReact(createElement); diff --git a/src/components/10-atoms/checkbox/react/DemoCheckboxCallbackProps.jsx b/src/components/10-atoms/checkbox/react/DemoCheckboxCallbackProps.jsx index 7cf3266491..76387c794b 100644 --- a/src/components/10-atoms/checkbox/react/DemoCheckboxCallbackProps.jsx +++ b/src/components/10-atoms/checkbox/react/DemoCheckboxCallbackProps.jsx @@ -1,5 +1,5 @@ import React, { useState } from 'react'; -import AXACheckbox from './AXACheckboxReact'; +import AXACheckbox from './AXACheckboxReact.jsx'; const DemoCheckboxCallbackProps = () => { const [frozen, setFrozen] = useState(false); diff --git a/src/components/10-atoms/checkbox/react/DemoCheckboxLabelAsChildren.jsx b/src/components/10-atoms/checkbox/react/DemoCheckboxLabelAsChildren.jsx index 9782480828..ca336832d4 100644 --- a/src/components/10-atoms/checkbox/react/DemoCheckboxLabelAsChildren.jsx +++ b/src/components/10-atoms/checkbox/react/DemoCheckboxLabelAsChildren.jsx @@ -1,5 +1,5 @@ import React, { useState } from 'react'; -import AXACheckbox from './AXACheckboxReact'; +import AXACheckbox from './AXACheckboxReact.jsx'; const DemoCheckboxLabelAsChildren = () => { const [checked, setChecked] = useState(false); diff --git a/src/components/10-atoms/checkbox/react/DemoUpdateLabelChildren.jsx b/src/components/10-atoms/checkbox/react/DemoUpdateLabelChildren.jsx index 3212602122..efbc924d7d 100644 --- a/src/components/10-atoms/checkbox/react/DemoUpdateLabelChildren.jsx +++ b/src/components/10-atoms/checkbox/react/DemoUpdateLabelChildren.jsx @@ -1,5 +1,5 @@ import React, { useState } from 'react'; -import AXACheckbox from './AXACheckboxReact'; +import AXACheckbox from './AXACheckboxReact.jsx'; export const App = () => { const [rerenders, setRerenders] = useState(1); diff --git a/src/components/10-atoms/checkbox/react/demo.jsx b/src/components/10-atoms/checkbox/react/demo.jsx index 4efbd2400e..9051bdcf75 100644 --- a/src/components/10-atoms/checkbox/react/demo.jsx +++ b/src/components/10-atoms/checkbox/react/demo.jsx @@ -1,10 +1,10 @@ import React from 'react'; import changelog from '../CHANGELOG.md'; import readme from '../README.md'; -import { createReactContainer } from '../../../../utils/create-react-container'; -import DemoCheckboxCallbackProps from './DemoCheckboxCallbackProps'; -import DemoCheckboxLabelAsChildren from './DemoCheckboxLabelAsChildren'; -import DemoUpdateLabelChildren from './DemoUpdateLabelChildren'; +import { createReactContainer } from '../../../../utils/create-react-container.jsx'; +import DemoCheckboxCallbackProps from './DemoCheckboxCallbackProps.jsx'; +import DemoCheckboxLabelAsChildren from './DemoCheckboxLabelAsChildren.jsx'; +import DemoUpdateLabelChildren from './DemoUpdateLabelChildren.jsx'; export default { title: 'Examples/Checkbox/React', diff --git a/src/components/10-atoms/checkbox/react/story.jsx b/src/components/10-atoms/checkbox/react/story.jsx index 2f132e0466..30d9a0f369 100644 --- a/src/components/10-atoms/checkbox/react/story.jsx +++ b/src/components/10-atoms/checkbox/react/story.jsx @@ -1,10 +1,10 @@ import React from 'react'; import changelog from '../CHANGELOG.md'; import readme from '../README.md'; -import { createReactContainer } from '../../../../utils/create-react-container'; -import { args, argTypes } from '../story.args'; -import AXATextReact from '../../text/react/AXATextReact'; -import AXACheckboxReact from './AXACheckboxReact'; +import { createReactContainer } from '../../../../utils/create-react-container.jsx'; +import { args, argTypes } from '../story.args.js'; +import AXATextReact from '../../text/react/AXATextReact.jsx'; +import AXACheckboxReact from './AXACheckboxReact.jsx'; export default { title: 'Examples/Checkbox/React', diff --git a/src/components/10-atoms/checkbox/react/test/basic/e2e.js b/src/components/10-atoms/checkbox/react/test/basic/e2e.js index 8344b1023d..bca30d45bf 100644 --- a/src/components/10-atoms/checkbox/react/test/basic/e2e.js +++ b/src/components/10-atoms/checkbox/react/test/basic/e2e.js @@ -1,5 +1,5 @@ import { expect, test } from '@playwright/test'; -import { fixtureURL } from '../../../../../../utils/e2e-helpers'; +import { fixtureURL } from '../../../../../../utils/e2e-helpers.cjs'; test.describe('checkbox react: basic', () => { test('should shows correct controlled behavior', async ({ page }) => { diff --git a/src/components/10-atoms/checkbox/story.args.js b/src/components/10-atoms/checkbox/story.args.js index 530b37214e..be7c8d5662 100644 --- a/src/components/10-atoms/checkbox/story.args.js +++ b/src/components/10-atoms/checkbox/story.args.js @@ -1,4 +1,4 @@ -import createRefId from '../../../utils/create-ref-id'; +import createRefId from '../../../utils/create-ref-id.js'; export const args = { refId: `checkbox-${createRefId()}`, diff --git a/src/components/10-atoms/checkbox/story.js b/src/components/10-atoms/checkbox/story.js index 0526634fff..1de9a0e871 100644 --- a/src/components/10-atoms/checkbox/story.js +++ b/src/components/10-atoms/checkbox/story.js @@ -1,8 +1,8 @@ import { html } from 'lit'; -import { args, argTypes } from './story.args'; +import { args, argTypes } from './story.args.js'; import changelog from './CHANGELOG.md'; import readme from './README.md'; -import './index'; +import './index.wc.js'; export default { title: 'Components/Checkbox', diff --git a/src/components/10-atoms/checkbox/test/basic/e2e.js b/src/components/10-atoms/checkbox/test/basic/e2e.js index 88eb857568..57423ceccb 100644 --- a/src/components/10-atoms/checkbox/test/basic/e2e.js +++ b/src/components/10-atoms/checkbox/test/basic/e2e.js @@ -1,5 +1,5 @@ import { expect, test } from '@playwright/test'; -import { fixtureURL } from '../../../../../utils/e2e-helpers'; +import { fixtureURL } from '../../../../../utils/e2e-helpers.cjs'; test.describe('checkbox: basic', () => { test('should be toggleable', async ({ page }) => { diff --git a/src/components/10-atoms/fieldset/demo.js b/src/components/10-atoms/fieldset/demo.js index ca5836b5bc..401f61cf72 100644 --- a/src/components/10-atoms/fieldset/demo.js +++ b/src/components/10-atoms/fieldset/demo.js @@ -1,9 +1,9 @@ import { html } from 'lit'; import changelog from './CHANGELOG.md'; import readme from './README.md'; -import './index'; -import '../radio'; -import '../text'; +import './index.wc.js'; +import '../radio/index.wc.js'; +import '../text/index.wc.js'; export default { title: 'Examples/Fieldset/Pure HTML', diff --git a/src/components/10-atoms/fieldset/index.react.d.ts b/src/components/10-atoms/fieldset/index.d.ts similarity index 77% rename from src/components/10-atoms/fieldset/index.react.d.ts rename to src/components/10-atoms/fieldset/index.d.ts index 9e77dcffcd..3f5bdb43fe 100644 --- a/src/components/10-atoms/fieldset/index.react.d.ts +++ b/src/components/10-atoms/fieldset/index.d.ts @@ -7,9 +7,9 @@ export interface AXAFieldsetProps { children?: React.ReactNode; } -declare function createAXAFieldset( +declare function createAXAFieldsetReact( createElement: typeof React.createElement, version?: string ): React.ComponentType; -export default createAXAFieldset; +export default createAXAFieldsetReact; diff --git a/src/components/10-atoms/fieldset/index.js b/src/components/10-atoms/fieldset/index.js index 2fd8942d8e..d90aaf3ca8 100644 --- a/src/components/10-atoms/fieldset/index.js +++ b/src/components/10-atoms/fieldset/index.js @@ -1,32 +1,5 @@ -import NoShadowDOM from '../../../utils/no-shadow'; +import AXAFieldset from './index.wc.js'; -import { defineVersioned } from '../../../utils/component-versioning'; -import applyDefaults from '../../../utils/apply-defaults'; -import styles from './index.scss'; - -class AXAFieldset extends NoShadowDOM { - static get tagName() { - return 'axa-fieldset'; - } - - static get styles() { - return styles; - } - - static get properties() { - return { - horizontal: { type: String, reflect: true, defaultValue: undefined }, - error: { type: String, reflect: true }, - slot: { type: String }, - }; - } - - constructor() { - super(); - applyDefaults(this); - } -} - -defineVersioned([AXAFieldset], __VERSION_INFO__); +export { default as createAXAFieldsetReact } from './index.react.js'; export default AXAFieldset; diff --git a/src/components/10-atoms/fieldset/index.react.js b/src/components/10-atoms/fieldset/index.react.js index 71b67886a6..50d9416f73 100644 --- a/src/components/10-atoms/fieldset/index.react.js +++ b/src/components/10-atoms/fieldset/index.react.js @@ -1,5 +1,5 @@ -import withReact from '../../../utils/with-react'; -import AXAFieldset from './index'; +import withReact from '../../../utils/with-react.js'; +import AXAFieldset from './index.wc.js'; export default (createElement, version) => withReact(createElement, AXAFieldset, version); diff --git a/src/components/10-atoms/fieldset/index.wc.js b/src/components/10-atoms/fieldset/index.wc.js new file mode 100644 index 0000000000..a0561c3d1b --- /dev/null +++ b/src/components/10-atoms/fieldset/index.wc.js @@ -0,0 +1,32 @@ +import NoShadowDOM from '../../../utils/no-shadow.js'; + +import { defineVersioned } from '../../../utils/component-versioning.js'; +import applyDefaults from '../../../utils/apply-defaults.js'; +import styles from './index.scss'; + +class AXAFieldset extends NoShadowDOM { + static get tagName() { + return 'axa-fieldset'; + } + + static get styles() { + return styles; + } + + static get properties() { + return { + horizontal: { type: String, reflect: true, defaultValue: undefined }, + error: { type: String, reflect: true }, + slot: { type: String }, + }; + } + + constructor() { + super(); + applyDefaults(this); + } +} + +defineVersioned([AXAFieldset], __VERSION_INFO__); + +export default AXAFieldset; diff --git a/src/components/10-atoms/fieldset/package.json b/src/components/10-atoms/fieldset/package.json index aafdceff16..a320821f9e 100644 --- a/src/components/10-atoms/fieldset/package.json +++ b/src/components/10-atoms/fieldset/package.json @@ -5,18 +5,19 @@ "author": "Pattern Warriors", "homepage": "https://github.com/axa-ch-webhub-cloud/pattern-library/tree/develop/src/components/10-atoms/fieldset#readme", "license": "Copyright 2019 AXA Versicherungen AG", - "scripts": { - "prepublishOnly": "../../../../scripts/build/prepublish.js", - "build": "rollup --silent --config ../../../../rollup.config.js", - "build-dist": "rollup --silent --config ../../../../rollup.config.dist.js", - "postpublish": "../../../../scripts/build/postpublish.js", - "watch": "rollup --watch --silent --config ../../../../rollup.config.js", - "genPackagelock": "npm i --package-lock-only" + "type": "module", + "main": "lib/index.js", + "exports": { + ".": "./lib/index.js" }, "files": [ - "lib", - "dist" + "lib" ], + "scripts": { + "build": "rollup --silent --config ../../../../rollup.config.cjs", + "watch": "rollup --watch --silent --config ../../../../rollup.config.cjs", + "genPackagelock": "npm i --package-lock-only" + }, "publishConfig": { "access": "public" }, diff --git a/src/components/10-atoms/fieldset/react/AXAFieldsetReact.jsx b/src/components/10-atoms/fieldset/react/AXAFieldsetReact.jsx index 30c041cc30..0f8c8e3b2c 100644 --- a/src/components/10-atoms/fieldset/react/AXAFieldsetReact.jsx +++ b/src/components/10-atoms/fieldset/react/AXAFieldsetReact.jsx @@ -1,5 +1,5 @@ import { createElement } from 'react'; -import createAXAFieldsetReact from '../index.react'; +import createAXAFieldsetReact from '../index.react.js'; const AXAFieldsetReact = createAXAFieldsetReact(createElement); diff --git a/src/components/10-atoms/fieldset/story.js b/src/components/10-atoms/fieldset/story.js index 19fed44f50..b50ef1ae4f 100644 --- a/src/components/10-atoms/fieldset/story.js +++ b/src/components/10-atoms/fieldset/story.js @@ -1,9 +1,9 @@ import { html } from 'lit'; import changelog from './CHANGELOG.md'; import readme from './README.md'; -import { args, argTypes } from './story.args'; -import './index'; -import '../checkbox'; +import { args, argTypes } from './story.args.js'; +import './index.wc.js'; +import '../checkbox/index.wc.js'; export default { title: 'Components/Fieldset', diff --git a/src/components/10-atoms/fieldset/test/basic/e2e.js b/src/components/10-atoms/fieldset/test/basic/e2e.js index 89f358cbb2..bf70cc64ea 100644 --- a/src/components/10-atoms/fieldset/test/basic/e2e.js +++ b/src/components/10-atoms/fieldset/test/basic/e2e.js @@ -1,5 +1,5 @@ import { test, expect } from '@playwright/test'; -import { fixtureURL } from '../../../../../utils/e2e-helpers'; +import { fixtureURL } from '../../../../../utils/e2e-helpers.cjs'; test.describe('fieldset: basic', () => { test('should render fieldset', async ({ page }) => { diff --git a/src/components/10-atoms/fieldset/test/error/e2e.js b/src/components/10-atoms/fieldset/test/error/e2e.js index 51ea0a88e9..2a3075ea61 100644 --- a/src/components/10-atoms/fieldset/test/error/e2e.js +++ b/src/components/10-atoms/fieldset/test/error/e2e.js @@ -1,5 +1,5 @@ import { expect, test } from '@playwright/test'; -import { fixtureURL } from '../../../../../utils/e2e-helpers'; +import { fixtureURL } from '../../../../../utils/e2e-helpers.cjs'; test.describe('fieldset: error', () => { test('should render an error message', async ({ page }) => { diff --git a/src/components/10-atoms/fieldset/test/horizontal/e2e.js b/src/components/10-atoms/fieldset/test/horizontal/e2e.js index 14e6f577d8..a41928c93e 100644 --- a/src/components/10-atoms/fieldset/test/horizontal/e2e.js +++ b/src/components/10-atoms/fieldset/test/horizontal/e2e.js @@ -1,5 +1,5 @@ import { expect, test } from '@playwright/test'; -import { fixtureURL } from '../../../../../utils/e2e-helpers'; +import { fixtureURL } from '../../../../../utils/e2e-helpers.cjs'; test.describe('fieldset: horizontal', () => { test('should render horizontally', async ({ page }) => { diff --git a/src/components/10-atoms/heading/index.react.d.ts b/src/components/10-atoms/heading/index.d.ts similarity index 81% rename from src/components/10-atoms/heading/index.react.d.ts rename to src/components/10-atoms/heading/index.d.ts index 63ebdc0c59..4878b84c25 100644 --- a/src/components/10-atoms/heading/index.react.d.ts +++ b/src/components/10-atoms/heading/index.d.ts @@ -8,9 +8,7 @@ export interface AXAHeadingProps { children?: React.ReactNode; } -declare function createAXAHeading( +declare function createAXAHeadingReact( createElement: typeof React.createElement, version?: string ): React.ComponentType; - -export default createAXAHeading; diff --git a/src/components/10-atoms/heading/index.js b/src/components/10-atoms/heading/index.js index 98b369acf3..fae4a02474 100644 --- a/src/components/10-atoms/heading/index.js +++ b/src/components/10-atoms/heading/index.js @@ -1,40 +1,5 @@ -import { LitElement, html, css, unsafeCSS } from 'lit'; -import { unsafeHTML } from 'lit/directives/unsafe-html.js'; +import AXAHeading from './index.wc.js'; -import { defineVersioned } from '../../../utils/component-versioning'; -import applyDefaults from '../../../utils/apply-defaults'; -import styles from './index.scss'; - -class AXAHeading extends LitElement { - static get tagName() { - return 'axa-heading'; - } - - static get styles() { - return css` - ${unsafeCSS(styles)} - `; - } - - static get properties() { - return { - secondary: { type: Boolean, reflect: true }, - size: { type: Number, reflect: true, defaultValue: 1 }, - }; - } - - constructor() { - super(); - applyDefaults(this); - } - - render() { - const template = ``; - - return html`${unsafeHTML(template)}`; - } -} - -defineVersioned([AXAHeading], __VERSION_INFO__); +export { default as createAXAHeadingReact } from './index.react.js'; export default AXAHeading; diff --git a/src/components/10-atoms/heading/index.react.js b/src/components/10-atoms/heading/index.react.js index 64ce576d86..b54ea46c21 100644 --- a/src/components/10-atoms/heading/index.react.js +++ b/src/components/10-atoms/heading/index.react.js @@ -1,5 +1,5 @@ -import withReact from '../../../utils/with-react'; -import AXAHeading from './index'; +import withReact from '../../../utils/with-react.js'; +import AXAHeading from './index.wc.js'; export default (createElement, version) => withReact(createElement, AXAHeading, version); diff --git a/src/components/10-atoms/heading/index.wc.js b/src/components/10-atoms/heading/index.wc.js new file mode 100644 index 0000000000..5c9f343dd2 --- /dev/null +++ b/src/components/10-atoms/heading/index.wc.js @@ -0,0 +1,40 @@ +import { LitElement, html, css, unsafeCSS } from 'lit'; +import { unsafeHTML } from 'lit/directives/unsafe-html.js'; + +import { defineVersioned } from '../../../utils/component-versioning.js'; +import applyDefaults from '../../../utils/apply-defaults.js'; +import styles from './index.scss'; + +class AXAHeading extends LitElement { + static get tagName() { + return 'axa-heading'; + } + + static get styles() { + return css` + ${unsafeCSS(styles)} + `; + } + + static get properties() { + return { + secondary: { type: Boolean, reflect: true }, + size: { type: Number, reflect: true, defaultValue: 1 }, + }; + } + + constructor() { + super(); + applyDefaults(this); + } + + render() { + const template = ``; + + return html`${unsafeHTML(template)}`; + } +} + +defineVersioned([AXAHeading], __VERSION_INFO__); + +export default AXAHeading; diff --git a/src/components/10-atoms/heading/package.json b/src/components/10-atoms/heading/package.json index 716ca32709..66696dfdee 100644 --- a/src/components/10-atoms/heading/package.json +++ b/src/components/10-atoms/heading/package.json @@ -5,18 +5,19 @@ "author": "Pattern Warriors", "homepage": "https://github.com/axa-ch-webhub-cloud/pattern-library/tree/develop/src/components/10-atoms/heading#readme", "license": "Copyright 2019 AXA Versicherungen AG", - "scripts": { - "prepublishOnly": "../../../../scripts/build/prepublish.js", - "build": "rollup --silent --config ../../../../rollup.config.js", - "build-dist": "rollup --silent --config ../../../../rollup.config.dist.js", - "postpublish": "../../../../scripts/build/postpublish.js", - "watch": "rollup --watch --silent --config ../../../../rollup.config.js", - "genPackagelock": "npm i --package-lock-only" + "type": "module", + "main": "lib/index.js", + "exports": { + ".": "./lib/index.js" }, "files": [ - "lib", - "dist" + "lib" ], + "scripts": { + "build": "rollup --silent --config ../../../../rollup.config.cjs", + "watch": "rollup --watch --silent --config ../../../../rollup.config.cjs", + "genPackagelock": "npm i --package-lock-only" + }, "publishConfig": { "access": "public" }, diff --git a/src/components/10-atoms/heading/story.js b/src/components/10-atoms/heading/story.js index 9bfd4698fb..19466c65d8 100644 --- a/src/components/10-atoms/heading/story.js +++ b/src/components/10-atoms/heading/story.js @@ -1,7 +1,7 @@ import { html } from 'lit'; import changelog from './CHANGELOG.md'; import readme from './README.md'; -import './index'; +import './index.wc.js'; const loremIpsum = `Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.`; diff --git a/src/components/10-atoms/heading/test/secondary/e2e.js b/src/components/10-atoms/heading/test/secondary/e2e.js index 5588f53947..7a6d614cd7 100644 --- a/src/components/10-atoms/heading/test/secondary/e2e.js +++ b/src/components/10-atoms/heading/test/secondary/e2e.js @@ -1,5 +1,5 @@ import { expect, test } from '@playwright/test'; -import { fixtureURL } from '../../../../../utils/e2e-helpers'; +import { fixtureURL } from '../../../../../utils/e2e-helpers.cjs'; test.describe('heading: secondary', () => { test(`should render heading secondary`, async ({ page }) => { diff --git a/src/components/10-atoms/heading/test/size/e2e.js b/src/components/10-atoms/heading/test/size/e2e.js index d3ac38d994..1936e82ca1 100644 --- a/src/components/10-atoms/heading/test/size/e2e.js +++ b/src/components/10-atoms/heading/test/size/e2e.js @@ -1,12 +1,12 @@ import { expect, test } from '@playwright/test'; -import { fixtureURL } from '../../../../../utils/e2e-helpers'; +import { fixtureURL } from '../../../../../utils/e2e-helpers.cjs'; import { headlinesDesktop, headlinesMobile, marginTopAndBottom, fontFamilyPrimary, getHeadingStyles, -} from './e2e.helpers'; +} from './e2e.helpers.js'; test.describe('heading: size:desktop', () => { for (const size of Object.keys(headlinesDesktop)) { diff --git a/src/components/10-atoms/icon/e2e.js b/src/components/10-atoms/icon/e2e.js index 00c211c5c4..68c5362a04 100644 --- a/src/components/10-atoms/icon/e2e.js +++ b/src/components/10-atoms/icon/e2e.js @@ -1,5 +1,5 @@ import { expect, test } from '@playwright/test'; -import { fixtureURL } from '../../../utils/e2e-helpers'; +import { fixtureURL } from '../../../utils/e2e-helpers.cjs'; test.describe('icon', () => { test('should not render icon', async ({ page }) => { diff --git a/src/components/10-atoms/icon/index.d.ts b/src/components/10-atoms/icon/index.d.ts index b5b8f2b85e..ab5fe2b223 100644 --- a/src/components/10-atoms/icon/index.d.ts +++ b/src/components/10-atoms/icon/index.d.ts @@ -1,3 +1,5 @@ +import React from 'react'; + export type Icon = | 'add' | 'arrow-left' @@ -17,3 +19,13 @@ export type Icon = | String; export type Size = 'small' | 'medium' | 'large' | 'original'; + +export interface AXAIconProps { + icon?: Icon; + size?: Size; +} + +declare function createAXAIconReact( + createElement: typeof React.createElement, + version?: string +): React.ComponentType; diff --git a/src/components/10-atoms/icon/index.js b/src/components/10-atoms/icon/index.js index 542387497b..fda0e81e98 100644 --- a/src/components/10-atoms/icon/index.js +++ b/src/components/10-atoms/icon/index.js @@ -1,103 +1,5 @@ -/* eslint-disable camelcase */ -import { LitElement, css, unsafeCSS } from 'lit'; -import { unsafeHTML } from 'lit/directives/unsafe-html.js'; +import AXAIcon from './index.wc.js'; -import { - Expand_lessSvg, - Insert_drive_fileSvg, - File_downloadSvg, - EmailSvg, - Expand_moreSvg, - Phone_iphoneSvg, - Local_phoneSvg, - AddSvg, - SearchSvg, - File_uploadSvg, - Cloud_uploadSvg, - Check_circleSvg, - CheckSvg, - Info_outlineSvg, - Warning_amberSvg, - CloudySvg, - CloseSvg, -} from '@axa-ch/materials/icons/material-design'; -import { ArrowRightSvg, ArrowLeftSvg } from '@axa-ch/materials/icons'; -import { AxaLogoSvg, AxaLogoOpenSvg } from '@axa-ch/materials/images'; -import iconCSS from './index.scss'; -import { defineVersioned } from '../../../utils/component-versioning'; -import applyDefaults from '../../../utils/apply-defaults'; -import { xhrCall } from '../../../utils/requests'; -import { sanitizeSVG } from '../../../utils/sanitize'; - -class AXAIcon extends LitElement { - static get tagName() { - return 'axa-icon'; - } - - static get styles() { - return css` - ${unsafeCSS(iconCSS)} - `; - } - - static get iconsMapping() { - return { - 'arrow-left': ArrowLeftSvg, - 'arrow-right': ArrowRightSvg, - collapse: Expand_lessSvg, - document: Insert_drive_fileSvg, - download: File_downloadSvg, - email: EmailSvg, - expand: Expand_moreSvg, - mobile: Phone_iphoneSvg, - phone: Local_phoneSvg, - add: AddSvg, - search: SearchSvg, - upload: File_uploadSvg, - 'cloud-upload': Cloud_uploadSvg, - 'axa-logo': AxaLogoSvg, - 'axa-logo-open': AxaLogoOpenSvg, - 'check-circle': Check_circleSvg, - check: CheckSvg, - 'info-outline': Info_outlineSvg, - 'warning-amber': Warning_amberSvg, - cloudy: CloudySvg, - close: CloseSvg, - }; - } - - static get properties() { - return { - icon: { type: String }, - size: { type: String, reflect: true, defaultValue: 'medium' }, - _loadedSvg: { type: String }, - }; - } - - constructor() { - super(); - applyDefaults(this); - } - - updated() { - const { icon } = this; - - if (/\.svg/.test(icon)) { - xhrCall(icon).then(result => { - this._loadedSvg = result; - }); - } else if (/; - -export default createAXAIcon; diff --git a/src/components/10-atoms/icon/index.react.js b/src/components/10-atoms/icon/index.react.js index 9ae7b2c3a8..f396cbf088 100644 --- a/src/components/10-atoms/icon/index.react.js +++ b/src/components/10-atoms/icon/index.react.js @@ -1,5 +1,5 @@ -import withReact from '../../../utils/with-react'; -import AXAIcon from './index'; +import withReact from '../../../utils/with-react.js'; +import AXAIcon from './index.wc.js'; export default (createElement, version) => withReact(createElement, AXAIcon, version); diff --git a/src/components/10-atoms/icon/index.wc.js b/src/components/10-atoms/icon/index.wc.js new file mode 100644 index 0000000000..108b59b983 --- /dev/null +++ b/src/components/10-atoms/icon/index.wc.js @@ -0,0 +1,103 @@ +/* eslint-disable camelcase */ +import { LitElement, css, unsafeCSS } from 'lit'; +import { unsafeHTML } from 'lit/directives/unsafe-html.js'; + +import { + Expand_lessSvg, + Insert_drive_fileSvg, + File_downloadSvg, + EmailSvg, + Expand_moreSvg, + Phone_iphoneSvg, + Local_phoneSvg, + AddSvg, + SearchSvg, + File_uploadSvg, + Cloud_uploadSvg, + Check_circleSvg, + CheckSvg, + Info_outlineSvg, + Warning_amberSvg, + CloudySvg, + CloseSvg, +} from '@axa-ch/materials/icons/material-design'; +import { ArrowRightSvg, ArrowLeftSvg } from '@axa-ch/materials/icons'; +import { AxaLogoSvg, AxaLogoOpenSvg } from '@axa-ch/materials/images'; +import iconCSS from './index.scss'; +import { defineVersioned } from '../../../utils/component-versioning.js'; +import applyDefaults from '../../../utils/apply-defaults.js'; +import { xhrCall } from '../../../utils/requests.js'; +import { sanitizeSVG } from '../../../utils/sanitize.js'; + +class AXAIcon extends LitElement { + static get tagName() { + return 'axa-icon'; + } + + static get styles() { + return css` + ${unsafeCSS(iconCSS)} + `; + } + + static get iconsMapping() { + return { + 'arrow-left': ArrowLeftSvg, + 'arrow-right': ArrowRightSvg, + collapse: Expand_lessSvg, + document: Insert_drive_fileSvg, + download: File_downloadSvg, + email: EmailSvg, + expand: Expand_moreSvg, + mobile: Phone_iphoneSvg, + phone: Local_phoneSvg, + add: AddSvg, + search: SearchSvg, + upload: File_uploadSvg, + 'cloud-upload': Cloud_uploadSvg, + 'axa-logo': AxaLogoSvg, + 'axa-logo-open': AxaLogoOpenSvg, + 'check-circle': Check_circleSvg, + check: CheckSvg, + 'info-outline': Info_outlineSvg, + 'warning-amber': Warning_amberSvg, + cloudy: CloudySvg, + close: CloseSvg, + }; + } + + static get properties() { + return { + icon: { type: String }, + size: { type: String, reflect: true, defaultValue: 'medium' }, + _loadedSvg: { type: String }, + }; + } + + constructor() { + super(); + applyDefaults(this); + } + + updated() { + const { icon } = this; + + if (/\.svg/.test(icon)) { + xhrCall(icon).then(result => { + this._loadedSvg = result; + }); + } else if (/ void; } -declare function createAXAInputFile( +declare function createAXAInputFileReact( createElement: typeof React.createElement, version?: string ): React.ComponentType; - -export default createAXAInputFile; diff --git a/src/components/10-atoms/input-file/index.js b/src/components/10-atoms/input-file/index.js index 159bc6db69..363ec1c95a 100644 --- a/src/components/10-atoms/input-file/index.js +++ b/src/components/10-atoms/input-file/index.js @@ -1,98 +1,5 @@ -import AXAIcon from '@axa-ch/icon'; -import { html } from 'lit'; -import { classMap } from 'lit/directives/class-map.js'; -import { - defineVersioned, - versionedHtml, -} from '../../../utils/component-versioning'; -import createRefId from '../../../utils/create-ref-id'; -import NoShadowDOM from '../../../utils/no-shadow'; -import applyDefaults from '../../../utils/apply-defaults'; -import styles from './index.scss'; +import AXAInputFile from './index.wc.js'; -const TYPE = 'file'; - -class AXAInputFile extends NoShadowDOM { - static get tagName() { - return 'axa-input-file'; - } - - static get styles() { - return styles; - } - - static get properties() { - return { - text: { type: String }, - variant: { type: String }, - icon: { type: String }, - refId: { type: String, defaultValue: `input-file-${createRefId()}` }, - large: { type: Boolean }, - motionOff: { type: Boolean }, - disabled: { type: Boolean, reflect: true }, - accept: { - type: String, - defaultValue: 'image/jpg, image/jpeg, application/pdf, image/png', - }, - capture: { type: Boolean }, - multiple: { type: Boolean }, - onChange: { type: Function, attribute: false }, - }; - } - - constructor() { - super(); - - applyDefaults(this); - - defineVersioned([AXAIcon], __VERSION_INFO__, this); - } - - render() { - const { - text = '', - large, - motionOff, - disabled, - variant = '', - icon = '', - accept, - capture, - multiple, - } = this; - - const classes = { - 'a-input-file--secondary': variant === 'secondary', - 'a-input-file--red': variant === 'red', - 'a-input-file--inverted': variant === 'inverted', - 'a-input-file--large': large, - 'a-input-file--motion': !motionOff, - 'a-input-file--disabled': disabled, - }; - - return html` - - ${icon && - versionedHtml(this)` - - `} - ${text} - - - - `; - } -} - -defineVersioned([AXAInputFile], __VERSION_INFO__); +export { default as createAXAInputFileReact } from './index.react.js'; export default AXAInputFile; diff --git a/src/components/10-atoms/input-file/index.react.js b/src/components/10-atoms/input-file/index.react.js index 9b4d751069..f6fedf0823 100644 --- a/src/components/10-atoms/input-file/index.react.js +++ b/src/components/10-atoms/input-file/index.react.js @@ -1,5 +1,5 @@ -import withReact from '../../../utils/with-react'; -import AXAInputFile from './index'; +import withReact from '../../../utils/with-react.js'; +import AXAInputFile from './index.wc.js'; export default (createElement, version) => withReact(createElement, AXAInputFile, version); diff --git a/src/components/10-atoms/input-file/index.wc.js b/src/components/10-atoms/input-file/index.wc.js new file mode 100644 index 0000000000..8df8eed584 --- /dev/null +++ b/src/components/10-atoms/input-file/index.wc.js @@ -0,0 +1,98 @@ +import AXAIcon from '@axa-ch/icon'; +import { html } from 'lit'; +import { classMap } from 'lit/directives/class-map.js'; +import { + defineVersioned, + versionedHtml, +} from '../../../utils/component-versioning.js'; +import createRefId from '../../../utils/create-ref-id.js'; +import NoShadowDOM from '../../../utils/no-shadow.js'; +import applyDefaults from '../../../utils/apply-defaults.js'; +import styles from './index.scss'; + +const TYPE = 'file'; + +class AXAInputFile extends NoShadowDOM { + static get tagName() { + return 'axa-input-file'; + } + + static get styles() { + return styles; + } + + static get properties() { + return { + text: { type: String }, + variant: { type: String }, + icon: { type: String }, + refId: { type: String, defaultValue: `input-file-${createRefId()}` }, + large: { type: Boolean }, + motionOff: { type: Boolean }, + disabled: { type: Boolean, reflect: true }, + accept: { + type: String, + defaultValue: 'image/jpg, image/jpeg, application/pdf, image/png', + }, + capture: { type: Boolean }, + multiple: { type: Boolean }, + onChange: { type: Function, attribute: false }, + }; + } + + constructor() { + super(); + + applyDefaults(this); + + defineVersioned([AXAIcon], __VERSION_INFO__, this); + } + + render() { + const { + text = '', + large, + motionOff, + disabled, + variant = '', + icon = '', + accept, + capture, + multiple, + } = this; + + const classes = { + 'a-input-file--secondary': variant === 'secondary', + 'a-input-file--red': variant === 'red', + 'a-input-file--inverted': variant === 'inverted', + 'a-input-file--large': large, + 'a-input-file--motion': !motionOff, + 'a-input-file--disabled': disabled, + }; + + return html` + + + `; + } +} + +defineVersioned([AXAInputFile], __VERSION_INFO__); + +export default AXAInputFile; diff --git a/src/components/10-atoms/input-file/package.json b/src/components/10-atoms/input-file/package.json index 09b547dc91..314e07204a 100644 --- a/src/components/10-atoms/input-file/package.json +++ b/src/components/10-atoms/input-file/package.json @@ -5,18 +5,19 @@ "author": "Pattern Warriors", "homepage": "https://github.com/axa-ch-webhub-cloud/pattern-library/tree/develop/src/components/10-atoms/input-file#readme", "license": "Copyright 2019 AXA Versicherungen AG", - "scripts": { - "prepublishOnly": "../../../../scripts/build/prepublish.js", - "build": "rollup --silent --config ../../../../rollup.config.js", - "build-dist": "rollup --silent --config ../../../../rollup.config.dist.js", - "postpublish": "../../../../scripts/build/postpublish.js", - "watch": "rollup --watch --silent --config ../../../../rollup.config.js", - "genPackagelock": "npm i --package-lock-only" + "type": "module", + "main": "lib/index.js", + "exports": { + ".": "./lib/index.js" }, "files": [ - "lib", - "dist" + "lib" ], + "scripts": { + "build": "rollup --silent --config ../../../../rollup.config.cjs", + "watch": "rollup --watch --silent --config ../../../../rollup.config.cjs", + "genPackagelock": "npm i --package-lock-only" + }, "publishConfig": { "access": "public" }, diff --git a/src/components/10-atoms/input-file/react/AXAInputFileReact.jsx b/src/components/10-atoms/input-file/react/AXAInputFileReact.jsx index 3c46a94e45..89533de33e 100644 --- a/src/components/10-atoms/input-file/react/AXAInputFileReact.jsx +++ b/src/components/10-atoms/input-file/react/AXAInputFileReact.jsx @@ -1,5 +1,5 @@ import { createElement } from 'react'; -import createAXAInputFileReact from '../index.react'; +import createAXAInputFileReact from '../index.react.js'; const AXAInputFileReact = createAXAInputFileReact(createElement); diff --git a/src/components/10-atoms/input-file/react/story.jsx b/src/components/10-atoms/input-file/react/story.jsx index 76470e3d7a..e432727b4f 100644 --- a/src/components/10-atoms/input-file/react/story.jsx +++ b/src/components/10-atoms/input-file/react/story.jsx @@ -1,10 +1,10 @@ import React from 'react'; -import { args, argTypes } from '../story.args'; +import { args, argTypes } from '../story.args.js'; import changelog from '../CHANGELOG.md'; import readme from '../README.md'; import AXATextReact from '../../text/react/AXATextReact'; import AXAInputFileReact from './AXAInputFileReact'; -import { createReactContainer } from '../../../../utils/create-react-container'; +import { createReactContainer } from '../../../../utils/create-react-container.jsx'; export default { title: 'Examples/Input File/React', diff --git a/src/components/10-atoms/input-file/react/test/basic/e2e.js b/src/components/10-atoms/input-file/react/test/basic/e2e.js index 770392b284..91b4c9a476 100644 --- a/src/components/10-atoms/input-file/react/test/basic/e2e.js +++ b/src/components/10-atoms/input-file/react/test/basic/e2e.js @@ -1,5 +1,5 @@ import { expect, test } from '@playwright/test'; -import { fixtureURL } from '../../../../../../utils/e2e-helpers'; +import { fixtureURL } from '../../../../../../utils/e2e-helpers.cjs'; test.describe('input-file react: basic', () => { test('should render input-file', async ({ page }) => { diff --git a/src/components/10-atoms/input-file/story.args.js b/src/components/10-atoms/input-file/story.args.js index b7e35eacad..071936fbf2 100644 --- a/src/components/10-atoms/input-file/story.args.js +++ b/src/components/10-atoms/input-file/story.args.js @@ -1,4 +1,4 @@ -import { iconList } from '@axa-ch/icon/icon-list'; +import { iconList } from '../icon/icon-list.js'; export const args = { text: 'Select a File', diff --git a/src/components/10-atoms/input-file/story.js b/src/components/10-atoms/input-file/story.js index 6b60ba595a..0214941d5f 100644 --- a/src/components/10-atoms/input-file/story.js +++ b/src/components/10-atoms/input-file/story.js @@ -1,8 +1,8 @@ import { html } from 'lit'; import changelog from './CHANGELOG.md'; import readme from './README.md'; -import { args, argTypes } from './story.args'; -import './index'; +import { args, argTypes } from './story.args.js'; +import './index.wc.js'; export default { title: 'Components/Input File', diff --git a/src/components/10-atoms/input-file/test/basic/e2e.js b/src/components/10-atoms/input-file/test/basic/e2e.js index cc0a03bc3f..ca01ab4018 100644 --- a/src/components/10-atoms/input-file/test/basic/e2e.js +++ b/src/components/10-atoms/input-file/test/basic/e2e.js @@ -1,5 +1,5 @@ import { expect, test } from '@playwright/test'; -import { fixtureURL } from '../../../../../utils/e2e-helpers'; +import { fixtureURL } from '../../../../../utils/e2e-helpers.cjs'; test.describe('input-file: basic', () => { test('should render icon', async ({ page }) => { diff --git a/src/components/10-atoms/input-file/test/icon/e2e.js b/src/components/10-atoms/input-file/test/icon/e2e.js index e33f19d4d6..9865570d9a 100644 --- a/src/components/10-atoms/input-file/test/icon/e2e.js +++ b/src/components/10-atoms/input-file/test/icon/e2e.js @@ -1,5 +1,5 @@ import { expect, test } from '@playwright/test'; -import { fixtureURL } from '../../../../../utils/e2e-helpers'; +import { fixtureURL } from '../../../../../utils/e2e-helpers.cjs'; test.describe('input-file: icon', () => { test('should render icon', async ({ page }) => { diff --git a/src/components/10-atoms/input-text/demo.js b/src/components/10-atoms/input-text/demo.js index 86177506fc..1d4ee9bc73 100644 --- a/src/components/10-atoms/input-text/demo.js +++ b/src/components/10-atoms/input-text/demo.js @@ -1,7 +1,7 @@ import changelog from './CHANGELOG.md'; import readme from './README.md'; -import './index'; -import '../text'; +import './index.wc.js'; +import '../text/index.wc.js'; export default { title: 'Examples/Input text/Pure HTML', diff --git a/src/components/10-atoms/input-text/index.react.d.ts b/src/components/10-atoms/input-text/index.d.ts similarity index 93% rename from src/components/10-atoms/input-text/index.react.d.ts rename to src/components/10-atoms/input-text/index.d.ts index 860de7f139..a6d5bb4e3a 100644 --- a/src/components/10-atoms/input-text/index.react.d.ts +++ b/src/components/10-atoms/input-text/index.d.ts @@ -37,9 +37,7 @@ export interface AXAInputTextProps { onPaste?: (event: ClipboardEvent) => void; } -declare function createAXAInputText( +declare function createAXAInputTextReact( createElement: typeof React.createElement, version?: string ): React.ComponentType; - -export default createAXAInputText; diff --git a/src/components/10-atoms/input-text/index.js b/src/components/10-atoms/input-text/index.js index 55a6c50428..12c168a558 100644 --- a/src/components/10-atoms/input-text/index.js +++ b/src/components/10-atoms/input-text/index.js @@ -1,447 +1,5 @@ -import { AXAPopupButton, AXAPopupContent, AXAPopupMixin } from '@axa-ch/popup'; -import { html } from 'lit'; -import { classMap } from 'lit/directives/class-map.js'; -import { unsafeHTML } from 'lit/directives/unsafe-html.js'; -import { - defineVersioned, - versionedHtml, -} from '../../../utils/component-versioning'; -import createRefId from '../../../utils/create-ref-id'; -import NoShadowDOM from '../../../utils/no-shadow'; -import applyDefaults from '../../../utils/apply-defaults'; -import styles from './index.scss'; +import AXAInputText from './index.wc.js'; -const PATTERN_DEFAULT = '.*'; - -class AXAInputText extends AXAPopupMixin(NoShadowDOM) { - static get tagName() { - return 'axa-input-text'; - } - - static get properties() { - return { - refId: { type: String, defaultValue: `input-text-${createRefId()}` }, - name: { type: String }, - label: { type: String }, - required: { type: Boolean }, - placeholder: { type: String }, - value: { type: String, defaultValue: undefined }, // proper default for controlled-mode under React - defaultValue: { type: String }, - type: { type: String, defaultValue: 'text' }, - error: { type: String }, - info: { type: String }, - invalid: { type: Boolean }, - checkMark: { type: Boolean }, - disabled: { type: Boolean, reflect: true }, - isReact: { type: Boolean }, - autocomplete: { type: Boolean }, - modelCounter: { type: String }, - counter: { type: String }, - counterMax: { type: String }, - maxLength: { - /** - * Only create a Number when there is an actual value passed. If an - * empty "maxvalue" is used, it would otherwise convert to the type - * Number with the value 0 and the user would not be able write - * anything. - */ - converter: value => - // eslint-disable-next-line no-restricted-globals - !isNaN(parseFloat(value)) && isFinite(value) - ? Number(value) - : undefined, - }, - inputmode: { type: String }, - currency: { type: String }, - pattern: { - // pattern="" or pattern="undefined" can cause problems on validating a form. Because of that set a RegEx that allows everything in that case. - converter: value => value || PATTERN_DEFAULT, - }, - autofocus: { type: Boolean }, - readonly: { type: Boolean }, - onChange: { type: Function, attribute: false }, - onFocus: { type: Function, attribute: false }, - onBlur: { type: Function, attribute: false }, - onKeyDown: { type: Function, attribute: false }, - onKeyUp: { type: Function, attribute: false }, - onPaste: { type: Function, attribute: false }, - }; - } - - static get styles() { - return styles; - } - - constructor() { - super(); - applyDefaults(this); - this.handleFocus = this.handleFocus.bind(this); - this.handleBlur = this.handleBlur.bind(this); - this.handleInput = this.handleInput.bind(this); - // internal properties - this.nativeInput = { value: '' }; - this.modelValue = ''; - this.isControlled = false; - this.isPlaceholderInCounter = false; - this.invalidFormat = false; - - const enrichedVersionInfo = __VERSION_INFO__; // This object is different at webpack and rollup build! - const commonPopupVersion = - enrichedVersionInfo['axa-input-text']['axa-popup']; - enrichedVersionInfo[AXAPopupButton.tagName] = { - [AXAPopupButton.tagName]: commonPopupVersion, - }; - enrichedVersionInfo[AXAPopupContent.tagName] = { - [AXAPopupContent.tagName]: commonPopupVersion, - }; - defineVersioned( - [AXAPopupButton, AXAPopupContent], - enrichedVersionInfo, - this - ); - } - - get charsLeft() { - const { - maxLength = 0, - nativeInput: { value: nativeValue }, - } = this; - - if (nativeValue) { - return maxLength - nativeValue.length; - } - - return maxLength; - } - - get areCharsLeft() { - return this.charsLeft > 0; - } - - get showCounter() { - return ( - this.maxLength > 0 && - !(this.invalid || this.invalidFormat) && - this.areCharsLeft && - this.counter && - !this.disabled && - !this.readonly - ); - } - - get showCounterMax() { - return ( - this.maxLength > 0 && - this.counterMax && - !this.showError && - !this.areCharsLeft && - !this.disabled && - !this.readonly - ); - } - - get getCounterText() { - const userCharsLeft = this.charsLeft - 1; - - if (this.counter && this.isPlaceholderInCounter) { - return this.counter.replace(/##.*##/, userCharsLeft); - } - - if (this.counter) { - return `${userCharsLeft} ${this.counter}`; - } - - return userCharsLeft; - } - - set value(val) { - const { isControlled } = this; - if (!isControlled && val !== undefined) { - this.isControlled = true; - } - const oldVal = this.modelValue; - this.modelValue = val; - this.requestUpdate('value', oldVal); - } - - get value() { - // When applyDefaults() is called inside the constructor, nativeInput - // does not exist yet. - if (!this.nativeInput) { - return ''; - } - - const { - isControlled, - modelValue, - nativeInput: { value: nativeValue }, - } = this; - - return isControlled ? modelValue : nativeValue; - } - - get showError() { - return ( - this.error && - (this.invalid || this.invalidFormat) && - !this.disabled && - !this._open - ); - } - - get showCheckMark() { - return this.checkMark && this.charsLeft !== 0; - } - - focus(options = {}) { - this.nativeInput.focus(options); - this.nativeInput.classList.add('focus'); - } - - blur() { - this.nativeInput.blur(); - this.nativeInput.classList.remove('focus'); - } - - handleFocus(ev) { - this.nativeInput.classList.add('focus'); - this.onFocus(ev); - } - - handleBlur(ev) { - this.nativeInput.value = this._formatCurrency(this.value); - this.modelCounter = this.getCounterText; // update the chars left counter after formatting the input - - this.nativeInput.classList.remove('focus'); - this.onBlur(ev); - } - - handleInput(ev) { - const { selectionStart = null } = ev.target; - - // sets this.invalidFormat - this._formatCurrency(ev.target.value); - this.onChange(ev, this.invalidFormat); - // are we a 'controlled' input in the React sense? - if (this.isControlled) { - // yes, set UI from model state - this.nativeInput.value = this.modelValue; - - requestAnimationFrame(() => { - this.nativeInput.setSelectionRange(selectionStart, selectionStart); - }); - } - - // means that a automatic prefelling function did fill it. Re-evaluate the component - // if a user types the chars, the charsLeft always decrease incrementally. With - // autocomplete instead is decreased all at once, therefore truncate it - if (this.charsLeft < 0 && this.maxLength) { - const { nativeInput } = this; - const valueCutToMaxLength = nativeInput.value.substring( - 0, - this.maxLength - 1 - ); - - // set value of native input element - nativeInput.value = valueCutToMaxLength; - // set model value - this.modelValue = valueCutToMaxLength; - // request update with the new value - this.requestUpdate('value', valueCutToMaxLength); - } - - if (this.maxLength) { - this.modelCounter = this.getCounterText; - } - } - - _setNativeInput() { - this.nativeInput = this.querySelector('input'); - } - - _formatCurrency(value) { - const { currency, type } = this; - - if (currency && type === 'text') { - const hasAtLeastOneDigit = /\d/.test(value); - - if (!this.currencyFormatter) { - // just create a new Intl if it does not exist - this.currencyFormatter = new Intl.NumberFormat('de-CH', { - style: 'currency', - currency, - }); - } - - if (hasAtLeastOneDigit) { - const valueDecimalsOnly = value.replace(/[^0-9.]/g, ''); - - // eslint-disable-next-line no-restricted-globals - if (!isNaN(valueDecimalsOnly)) { - this.invalidFormat = false; - return this.currencyFormatter.format(valueDecimalsOnly); - } - } - - this.invalidFormat = value.length > 0; - } - - return value; - } - - firstUpdated() { - const { defaultValue, isReact } = this; - this._setNativeInput(); - - if (isReact && defaultValue) { - this.nativeInput.value = this._formatCurrency(defaultValue); - } - - this.isPlaceholderInCounter = this.counter && /##.*##/.test(this.counter); - this.modelCounter = this.getCounterText; - - if (this.autofocus) { - this.focus(); - } - } - - updated() { - this._setNativeInput(); - } - - render() { - const { - name, - required, - value, - label = '', - error = '', - info = '', - type = '', - placeholder = '', - disabled, - isReact, - maxLength = '', - invalid, - readonly, - invalidFormat, - checkMark, - isControlled, - refId, - autocomplete, - inputmode = '', - pattern = PATTERN_DEFAULT, // if we do not set a default value here the result on DOM is pattern="undefined", that causes problems on validating a form - _open, - } = this; - - let formattedValue = value; - // Do not format the value if the user is still typing. We will format its input on blur - if (document.activeElement !== this.nativeInput) { - formattedValue = this._formatCurrency(value); - } - - this.isControlled = isControlled && isReact; - - const inputClasses = { - 'a-input-text__input': true, - 'a-input-text__input--readonly': readonly, - 'a-input-text__input--error': - ((invalid || invalidFormat) && !disabled) || this.showCounterMax, - 'a-input-text__input--check': - checkMark && !this.showCounterMax && !disabled, - }; - - return html` - ${ - label && - html` - - ` - } -
-
- ${html``} - ${ - this.showCheckMark - ? html` ` - : '' - } -
- ${ - info && - versionedHtml(this)` - - ` - } -
- ${ - this.showError - ? html` ${error} ` - : '' - } - ${ - this.showCounter - ? html` -
- ${this.modelCounter} -
- ` - : '' - } - ${ - this.showCounterMax - ? html` -
- ${this.counterMax} -
- ` - : '' - } - - ${ - info - ? versionedHtml(this)` - - ${unsafeHTML(info)} - - ` - : '' - } - `; - } -} - -defineVersioned([AXAInputText], __VERSION_INFO__); +export { default as createAXAInputTextReact } from './index.react.js'; export default AXAInputText; diff --git a/src/components/10-atoms/input-text/index.react.js b/src/components/10-atoms/input-text/index.react.js index 292641f82b..b7dff91963 100644 --- a/src/components/10-atoms/input-text/index.react.js +++ b/src/components/10-atoms/input-text/index.react.js @@ -1,5 +1,5 @@ -import withReact from '../../../utils/with-react'; -import AXAInputText from './index'; +import withReact from '../../../utils/with-react.js'; +import AXAInputText from './index.wc.js'; export default (createElement, version) => withReact(createElement, AXAInputText, version); diff --git a/src/components/10-atoms/input-text/index.wc.js b/src/components/10-atoms/input-text/index.wc.js new file mode 100644 index 0000000000..3f677eda31 --- /dev/null +++ b/src/components/10-atoms/input-text/index.wc.js @@ -0,0 +1,447 @@ +import { AXAPopupButton, AXAPopupContent, AXAPopupMixin } from '@axa-ch/popup'; +import { html } from 'lit'; +import { classMap } from 'lit/directives/class-map.js'; +import { unsafeHTML } from 'lit/directives/unsafe-html.js'; +import { + defineVersioned, + versionedHtml, +} from '../../../utils/component-versioning.js'; +import createRefId from '../../../utils/create-ref-id.js'; +import NoShadowDOM from '../../../utils/no-shadow.js'; +import applyDefaults from '../../../utils/apply-defaults.js'; +import styles from './index.scss'; + +const PATTERN_DEFAULT = '.*'; + +class AXAInputText extends AXAPopupMixin(NoShadowDOM) { + static get tagName() { + return 'axa-input-text'; + } + + static get properties() { + return { + refId: { type: String, defaultValue: `input-text-${createRefId()}` }, + name: { type: String }, + label: { type: String }, + required: { type: Boolean }, + placeholder: { type: String }, + value: { type: String, defaultValue: undefined }, // proper default for controlled-mode under React + defaultValue: { type: String }, + type: { type: String, defaultValue: 'text' }, + error: { type: String }, + info: { type: String }, + invalid: { type: Boolean }, + checkMark: { type: Boolean }, + disabled: { type: Boolean, reflect: true }, + isReact: { type: Boolean }, + autocomplete: { type: Boolean }, + modelCounter: { type: String }, + counter: { type: String }, + counterMax: { type: String }, + maxLength: { + /** + * Only create a Number when there is an actual value passed. If an + * empty "maxvalue" is used, it would otherwise convert to the type + * Number with the value 0 and the user would not be able write + * anything. + */ + converter: value => + // eslint-disable-next-line no-restricted-globals + !isNaN(parseFloat(value)) && isFinite(value) + ? Number(value) + : undefined, + }, + inputmode: { type: String }, + currency: { type: String }, + pattern: { + // pattern="" or pattern="undefined" can cause problems on validating a form. Because of that set a RegEx that allows everything in that case. + converter: value => value || PATTERN_DEFAULT, + }, + autofocus: { type: Boolean }, + readonly: { type: Boolean }, + onChange: { type: Function, attribute: false }, + onFocus: { type: Function, attribute: false }, + onBlur: { type: Function, attribute: false }, + onKeyDown: { type: Function, attribute: false }, + onKeyUp: { type: Function, attribute: false }, + onPaste: { type: Function, attribute: false }, + }; + } + + static get styles() { + return styles; + } + + constructor() { + super(); + applyDefaults(this); + this.handleFocus = this.handleFocus.bind(this); + this.handleBlur = this.handleBlur.bind(this); + this.handleInput = this.handleInput.bind(this); + // internal properties + this.nativeInput = { value: '' }; + this.modelValue = ''; + this.isControlled = false; + this.isPlaceholderInCounter = false; + this.invalidFormat = false; + + const enrichedVersionInfo = __VERSION_INFO__; // This object is different at webpack and rollup build! + const commonPopupVersion = + enrichedVersionInfo['axa-input-text']['axa-popup']; + enrichedVersionInfo[AXAPopupButton.tagName] = { + [AXAPopupButton.tagName]: commonPopupVersion, + }; + enrichedVersionInfo[AXAPopupContent.tagName] = { + [AXAPopupContent.tagName]: commonPopupVersion, + }; + defineVersioned( + [AXAPopupButton, AXAPopupContent], + enrichedVersionInfo, + this + ); + } + + get charsLeft() { + const { + maxLength = 0, + nativeInput: { value: nativeValue }, + } = this; + + if (nativeValue) { + return maxLength - nativeValue.length; + } + + return maxLength; + } + + get areCharsLeft() { + return this.charsLeft > 0; + } + + get showCounter() { + return ( + this.maxLength > 0 && + !(this.invalid || this.invalidFormat) && + this.areCharsLeft && + this.counter && + !this.disabled && + !this.readonly + ); + } + + get showCounterMax() { + return ( + this.maxLength > 0 && + this.counterMax && + !this.showError && + !this.areCharsLeft && + !this.disabled && + !this.readonly + ); + } + + get getCounterText() { + const userCharsLeft = this.charsLeft - 1; + + if (this.counter && this.isPlaceholderInCounter) { + return this.counter.replace(/##.*##/, userCharsLeft); + } + + if (this.counter) { + return `${userCharsLeft} ${this.counter}`; + } + + return userCharsLeft; + } + + set value(val) { + const { isControlled } = this; + if (!isControlled && val !== undefined) { + this.isControlled = true; + } + const oldVal = this.modelValue; + this.modelValue = val; + this.requestUpdate('value', oldVal); + } + + get value() { + // When applyDefaults() is called inside the constructor, nativeInput + // does not exist yet. + if (!this.nativeInput) { + return ''; + } + + const { + isControlled, + modelValue, + nativeInput: { value: nativeValue }, + } = this; + + return isControlled ? modelValue : nativeValue; + } + + get showError() { + return ( + this.error && + (this.invalid || this.invalidFormat) && + !this.disabled && + !this._open + ); + } + + get showCheckMark() { + return this.checkMark && this.charsLeft !== 0; + } + + focus(options = {}) { + this.nativeInput.focus(options); + this.nativeInput.classList.add('focus'); + } + + blur() { + this.nativeInput.blur(); + this.nativeInput.classList.remove('focus'); + } + + handleFocus(ev) { + this.nativeInput.classList.add('focus'); + this.onFocus(ev); + } + + handleBlur(ev) { + this.nativeInput.value = this._formatCurrency(this.value); + this.modelCounter = this.getCounterText; // update the chars left counter after formatting the input + + this.nativeInput.classList.remove('focus'); + this.onBlur(ev); + } + + handleInput(ev) { + const { selectionStart = null } = ev.target; + + // sets this.invalidFormat + this._formatCurrency(ev.target.value); + this.onChange(ev, this.invalidFormat); + // are we a 'controlled' input in the React sense? + if (this.isControlled) { + // yes, set UI from model state + this.nativeInput.value = this.modelValue; + + requestAnimationFrame(() => { + this.nativeInput.setSelectionRange(selectionStart, selectionStart); + }); + } + + // means that a automatic prefelling function did fill it. Re-evaluate the component + // if a user types the chars, the charsLeft always decrease incrementally. With + // autocomplete instead is decreased all at once, therefore truncate it + if (this.charsLeft < 0 && this.maxLength) { + const { nativeInput } = this; + const valueCutToMaxLength = nativeInput.value.substring( + 0, + this.maxLength - 1 + ); + + // set value of native input element + nativeInput.value = valueCutToMaxLength; + // set model value + this.modelValue = valueCutToMaxLength; + // request update with the new value + this.requestUpdate('value', valueCutToMaxLength); + } + + if (this.maxLength) { + this.modelCounter = this.getCounterText; + } + } + + _setNativeInput() { + this.nativeInput = this.querySelector('input'); + } + + _formatCurrency(value) { + const { currency, type } = this; + + if (currency && type === 'text') { + const hasAtLeastOneDigit = /\d/.test(value); + + if (!this.currencyFormatter) { + // just create a new Intl if it does not exist + this.currencyFormatter = new Intl.NumberFormat('de-CH', { + style: 'currency', + currency, + }); + } + + if (hasAtLeastOneDigit) { + const valueDecimalsOnly = value.replace(/[^0-9.]/g, ''); + + // eslint-disable-next-line no-restricted-globals + if (!isNaN(valueDecimalsOnly)) { + this.invalidFormat = false; + return this.currencyFormatter.format(valueDecimalsOnly); + } + } + + this.invalidFormat = value.length > 0; + } + + return value; + } + + firstUpdated() { + const { defaultValue, isReact } = this; + this._setNativeInput(); + + if (isReact && defaultValue) { + this.nativeInput.value = this._formatCurrency(defaultValue); + } + + this.isPlaceholderInCounter = this.counter && /##.*##/.test(this.counter); + this.modelCounter = this.getCounterText; + + if (this.autofocus) { + this.focus(); + } + } + + updated() { + this._setNativeInput(); + } + + render() { + const { + name, + required, + value, + label = '', + error = '', + info = '', + type = '', + placeholder = '', + disabled, + isReact, + maxLength = '', + invalid, + readonly, + invalidFormat, + checkMark, + isControlled, + refId, + autocomplete, + inputmode = '', + pattern = PATTERN_DEFAULT, // if we do not set a default value here the result on DOM is pattern="undefined", that causes problems on validating a form + _open, + } = this; + + let formattedValue = value; + // Do not format the value if the user is still typing. We will format its input on blur + if (document.activeElement !== this.nativeInput) { + formattedValue = this._formatCurrency(value); + } + + this.isControlled = isControlled && isReact; + + const inputClasses = { + 'a-input-text__input': true, + 'a-input-text__input--readonly': readonly, + 'a-input-text__input--error': + ((invalid || invalidFormat) && !disabled) || this.showCounterMax, + 'a-input-text__input--check': + checkMark && !this.showCounterMax && !disabled, + }; + + return html` + ${ + label && + html` + + ` + } +
+
+ ${html``} + ${ + this.showCheckMark + ? html` ` + : '' + } +
+ ${ + info && + versionedHtml(this)` + + ` + } +
+ ${ + this.showError + ? html` ${error} ` + : '' + } + ${ + this.showCounter + ? html` +
+ ${this.modelCounter} +
+ ` + : '' + } + ${ + this.showCounterMax + ? html` +
+ ${this.counterMax} +
+ ` + : '' + } + + ${ + info + ? versionedHtml(this)` + + ${unsafeHTML(info)} + + ` + : '' + } + `; + } +} + +defineVersioned([AXAInputText], __VERSION_INFO__); + +export default AXAInputText; diff --git a/src/components/10-atoms/input-text/package.json b/src/components/10-atoms/input-text/package.json index 503b09e7a9..02c29d9d66 100644 --- a/src/components/10-atoms/input-text/package.json +++ b/src/components/10-atoms/input-text/package.json @@ -5,21 +5,19 @@ "author": "Pattern Warriors", "homepage": "https://github.com/axa-ch-webhub-cloud/pattern-library/tree/develop/src/components/10-atoms/input-text#readme", "license": "Copyright 2019 AXA Versicherungen AG", - "directories": { - "lib": "lib" + "type": "module", + "main": "lib/index.js", + "exports": { + ".": "./lib/index.js" }, + "files": [ + "lib" + ], "scripts": { - "prepublishOnly": "../../../../scripts/build/prepublish.js", - "build": "rollup --silent --config ../../../../rollup.config.js", - "build-dist": "rollup --silent --config ../../../../rollup.config.dist.js", - "postpublish": "../../../../scripts/build/postpublish.js", - "watch": "rollup --watch --silent --config ../../../../rollup.config.js", + "build": "rollup --silent --config ../../../../rollup.config.cjs", + "watch": "rollup --watch --silent --config ../../../../rollup.config.cjs", "genPackagelock": "npm i --package-lock-only" }, - "files": [ - "lib", - "dist" - ], "publishConfig": { "access": "public" }, diff --git a/src/components/10-atoms/input-text/react/AXAInputText.jsx b/src/components/10-atoms/input-text/react/AXAInputText.jsx index 3ba69a8a17..8b94bd0deb 100644 --- a/src/components/10-atoms/input-text/react/AXAInputText.jsx +++ b/src/components/10-atoms/input-text/react/AXAInputText.jsx @@ -1,5 +1,5 @@ import { createElement } from 'react'; -import createAXAInputText from '../index.react'; +import createAXAInputText from '../index.react.js'; const AXAInputText = createAXAInputText(createElement); diff --git a/src/components/10-atoms/input-text/react/demo.jsx b/src/components/10-atoms/input-text/react/demo.jsx index c413428383..1c3a89547a 100644 --- a/src/components/10-atoms/input-text/react/demo.jsx +++ b/src/components/10-atoms/input-text/react/demo.jsx @@ -1,5 +1,5 @@ import React from 'react'; -import { createReactContainer } from '../../../../utils/create-react-container'; +import { createReactContainer } from '../../../../utils/create-react-container.jsx'; import changelog from '../CHANGELOG.md'; import readme from '../README.md'; import DemoInputText from './DemoInputText'; diff --git a/src/components/10-atoms/input-text/react/story.jsx b/src/components/10-atoms/input-text/react/story.jsx index 507b0e7078..7d917805b6 100644 --- a/src/components/10-atoms/input-text/react/story.jsx +++ b/src/components/10-atoms/input-text/react/story.jsx @@ -1,6 +1,6 @@ import React, { useState } from 'react'; -import { createReactContainer } from '../../../../utils/create-react-container'; -import { args, argTypes } from '../story.args'; +import { createReactContainer } from '../../../../utils/create-react-container.jsx'; +import { args, argTypes } from '../story.args.js'; import changelog from '../CHANGELOG.md'; import readme from '../README.md'; import AXAInputText from './AXAInputText'; diff --git a/src/components/10-atoms/input-text/react/test/basic/e2e.js b/src/components/10-atoms/input-text/react/test/basic/e2e.js index 342cddb415..530332ab35 100644 --- a/src/components/10-atoms/input-text/react/test/basic/e2e.js +++ b/src/components/10-atoms/input-text/react/test/basic/e2e.js @@ -1,6 +1,6 @@ import { expect, test } from '@playwright/test'; -import { fixtureURL } from '../../../../../../utils/e2e-helpers'; +import { fixtureURL } from '../../../../../../utils/e2e-helpers.cjs'; test.describe('input-text react: basic', () => { test('should fire onKeyDown callback on user input', async ({ page }) => { diff --git a/src/components/10-atoms/input-text/story.js b/src/components/10-atoms/input-text/story.js index da0bb3a3cf..a8311abaad 100644 --- a/src/components/10-atoms/input-text/story.js +++ b/src/components/10-atoms/input-text/story.js @@ -1,8 +1,8 @@ import { html } from 'lit'; -import { args, argTypes } from './story.args'; +import { args, argTypes } from './story.args.js'; import changelog from './CHANGELOG.md'; import readme from './README.md'; -import './index'; +import './index.wc.js'; export default { title: 'Components/Input Text', diff --git a/src/components/10-atoms/input-text/test/autocomplete/e2e.js b/src/components/10-atoms/input-text/test/autocomplete/e2e.js index bc816abc31..0108861799 100644 --- a/src/components/10-atoms/input-text/test/autocomplete/e2e.js +++ b/src/components/10-atoms/input-text/test/autocomplete/e2e.js @@ -1,5 +1,5 @@ import { expect, test } from '@playwright/test'; -import { fixtureURL } from '../../../../../utils/e2e-helpers'; +import { fixtureURL } from '../../../../../utils/e2e-helpers.cjs'; test.describe('input-text: autocomplete', () => { test('should enable autocomplete', async ({ page }) => { diff --git a/src/components/10-atoms/input-text/test/basic/e2e.js b/src/components/10-atoms/input-text/test/basic/e2e.js index 12609aaf34..a36ee72961 100644 --- a/src/components/10-atoms/input-text/test/basic/e2e.js +++ b/src/components/10-atoms/input-text/test/basic/e2e.js @@ -1,6 +1,6 @@ import { expect, test } from '@playwright/test'; -import { fixtureURL } from '../../../../../utils/e2e-helpers'; +import { fixtureURL } from '../../../../../utils/e2e-helpers.cjs'; test.describe('input-text: basic', () => { test('should type something input-text', async ({ page }) => { diff --git a/src/components/10-atoms/input-text/test/readonly/e2e.js b/src/components/10-atoms/input-text/test/readonly/e2e.js index 56a9763420..33f38e23e6 100644 --- a/src/components/10-atoms/input-text/test/readonly/e2e.js +++ b/src/components/10-atoms/input-text/test/readonly/e2e.js @@ -1,5 +1,5 @@ import { expect, test } from '@playwright/test'; -import { fixtureURL } from '../../../../../utils/e2e-helpers'; +import { fixtureURL } from '../../../../../utils/e2e-helpers.cjs'; test.describe('input-text: readonly', () => { test('should be readonly', async ({ page }) => { diff --git a/src/components/10-atoms/link/index.react.d.ts b/src/components/10-atoms/link/index.d.ts similarity index 94% rename from src/components/10-atoms/link/index.react.d.ts rename to src/components/10-atoms/link/index.d.ts index 8da5b5a3fe..49f420d0c3 100644 --- a/src/components/10-atoms/link/index.react.d.ts +++ b/src/components/10-atoms/link/index.d.ts @@ -41,9 +41,7 @@ export type SharedProps = { export type AXALinkProps = SharedProps & ({ variant?: Variant } | { variant: IconVariant; icon: Icon }); -declare function createAXALink( +declare function createAXALinkReact( createElement: typeof React.createElement, version?: string ): React.ComponentType; - -export default createAXALink; diff --git a/src/components/10-atoms/link/index.js b/src/components/10-atoms/link/index.js index 8bd4a0b6c0..b6715c44c7 100644 --- a/src/components/10-atoms/link/index.js +++ b/src/components/10-atoms/link/index.js @@ -1,118 +1,5 @@ -import { LitElement, html, css, unsafeCSS } from 'lit'; -import { classMap } from 'lit/directives/class-map.js'; -import AXAIcon from '@axa-ch/icon'; -import { - defineVersioned, - versionedHtml, -} from '../../../utils/component-versioning'; -import applyDefaults from '../../../utils/apply-defaults'; -import linkCSS from './index.scss'; +import AXALink from './index.wc.js'; -class AXALink extends LitElement { - static get tagName() { - return 'axa-link'; - } - - static get styles() { - return css` - ${unsafeCSS(linkCSS)} - `; - } - - // N.B. onClick deliberately not declared here, since - // its use inside render() is guarded appropriately - static get properties() { - return { - href: { type: String }, - variant: { type: String }, - icon: { type: String }, - external: { type: Boolean }, - }; - } - - constructor() { - super(); - applyDefaults(this); - - defineVersioned([AXAIcon], __VERSION_INFO__, this); - } - - render() { - const { variant } = this; - - const isSimple = - variant && - variant !== 'hyperlink-white' && - variant !== 'hyperlink-white-underline'; - - const isIcon = - variant.includes('arrowleft') || - variant.includes('arrowright') || - variant.includes('icon'); - - const isRed = variant.includes('red') && !variant.includes('white'); - - const islinkWhite = variant === 'hyperlink-white'; - - const islinkWhiteUnderline = variant === 'hyperlink-white-underline'; - - const isWhite = - variant.includes('white') && - !variant.includes('red') && - !variant.includes('hyperlink'); - - const isMotion = - variant.includes('arrowleft-animated') || - variant.includes('arrowright-animated'); - - const classes = { - 'a-link': true, - 'a-link--simple': isSimple, - 'a-link--icon': isIcon, - 'a-link--red': isRed, - 'a-link--hyperlink-white': islinkWhite, - 'a-link--hyperlink-white-underline': islinkWhiteUnderline, - 'a-link--white': isWhite, - 'a-link--motion': isMotion, - }; - - // Prettier sets the closing template string literal on a new line, which causes a whitespace after the link. - // This whole HTML structure should not be changed easily! Depending on how you format it, icons will no longer - // be displayed and other weird stuff. - // prettier-ignore - return html` - - ${this.variant.includes('arrowleft') - ? versionedHtml(this)`` - : ''} - ${this.icon && - this.variant.includes('icon') && - !this.variant.includes('arrow') - ? versionedHtml(this)`` - : ''} - ${this.variant.includes('arrowright') - ? versionedHtml(this)`` - : ''}`; - } -} - -defineVersioned([AXALink], __VERSION_INFO__); +export { default as createAXALinkReact } from './index.react.js'; export default AXALink; diff --git a/src/components/10-atoms/link/index.react.js b/src/components/10-atoms/link/index.react.js index e70e88ab19..0e282a0303 100644 --- a/src/components/10-atoms/link/index.react.js +++ b/src/components/10-atoms/link/index.react.js @@ -1,5 +1,5 @@ -import withReact from '../../../utils/with-react'; -import AXALink from './index'; +import withReact from '../../../utils/with-react.js'; +import AXALink from './index.wc.js'; export default (createElement, version) => withReact(createElement, AXALink, version); diff --git a/src/components/10-atoms/link/index.wc.js b/src/components/10-atoms/link/index.wc.js new file mode 100644 index 0000000000..3ac88db2ee --- /dev/null +++ b/src/components/10-atoms/link/index.wc.js @@ -0,0 +1,118 @@ +import { LitElement, html, css, unsafeCSS } from 'lit'; +import { classMap } from 'lit/directives/class-map.js'; +import AXAIcon from '@axa-ch/icon'; +import { + defineVersioned, + versionedHtml, +} from '../../../utils/component-versioning.js'; +import applyDefaults from '../../../utils/apply-defaults.js'; +import linkCSS from './index.scss'; + +class AXALink extends LitElement { + static get tagName() { + return 'axa-link'; + } + + static get styles() { + return css` + ${unsafeCSS(linkCSS)} + `; + } + + // N.B. onClick deliberately not declared here, since + // its use inside render() is guarded appropriately + static get properties() { + return { + href: { type: String }, + variant: { type: String }, + icon: { type: String }, + external: { type: Boolean }, + }; + } + + constructor() { + super(); + applyDefaults(this); + + defineVersioned([AXAIcon], __VERSION_INFO__, this); + } + + render() { + const { variant } = this; + + const isSimple = + variant && + variant !== 'hyperlink-white' && + variant !== 'hyperlink-white-underline'; + + const isIcon = + variant.includes('arrowleft') || + variant.includes('arrowright') || + variant.includes('icon'); + + const isRed = variant.includes('red') && !variant.includes('white'); + + const islinkWhite = variant === 'hyperlink-white'; + + const islinkWhiteUnderline = variant === 'hyperlink-white-underline'; + + const isWhite = + variant.includes('white') && + !variant.includes('red') && + !variant.includes('hyperlink'); + + const isMotion = + variant.includes('arrowleft-animated') || + variant.includes('arrowright-animated'); + + const classes = { + 'a-link': true, + 'a-link--simple': isSimple, + 'a-link--icon': isIcon, + 'a-link--red': isRed, + 'a-link--hyperlink-white': islinkWhite, + 'a-link--hyperlink-white-underline': islinkWhiteUnderline, + 'a-link--white': isWhite, + 'a-link--motion': isMotion, + }; + + // Prettier sets the closing template string literal on a new line, which causes a whitespace after the link. + // This whole HTML structure should not be changed easily! Depending on how you format it, icons will no longer + // be displayed and other weird stuff. + // prettier-ignore + return html` + + ${this.variant.includes('arrowleft') + ? versionedHtml(this)`` + : ''} + ${this.icon && + this.variant.includes('icon') && + !this.variant.includes('arrow') + ? versionedHtml(this)`` + : ''} + ${this.variant.includes('arrowright') + ? versionedHtml(this)`` + : ''}`; + } +} + +defineVersioned([AXALink], __VERSION_INFO__); + +export default AXALink; diff --git a/src/components/10-atoms/link/package.json b/src/components/10-atoms/link/package.json index 482cb758e4..523536f011 100644 --- a/src/components/10-atoms/link/package.json +++ b/src/components/10-atoms/link/package.json @@ -5,21 +5,19 @@ "author": "Pattern Warriors", "homepage": "https://github.com/axa-ch-webhub-cloud/pattern-library/blob/develop/src/components/10-atoms/link/README.md", "license": "Copyright 2019 AXA Versicherungen AG", - "scripts": { - "prepublishOnly": "../../../../scripts/build/prepublish.js", - "build": "rollup --silent --config ../../../../rollup.config.js", - "build-dist": "rollup --silent --config ../../../../rollup.config.dist.js", - "postpublish": "../../../../scripts/build/postpublish.js", - "watch": "rollup --watch --silent --config ../../../../rollup.config.js", - "genPackagelock": "npm i --package-lock-only" - }, - "directories": { - "lib": "lib" + "type": "module", + "main": "lib/index.js", + "exports": { + ".": "./lib/index.js" }, "files": [ - "lib", - "dist" + "lib" ], + "scripts": { + "build": "rollup --silent --config ../../../../rollup.config.cjs", + "watch": "rollup --watch --silent --config ../../../../rollup.config.cjs", + "genPackagelock": "npm i --package-lock-only" + }, "publishConfig": { "access": "public" }, diff --git a/src/components/10-atoms/link/react/AXALinkReact.jsx b/src/components/10-atoms/link/react/AXALinkReact.jsx index 771af7dd32..359f3d9073 100644 --- a/src/components/10-atoms/link/react/AXALinkReact.jsx +++ b/src/components/10-atoms/link/react/AXALinkReact.jsx @@ -1,5 +1,5 @@ import { createElement } from 'react'; -import createAXALinkReact from '../index.react'; +import createAXALinkReact from '../index.react.js'; const AXALinkReact = createAXALinkReact(createElement); diff --git a/src/components/10-atoms/link/react/demo.jsx b/src/components/10-atoms/link/react/demo.jsx index 0fb790143e..ca5770a3de 100644 --- a/src/components/10-atoms/link/react/demo.jsx +++ b/src/components/10-atoms/link/react/demo.jsx @@ -1,5 +1,5 @@ import React from 'react'; -import { createReactContainer } from '../../../../utils/create-react-container'; +import { createReactContainer } from '../../../../utils/create-react-container.jsx'; import changelog from '../CHANGELOG.md'; import readme from '../README.md'; import DemoLink from './DemoLink'; diff --git a/src/components/10-atoms/link/react/story.jsx b/src/components/10-atoms/link/react/story.jsx index 69fd6d4990..5560b02e35 100644 --- a/src/components/10-atoms/link/react/story.jsx +++ b/src/components/10-atoms/link/react/story.jsx @@ -1,6 +1,6 @@ import React from 'react'; -import { createReactContainer } from '../../../../utils/create-react-container'; -import { args, argTypes } from '../story.args'; +import { createReactContainer } from '../../../../utils/create-react-container.jsx'; +import { args, argTypes } from '../story.args.js'; import changelog from '../CHANGELOG.md'; import readme from '../README.md'; import AXALinkReact from './AXALinkReact'; diff --git a/src/components/10-atoms/link/react/test/icon/e2e.js b/src/components/10-atoms/link/react/test/icon/e2e.js index bfb22f2f81..b998a6ac53 100644 --- a/src/components/10-atoms/link/react/test/icon/e2e.js +++ b/src/components/10-atoms/link/react/test/icon/e2e.js @@ -1,5 +1,5 @@ import { expect, test } from '@playwright/test'; -import { fixtureURL } from '../../../../../../utils/e2e-helpers'; +import { fixtureURL } from '../../../../../../utils/e2e-helpers.cjs'; test.describe('link react: icon', () => { test('should be block element, if icon is present', async ({ page }) => { diff --git a/src/components/10-atoms/link/story.args.js b/src/components/10-atoms/link/story.args.js index ccfd94ee6a..88d187376c 100644 --- a/src/components/10-atoms/link/story.args.js +++ b/src/components/10-atoms/link/story.args.js @@ -1,4 +1,4 @@ -import { iconList } from '@axa-ch/icon/icon-list'; +import { iconList } from '../icon/icon-list.js'; export const args = { href: 'https%3A%2F%2Fwww.axa.ch%2Fen%2Finformation%2Fdata-protection.html', diff --git a/src/components/10-atoms/link/story.js b/src/components/10-atoms/link/story.js index f9632f521c..97c997190a 100644 --- a/src/components/10-atoms/link/story.js +++ b/src/components/10-atoms/link/story.js @@ -1,8 +1,8 @@ import { html } from 'lit'; -import { args, argTypes } from './story.args'; +import { args, argTypes } from './story.args.js'; import changelog from './CHANGELOG.md'; import readme from './README.md'; -import './index'; +import './index.wc.js'; export default { title: 'Components/Link', diff --git a/src/components/10-atoms/link/test/basic/e2e.js b/src/components/10-atoms/link/test/basic/e2e.js index b4556287d2..d17b8a0400 100644 --- a/src/components/10-atoms/link/test/basic/e2e.js +++ b/src/components/10-atoms/link/test/basic/e2e.js @@ -1,5 +1,5 @@ import { expect, test } from '@playwright/test'; -import { fixtureURL } from '../../../../../utils/e2e-helpers'; +import { fixtureURL } from '../../../../../utils/e2e-helpers.cjs'; test.describe('link: basic', () => { test('should display default correctly', async ({ page }) => { diff --git a/src/components/10-atoms/progress-bar/e2e.js b/src/components/10-atoms/progress-bar/e2e.js index 252a543a26..81b80bb69b 100644 --- a/src/components/10-atoms/progress-bar/e2e.js +++ b/src/components/10-atoms/progress-bar/e2e.js @@ -1,5 +1,5 @@ import { expect, test } from '@playwright/test'; -import { fixtureURL } from '../../../utils/e2e-helpers'; +import { fixtureURL } from '../../../utils/e2e-helpers.cjs'; test.describe('progress-bar', () => { test('should be small', async ({ page }) => { diff --git a/src/components/10-atoms/progress-bar/index.react.d.ts b/src/components/10-atoms/progress-bar/index.d.ts similarity index 79% rename from src/components/10-atoms/progress-bar/index.react.d.ts rename to src/components/10-atoms/progress-bar/index.d.ts index 682c0b74dd..548f4fec2e 100644 --- a/src/components/10-atoms/progress-bar/index.react.d.ts +++ b/src/components/10-atoms/progress-bar/index.d.ts @@ -9,9 +9,7 @@ export interface AXAProgressBarProps { text?: string; } -declare function createAXAProgressBar( +declare function createAXAProgressBarReact( createElement: typeof React.createElement, version?: string ): React.ComponentType; - -export default createAXAProgressBar; diff --git a/src/components/10-atoms/progress-bar/index.js b/src/components/10-atoms/progress-bar/index.js index ff9f06b92d..92f2feb4df 100644 --- a/src/components/10-atoms/progress-bar/index.js +++ b/src/components/10-atoms/progress-bar/index.js @@ -1,81 +1,5 @@ -import { LitElement, html, css, unsafeCSS } from 'lit'; -import { classMap } from 'lit/directives/class-map.js'; -import { defineVersioned } from '../../../utils/component-versioning'; -import applyDefaults from '../../../utils/apply-defaults'; -import styles from './index.scss'; +import AXAProgressBar from './index.wc.js'; -class AXAProgressBar extends LitElement { - static get tagName() { - return 'axa-progress-bar'; - } - - static get styles() { - return css` - ${unsafeCSS(styles)} - `; - } - - static get properties() { - return { - small: { type: Boolean, defaultValue: false }, - noBorderRadius: { type: Boolean }, - value: { type: Number }, - max: { type: Number }, - text: { type: String }, - }; - } - - constructor() { - super(); - applyDefaults(this); - } - - calculatePercantage() { - if (this.max !== 0) { - if (this.value > this.max) { - return 100; - } - return (this.value / this.max) * 100; - } - if (this.value > 100) { - return 100; - } - return this.value; - } - - render() { - const classesBorder = { - 'a-progress-bar__small': this.small, - 'a-progress-bar__border--no-border-radius': this.noBorderRadius, - }; - - const classesLoader = { - 'a-progress-bar__small': this.small, - 'a-progress-bar__loader--no-border-radius': this.noBorderRadius, - 'a-progress-bar__loader--no-border-radius-max': - this.noBorderRadius && this.value >= (this.max === 0 ? 100 : this.max), - }; - - return html` -
-
-
-
-
- ${this.text} -
-
- `; - } -} - -defineVersioned([AXAProgressBar], __VERSION_INFO__); +export { default as createAXAProgressBarReact } from './index.react.js'; export default AXAProgressBar; diff --git a/src/components/10-atoms/progress-bar/index.react.js b/src/components/10-atoms/progress-bar/index.react.js index d5b3e41889..58ac0e5b44 100644 --- a/src/components/10-atoms/progress-bar/index.react.js +++ b/src/components/10-atoms/progress-bar/index.react.js @@ -1,5 +1,5 @@ -import withReact from '../../../utils/with-react'; -import AXAProgressBar from './index'; +import withReact from '../../../utils/with-react.js'; +import AXAProgressBar from './index.wc.js'; export default (createElement, version) => withReact(createElement, AXAProgressBar, version); diff --git a/src/components/10-atoms/progress-bar/index.wc.js b/src/components/10-atoms/progress-bar/index.wc.js new file mode 100644 index 0000000000..fa0a58265d --- /dev/null +++ b/src/components/10-atoms/progress-bar/index.wc.js @@ -0,0 +1,81 @@ +import { LitElement, html, css, unsafeCSS } from 'lit'; +import { classMap } from 'lit/directives/class-map.js'; +import { defineVersioned } from '../../../utils/component-versioning.js'; +import applyDefaults from '../../../utils/apply-defaults.js'; +import styles from './index.scss'; + +class AXAProgressBar extends LitElement { + static get tagName() { + return 'axa-progress-bar'; + } + + static get styles() { + return css` + ${unsafeCSS(styles)} + `; + } + + static get properties() { + return { + small: { type: Boolean, defaultValue: false }, + noBorderRadius: { type: Boolean }, + value: { type: Number }, + max: { type: Number }, + text: { type: String }, + }; + } + + constructor() { + super(); + applyDefaults(this); + } + + calculatePercantage() { + if (this.max !== 0) { + if (this.value > this.max) { + return 100; + } + return (this.value / this.max) * 100; + } + if (this.value > 100) { + return 100; + } + return this.value; + } + + render() { + const classesBorder = { + 'a-progress-bar__small': this.small, + 'a-progress-bar__border--no-border-radius': this.noBorderRadius, + }; + + const classesLoader = { + 'a-progress-bar__small': this.small, + 'a-progress-bar__loader--no-border-radius': this.noBorderRadius, + 'a-progress-bar__loader--no-border-radius-max': + this.noBorderRadius && this.value >= (this.max === 0 ? 100 : this.max), + }; + + return html` +
+
+
+
+
+ ${this.text} +
+
+ `; + } +} + +defineVersioned([AXAProgressBar], __VERSION_INFO__); + +export default AXAProgressBar; diff --git a/src/components/10-atoms/progress-bar/package-lock.json b/src/components/10-atoms/progress-bar/package-lock.json index e1aaecb346..988249a68b 100644 --- a/src/components/10-atoms/progress-bar/package-lock.json +++ b/src/components/10-atoms/progress-bar/package-lock.json @@ -1,19 +1,61 @@ { "name": "@axa-ch/progress-bar", "version": "3.1.1", - "lockfileVersion": 1, + "lockfileVersion": 2, "requires": true, + "packages": { + "": { + "name": "@axa-ch/progress-bar", + "version": "3.1.1", + "license": "Copyright 2021 AXA Versicherungen AG", + "dependencies": { + "lit": "^2.2.1" + } + }, + "node_modules/@lit/reactive-element": { + "version": "1.3.1", + "resolved": "https://registry.npmjs.org/@lit/reactive-element/-/reactive-element-1.3.1.tgz", + "integrity": "sha512-nOJARIr3pReqK3hfFCSW2Zg/kFcFsSAlIE7z4a0C9D2dPrgD/YSn3ZP2ET/rxKB65SXyG7jJbkynBRm+tGlacw==" + }, + "node_modules/@types/trusted-types": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.2.tgz", + "integrity": "sha512-F5DIZ36YVLE+PN+Zwws4kJogq47hNgX3Nx6WyDJ3kcplxyke3XIzB8uK5n/Lpm1HBsbGzd6nmGehL8cPekP+Tg==" + }, + "node_modules/lit": { + "version": "2.2.1", + "resolved": "https://registry.npmjs.org/lit/-/lit-2.2.1.tgz", + "integrity": "sha512-dSe++R50JqrvNGXmI9OE13de1z5U/Y3J2dTm/9GC86vedI8ILoR8ZGnxfThFpvQ9m0lR0qRnIR4IiKj/jDCfYw==", + "dependencies": { + "@lit/reactive-element": "^1.3.0", + "lit-element": "^3.2.0", + "lit-html": "^2.2.0" + } + }, + "node_modules/lit-element": { + "version": "3.2.0", + "resolved": "https://registry.npmjs.org/lit-element/-/lit-element-3.2.0.tgz", + "integrity": "sha512-HbE7yt2SnUtg5DCrWt028oaU4D5F4k/1cntAFHTkzY8ZIa8N0Wmu92PxSxucsQSOXlODFrICkQ5x/tEshKi13g==", + "dependencies": { + "@lit/reactive-element": "^1.3.0", + "lit-html": "^2.2.0" + } + }, + "node_modules/lit-html": { + "version": "2.2.1", + "resolved": "https://registry.npmjs.org/lit-html/-/lit-html-2.2.1.tgz", + "integrity": "sha512-AiJ/Rs0awjICs2FioTnHSh+Np5dhYSkyRczKy3wKjp8qjLhr1Ov+GiHrUQNdX8ou1LMuznpIME990AZsa/tR8g==", + "dependencies": { + "@types/trusted-types": "^2.0.2" + } + } + }, "dependencies": { "@lit/reactive-element": { "version": "1.3.1", "resolved": "https://registry.npmjs.org/@lit/reactive-element/-/reactive-element-1.3.1.tgz", "integrity": "sha512-nOJARIr3pReqK3hfFCSW2Zg/kFcFsSAlIE7z4a0C9D2dPrgD/YSn3ZP2ET/rxKB65SXyG7jJbkynBRm+tGlacw==" }, - "@skatejs/val": { - "version": "0.4.0", - "resolved": "https://registry.npmjs.org/@skatejs/val/-/val-0.4.0.tgz", - "integrity": "sha512-zvZ/tUKkbGV5/wJE6mAN6nQ+OK7DwzGpgi+OMOxc6WxMkpwn6HfsHeArvTGhrS20wN0Df07oblIq3d0fpqICUA==" - }, "@types/trusted-types": { "version": "2.0.2", "resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.2.tgz", diff --git a/src/components/10-atoms/progress-bar/package.json b/src/components/10-atoms/progress-bar/package.json index 8f56c5829e..676df1f663 100644 --- a/src/components/10-atoms/progress-bar/package.json +++ b/src/components/10-atoms/progress-bar/package.json @@ -5,17 +5,19 @@ "author": "Pattern Warriors", "homepage": "https://github.com/axa-ch-webhub-cloud/pattern-library/tree/develop/src/components/10-atoms/progress-bar#readme", "license": "Copyright 2021 AXA Versicherungen AG", - "scripts": { - "prepublishOnly": "../../../../scripts/build/prepublish.js", - "build": "rollup --silent --config ../../../../rollup.config.js", - "build-dist": "rollup --silent --config ../../../../rollup.config.dist.js", - "postpublish": "../../../../scripts/build/postpublish.js", - "watch": "rollup --watch --silent --config ../../../../rollup.config.js" + "type": "module", + "main": "lib/index.js", + "exports": { + ".": "./lib/index.js" }, "files": [ - "lib", - "dist" + "lib" ], + "scripts": { + "build": "rollup --silent --config ../../../../rollup.config.cjs", + "watch": "rollup --watch --silent --config ../../../../rollup.config.cjs", + "genPackagelock": "npm i --package-lock-only" + }, "publishConfig": { "access": "public" }, diff --git a/src/components/10-atoms/progress-bar/story.js b/src/components/10-atoms/progress-bar/story.js index 63fb74783e..a02a953b17 100644 --- a/src/components/10-atoms/progress-bar/story.js +++ b/src/components/10-atoms/progress-bar/story.js @@ -1,7 +1,7 @@ import { html } from 'lit'; import readme from './README.md'; import changelog from './CHANGELOG.md'; -import './index'; +import './index.wc.js'; export default { title: 'Components/Progress Bar', diff --git a/src/components/10-atoms/radio/demo.js b/src/components/10-atoms/radio/demo.js index 4a4e9a9f1d..9a306c4da7 100644 --- a/src/components/10-atoms/radio/demo.js +++ b/src/components/10-atoms/radio/demo.js @@ -2,7 +2,7 @@ import { html } from 'lit'; import { CarSvg } from '@axa-ch/materials/images'; import changelog from './CHANGELOG.md'; import readme from './README.md'; -import './index'; +import './index.wc.js'; export default { title: 'Examples/Radio/Pure HTML', diff --git a/src/components/10-atoms/radio/index.react.d.ts b/src/components/10-atoms/radio/index.d.ts similarity index 91% rename from src/components/10-atoms/radio/index.react.d.ts rename to src/components/10-atoms/radio/index.d.ts index 3b4e640bbe..940df932f4 100644 --- a/src/components/10-atoms/radio/index.react.d.ts +++ b/src/components/10-atoms/radio/index.d.ts @@ -30,9 +30,7 @@ export interface AXARadioProps { onBlur?: (event: FocusEvent) => void; } -declare function createAXARadio( +declare function createAXARadioReact( createElement: typeof React.createElement, version?: string ): React.ComponentType; - -export default createAXARadio; diff --git a/src/components/10-atoms/radio/index.js b/src/components/10-atoms/radio/index.js index a8d88a1c59..309c4ba9ea 100644 --- a/src/components/10-atoms/radio/index.js +++ b/src/components/10-atoms/radio/index.js @@ -1,280 +1,5 @@ -import { html } from 'lit'; -import { unsafeHTML } from 'lit/directives/unsafe-html.js'; -import NoShadowDOM from '../../../utils/no-shadow'; -import { defineVersioned } from '../../../utils/component-versioning'; -import fireCustomEvent from '../../../utils/custom-event'; -import createRefId from '../../../utils/create-ref-id'; -import applyDefaults from '../../../utils/apply-defaults'; -import { sanitizeSVG } from '../../../utils/sanitize'; +import AXARadio from './index.wc.js'; -import styles from './index.scss'; - -// module globals -const radioButtonGroup = {}; -const selectedRadioButton = {}; -const maxWidth = {}; - -// CE -class AXARadio extends NoShadowDOM { - static get tagName() { - return 'axa-radio'; - } - - static get styles() { - return styles; - } - - static get properties() { - return { - refId: { type: String, defaultValue: `axa-radio-${createRefId()}` }, - value: { type: String, defaultValue: undefined }, // proper default for controlled-mode under React - name: { type: String, reflect: true }, - label: { type: String }, - checked: { - type: Boolean, - reflect: true, - }, - disabled: { type: Boolean, reflect: true }, - button: { type: Boolean, reflect: true }, - noGap: { type: Boolean, reflect: true }, - noAutoWidth: { type: Boolean, reflect: true }, - icon: { - type: String, - reflect: true, - converter: { - toAttribute(value) { - return value ? '' : null; - }, - }, - }, - focus: { - type: Boolean, - reflect: true, - }, - onChange: { type: Function, attribute: false }, - onFocus: { type: Function, attribute: false }, - onBlur: { type: Function, attribute: false }, - isReact: { type: Boolean }, - }; - } - - // custom setter - set checked(value) { - const { - state: { isControlled, checked, firstUpdate }, - } = this; - // first incoming value indicates controlledness? - if (!isControlled && value !== undefined && firstUpdate) { - // yes, remember in model state - this.state.isControlled = true; - } - this.state.firstUpdate = false; - const oldValue = checked; - // remember value in model state - this.state.checked = value; - this.state.native = value; - // request re-render (custom setters need to do this themselves!) - this.requestUpdate('checked', oldValue); - } - - // custom getter - get checked() { - const { - state: { isControlled, checked, native }, - } = this; - return isControlled ? checked : native; - } - - // event handlers - handleChange(event) { - const { - state: { isControlled, checked }, - value, - name, - onChange, - } = this; - onChange(event); - - const isChecked = event.target.checked; - - // uncontrolled mode: - if (!isControlled) { - // deselect last selected radiobutton... - if (isChecked && selectedRadioButton[name]) { - selectedRadioButton[name].checked = false; // causes re-render - } - // ... and select ourselves - this.checked = true; // causes re-render - - // prevent bubbling - event.stopPropagation(); - // fire a custom 'change' event on the component itself - fireCustomEvent('change', { checked: isChecked, value, name }, this); - return; - } - // controlled mode: - // set UI from model state - this.input.checked = checked; - // get selected radio button - usually not ourselves - const groupSelectedRadioButton = selectedRadioButton[name]; - // we are already registered in radio-button group? - if (name && groupSelectedRadioButton) { - // yes, re-select the selected radio button natively, thereby preserving radio behaviour - groupSelectedRadioButton.querySelector('input').checked = true; - } - } - - constructor() { - super(); - // initialize model state - this.state = { - isControlled: false, - firstUpdate: true, - checked: false, - native: false, - }; - // initialize properties - applyDefaults(this); - } - - getDefaultName() { - this.name = this.name || createRefId(); - return this.name; - } - - render() { - const { - refId, - name = this.getDefaultName(), - button, - icon, - checked, - value, - disabled, - label, - isReact, - state: { isControlled }, - } = this; - - // controlledness is a React-only notion - this.state.isControlled = isControlled && isReact; - const inputElement = html` - - ${button ? html`` : html` `} - ${icon && button ? unsafeHTML(sanitizeSVG(icon)) : html``} - `; - - return html` - ${label - ? html` - - ` - : html`
${inputElement}
`} - `; - } - - firstUpdated() { - this.input = this.querySelector('input'); - const { name, button, noAutoWidth } = this; - const ourButton = this.querySelector('.js-radio__content'); - radioButtonGroup[name] = radioButtonGroup[name] || new Set(); - radioButtonGroup[name].add(ourButton); - - if (button) { - // give DOM some time to paint before measuring width - window.requestAnimationFrame(() => { - // since up to 16ms could have passed since last animation frame, - // do basic sanity checking to ascertain this component instance - // is still alive and hasn't been removed (e.g. by React parent) - // (isConnected is polyfilled for IE in webcomponentjs polyfill) - if (!this || !this.isConnected || !radioButtonGroup[name]) { - return; - } - const { width: labelTextWidth } = - this.querySelector('.js-radio__content').getBoundingClientRect(); - maxWidth[name] = Math.max(labelTextWidth | 0, maxWidth[name] | 0); - // equalize width for all with same name: - const width = noAutoWidth ? labelTextWidth : maxWidth[name]; - radioButtonGroup[name].forEach(radioButton => { - // special case 'noAutoWidth' only impose minWidth on ourselves - // (suppresses length changes .a.k.a 'pumping effect' between - // selected/unselected state due to font-weight changes) - if (noAutoWidth && radioButton !== ourButton) return; - radioButton.style.minWidth = `${width}px`; - }); - }); - } - } - - updated() { - const { - name, - input, - state: { isControlled, checked }, - } = this; - - // we are the selected element of a group of controlled inputs? - if (isControlled && checked && name) { - // yes, perform forced re-select of radio button - // to maintain controlledness in the face of native UI-state changes - input.checked = checked; - } - - // register ourselves as currently selected in same-named group of all - // radio buttons - if (this.checked) selectedRadioButton[name] = this; - } - - disconnectedCallback() { - super.disconnectedCallback(); - const { name } = this; - // get the set of same-named radio buttons - const radioButtonSet = radioButtonGroup[name]; - // sanity check: at this point we expect to have been rendered at least once, - // and never to be disconnected twice for the same instance - if (!radioButtonSet) { - // oops, one of our expectations is false: likely this asynchronous lifecycle - // callback somehow happened out-of-order. There's nothing we can do anymore... - return; - } - // clean up - delete selectedRadioButton[name]; // help GC - delete maxWidth[name]; // help GC - // one button less in the set - const ourButton = this.querySelector('.js-radio__content'); - const successfullyDeleted = radioButtonSet.delete(ourButton); - // it was the last in the set? - if (successfullyDeleted && radioButtonSet.size === 0) { - // yes, help GC - delete radioButtonGroup[name]; - } - } - - handleFocus(e) { - this.focus = true; - this.onFocus(e); - } - - handleBlur(e) { - this.focus = false; - this.onBlur(e); - } -} - -defineVersioned([AXARadio], __VERSION_INFO__); +export { default as createAXARadioReact } from './index.react.js'; export default AXARadio; diff --git a/src/components/10-atoms/radio/index.react.js b/src/components/10-atoms/radio/index.react.js index 04a0bf4df6..04a18a547b 100644 --- a/src/components/10-atoms/radio/index.react.js +++ b/src/components/10-atoms/radio/index.react.js @@ -1,5 +1,5 @@ -import withReact from '../../../utils/with-react'; -import AXARadio from './index'; +import withReact from '../../../utils/with-react.js'; +import AXARadio from './index.wc.js'; export default (createElement, version) => withReact(createElement, AXARadio, version); diff --git a/src/components/10-atoms/radio/index.wc.js b/src/components/10-atoms/radio/index.wc.js new file mode 100644 index 0000000000..b44638ff86 --- /dev/null +++ b/src/components/10-atoms/radio/index.wc.js @@ -0,0 +1,280 @@ +import { html } from 'lit'; +import { unsafeHTML } from 'lit/directives/unsafe-html.js'; +import NoShadowDOM from '../../../utils/no-shadow.js'; +import { defineVersioned } from '../../../utils/component-versioning.js'; +import fireCustomEvent from '../../../utils/custom-event.js'; +import createRefId from '../../../utils/create-ref-id.js'; +import applyDefaults from '../../../utils/apply-defaults.js'; +import { sanitizeSVG } from '../../../utils/sanitize.js'; + +import styles from './index.scss'; + +// module globals +const radioButtonGroup = {}; +const selectedRadioButton = {}; +const maxWidth = {}; + +// CE +class AXARadio extends NoShadowDOM { + static get tagName() { + return 'axa-radio'; + } + + static get styles() { + return styles; + } + + static get properties() { + return { + refId: { type: String, defaultValue: `axa-radio-${createRefId()}` }, + value: { type: String, defaultValue: undefined }, // proper default for controlled-mode under React + name: { type: String, reflect: true }, + label: { type: String }, + checked: { + type: Boolean, + reflect: true, + }, + disabled: { type: Boolean, reflect: true }, + button: { type: Boolean, reflect: true }, + noGap: { type: Boolean, reflect: true }, + noAutoWidth: { type: Boolean, reflect: true }, + icon: { + type: String, + reflect: true, + converter: { + toAttribute(value) { + return value ? '' : null; + }, + }, + }, + focus: { + type: Boolean, + reflect: true, + }, + onChange: { type: Function, attribute: false }, + onFocus: { type: Function, attribute: false }, + onBlur: { type: Function, attribute: false }, + isReact: { type: Boolean }, + }; + } + + // custom setter + set checked(value) { + const { + state: { isControlled, checked, firstUpdate }, + } = this; + // first incoming value indicates controlledness? + if (!isControlled && value !== undefined && firstUpdate) { + // yes, remember in model state + this.state.isControlled = true; + } + this.state.firstUpdate = false; + const oldValue = checked; + // remember value in model state + this.state.checked = value; + this.state.native = value; + // request re-render (custom setters need to do this themselves!) + this.requestUpdate('checked', oldValue); + } + + // custom getter + get checked() { + const { + state: { isControlled, checked, native }, + } = this; + return isControlled ? checked : native; + } + + // event handlers + handleChange(event) { + const { + state: { isControlled, checked }, + value, + name, + onChange, + } = this; + onChange(event); + + const isChecked = event.target.checked; + + // uncontrolled mode: + if (!isControlled) { + // deselect last selected radiobutton... + if (isChecked && selectedRadioButton[name]) { + selectedRadioButton[name].checked = false; // causes re-render + } + // ... and select ourselves + this.checked = true; // causes re-render + + // prevent bubbling + event.stopPropagation(); + // fire a custom 'change' event on the component itself + fireCustomEvent('change', { checked: isChecked, value, name }, this); + return; + } + // controlled mode: + // set UI from model state + this.input.checked = checked; + // get selected radio button - usually not ourselves + const groupSelectedRadioButton = selectedRadioButton[name]; + // we are already registered in radio-button group? + if (name && groupSelectedRadioButton) { + // yes, re-select the selected radio button natively, thereby preserving radio behaviour + groupSelectedRadioButton.querySelector('input').checked = true; + } + } + + constructor() { + super(); + // initialize model state + this.state = { + isControlled: false, + firstUpdate: true, + checked: false, + native: false, + }; + // initialize properties + applyDefaults(this); + } + + getDefaultName() { + this.name = this.name || createRefId(); + return this.name; + } + + render() { + const { + refId, + name = this.getDefaultName(), + button, + icon, + checked, + value, + disabled, + label, + isReact, + state: { isControlled }, + } = this; + + // controlledness is a React-only notion + this.state.isControlled = isControlled && isReact; + const inputElement = html` + + ${button ? html`` : html` `} + ${icon && button ? unsafeHTML(sanitizeSVG(icon)) : html``} + `; + + return html` + ${label + ? html` + + ` + : html`
${inputElement}
`} + `; + } + + firstUpdated() { + this.input = this.querySelector('input'); + const { name, button, noAutoWidth } = this; + const ourButton = this.querySelector('.js-radio__content'); + radioButtonGroup[name] = radioButtonGroup[name] || new Set(); + radioButtonGroup[name].add(ourButton); + + if (button) { + // give DOM some time to paint before measuring width + window.requestAnimationFrame(() => { + // since up to 16ms could have passed since last animation frame, + // do basic sanity checking to ascertain this component instance + // is still alive and hasn't been removed (e.g. by React parent) + // (isConnected is polyfilled for IE in webcomponentjs polyfill) + if (!this || !this.isConnected || !radioButtonGroup[name]) { + return; + } + const { width: labelTextWidth } = + this.querySelector('.js-radio__content').getBoundingClientRect(); + maxWidth[name] = Math.max(labelTextWidth | 0, maxWidth[name] | 0); + // equalize width for all with same name: + const width = noAutoWidth ? labelTextWidth : maxWidth[name]; + radioButtonGroup[name].forEach(radioButton => { + // special case 'noAutoWidth' only impose minWidth on ourselves + // (suppresses length changes .a.k.a 'pumping effect' between + // selected/unselected state due to font-weight changes) + if (noAutoWidth && radioButton !== ourButton) return; + radioButton.style.minWidth = `${width}px`; + }); + }); + } + } + + updated() { + const { + name, + input, + state: { isControlled, checked }, + } = this; + + // we are the selected element of a group of controlled inputs? + if (isControlled && checked && name) { + // yes, perform forced re-select of radio button + // to maintain controlledness in the face of native UI-state changes + input.checked = checked; + } + + // register ourselves as currently selected in same-named group of all + // radio buttons + if (this.checked) selectedRadioButton[name] = this; + } + + disconnectedCallback() { + super.disconnectedCallback(); + const { name } = this; + // get the set of same-named radio buttons + const radioButtonSet = radioButtonGroup[name]; + // sanity check: at this point we expect to have been rendered at least once, + // and never to be disconnected twice for the same instance + if (!radioButtonSet) { + // oops, one of our expectations is false: likely this asynchronous lifecycle + // callback somehow happened out-of-order. There's nothing we can do anymore... + return; + } + // clean up + delete selectedRadioButton[name]; // help GC + delete maxWidth[name]; // help GC + // one button less in the set + const ourButton = this.querySelector('.js-radio__content'); + const successfullyDeleted = radioButtonSet.delete(ourButton); + // it was the last in the set? + if (successfullyDeleted && radioButtonSet.size === 0) { + // yes, help GC + delete radioButtonGroup[name]; + } + } + + handleFocus(e) { + this.focus = true; + this.onFocus(e); + } + + handleBlur(e) { + this.focus = false; + this.onBlur(e); + } +} + +defineVersioned([AXARadio], __VERSION_INFO__); + +export default AXARadio; diff --git a/src/components/10-atoms/radio/package.json b/src/components/10-atoms/radio/package.json index 790f671140..58e403bbe1 100644 --- a/src/components/10-atoms/radio/package.json +++ b/src/components/10-atoms/radio/package.json @@ -5,18 +5,19 @@ "author": "Pattern Warriors", "homepage": "https://github.com/axa-ch-webhub-cloud/pattern-library/tree/develop/src/components/10-atoms/radio#readme", "license": "Copyright 2019 AXA Versicherungen AG", - "scripts": { - "prepublishOnly": "../../../../scripts/build/prepublish.js", - "build": "rollup --silent --config ../../../../rollup.config.js", - "build-dist": "rollup --silent --config ../../../../rollup.config.dist.js", - "postpublish": "../../../../scripts/build/postpublish.js", - "watch": "rollup --watch --silent --config ../../../../rollup.config.js", - "genPackagelock": "npm i --package-lock-only" + "type": "module", + "main": "lib/index.js", + "exports": { + ".": "./lib/index.js" }, "files": [ - "lib", - "dist" + "lib" ], + "scripts": { + "build": "rollup --silent --config ../../../../rollup.config.cjs", + "watch": "rollup --watch --silent --config ../../../../rollup.config.cjs", + "genPackagelock": "npm i --package-lock-only" + }, "publishConfig": { "access": "public" }, diff --git a/src/components/10-atoms/radio/react/AXARadioButtonReact.jsx b/src/components/10-atoms/radio/react/AXARadioButtonReact.jsx index 26354410f1..ae5bd5fa48 100644 --- a/src/components/10-atoms/radio/react/AXARadioButtonReact.jsx +++ b/src/components/10-atoms/radio/react/AXARadioButtonReact.jsx @@ -1,5 +1,5 @@ import { createElement } from 'react'; -import createAXARadioButton from '../index.react'; +import createAXARadioButton from '../index.react.js'; const AXARadioButtonReact = createAXARadioButton(createElement); diff --git a/src/components/10-atoms/radio/react/demo.jsx b/src/components/10-atoms/radio/react/demo.jsx index 681c406f04..176b3936a4 100644 --- a/src/components/10-atoms/radio/react/demo.jsx +++ b/src/components/10-atoms/radio/react/demo.jsx @@ -1,5 +1,5 @@ import React from 'react'; -import { createReactContainer } from '../../../../utils/create-react-container'; +import { createReactContainer } from '../../../../utils/create-react-container.jsx'; import changelog from '../CHANGELOG.md'; import readme from '../README.md'; import DemoControlledRadioButtonReact from './DemoRadioButtonReact'; diff --git a/src/components/10-atoms/radio/react/test/basic/e2e.js b/src/components/10-atoms/radio/react/test/basic/e2e.js index 4a5d7b55a8..0d736acb6a 100644 --- a/src/components/10-atoms/radio/react/test/basic/e2e.js +++ b/src/components/10-atoms/radio/react/test/basic/e2e.js @@ -1,5 +1,5 @@ import { expect, test } from '@playwright/test'; -import { fixtureURL } from '../../../../../../utils/e2e-helpers'; +import { fixtureURL } from '../../../../../../utils/e2e-helpers.cjs'; test.describe('radio react: basic', () => { test('should show controlled-component behaviour', async ({ page }) => { diff --git a/src/components/10-atoms/radio/react/test/button/e2e.js b/src/components/10-atoms/radio/react/test/button/e2e.js index 0edf2c4b6d..affa1c4d4e 100644 --- a/src/components/10-atoms/radio/react/test/button/e2e.js +++ b/src/components/10-atoms/radio/react/test/button/e2e.js @@ -1,5 +1,5 @@ import { expect, test } from '@playwright/test'; -import { fixtureURL } from '../../../../../../utils/e2e-helpers'; +import { fixtureURL } from '../../../../../../utils/e2e-helpers.cjs'; test.describe('radio react: button', () => { test('should show controlled-component behaviour', async ({ page }) => { diff --git a/src/components/10-atoms/radio/story.js b/src/components/10-atoms/radio/story.js index ac35973923..c0308ad7a8 100644 --- a/src/components/10-atoms/radio/story.js +++ b/src/components/10-atoms/radio/story.js @@ -1,11 +1,11 @@ import { html } from 'lit'; import { CarSvg, PlaneSvg, SailBoatSvg } from '@axa-ch/materials/images'; -import { args, argTypes } from './story.args'; +import { args, argTypes } from './story.args.js'; import changelog from './CHANGELOG.md'; import readme from './README.md'; -import './index'; -import '../text'; -import '../fieldset'; +import './index.wc.js'; +import '../text/index.wc.js'; +import '../fieldset/index.wc.js'; export default { title: 'Components/Radio', diff --git a/src/components/10-atoms/radio/test/basic/e2e.js b/src/components/10-atoms/radio/test/basic/e2e.js index 15a7f0eb8e..52317743bb 100644 --- a/src/components/10-atoms/radio/test/basic/e2e.js +++ b/src/components/10-atoms/radio/test/basic/e2e.js @@ -1,5 +1,5 @@ import { expect, test } from '@playwright/test'; -import { fixtureURL } from '../../../../../utils/e2e-helpers'; +import { fixtureURL } from '../../../../../utils/e2e-helpers.cjs'; test.describe('radio: basic', () => { test('should only select one radio in a given group', async ({ page }) => { diff --git a/src/components/10-atoms/spinner/e2e.js b/src/components/10-atoms/spinner/e2e.js index da3bb61ca8..a77be15d41 100644 --- a/src/components/10-atoms/spinner/e2e.js +++ b/src/components/10-atoms/spinner/e2e.js @@ -1,5 +1,5 @@ import { expect, test } from '@playwright/test'; -import { fixtureURL } from '../../../utils/e2e-helpers'; +import { fixtureURL } from '../../../utils/e2e-helpers.cjs'; test.describe('spinner', () => { test('should render spinner', async ({ page }) => { diff --git a/src/components/10-atoms/spinner/index.js b/src/components/10-atoms/spinner/index.js index 2164b52897..c1d47c1b5b 100644 --- a/src/components/10-atoms/spinner/index.js +++ b/src/components/10-atoms/spinner/index.js @@ -1,57 +1,5 @@ -import { LitElement, html, css, unsafeCSS } from 'lit'; -import { classMap } from 'lit/directives/class-map.js'; -import { defineVersioned } from '../../../utils/component-versioning'; -import applyDefaults from '../../../utils/apply-defaults'; -import styles from './index.scss'; +import AXASpinner from './index.wc.js'; -class AXASpinner extends LitElement { - static get tagName() { - return 'axa-spinner'; - } - - static get styles() { - return css` - ${unsafeCSS(styles)} - `; - } - - constructor() { - super(); - applyDefaults(this); - } - - static get properties() { - return { - small: { type: Boolean, defaultValue: false }, - color: { type: String }, - }; - } - - render() { - const classes = { - 'a-spinner--small': this.small, - 'a-spinner__dot--inverted-dark-grey': this.color === 'inverted-dark-grey', - 'a-spinner__dot--inverted-white': this.color === 'inverted-white', - }; - - return html` - - `; - } -} - -defineVersioned([AXASpinner], __VERSION_INFO__); +export { default as createAXASpinnerReact } from './index.react.js'; export default AXASpinner; diff --git a/src/components/10-atoms/spinner/index.react.d.ts b/src/components/10-atoms/spinner/index.react.d.ts index 4eb931fdcc..5a6747a910 100644 --- a/src/components/10-atoms/spinner/index.react.d.ts +++ b/src/components/10-atoms/spinner/index.react.d.ts @@ -6,9 +6,7 @@ export interface AXASpinnerProps { color?: 'inverted-dark-grey' | 'inverted-white'; } -declare function createAXASpinner( +declare function createAXASpinnerReact( createElement: typeof React.createElement, version?: string ): React.ComponentType; - -export default createAXASpinner; diff --git a/src/components/10-atoms/spinner/index.react.js b/src/components/10-atoms/spinner/index.react.js index f5f51b04fa..7baac53fb1 100644 --- a/src/components/10-atoms/spinner/index.react.js +++ b/src/components/10-atoms/spinner/index.react.js @@ -1,5 +1,5 @@ -import withReact from '../../../utils/with-react'; -import AXASpinner from './index'; +import withReact from '../../../utils/with-react.js'; +import AXASpinner from './index.wc.js'; export default (createElement, version) => withReact(createElement, AXASpinner, version); diff --git a/src/components/10-atoms/spinner/index.wc.js b/src/components/10-atoms/spinner/index.wc.js new file mode 100644 index 0000000000..309509b365 --- /dev/null +++ b/src/components/10-atoms/spinner/index.wc.js @@ -0,0 +1,57 @@ +import { LitElement, html, css, unsafeCSS } from 'lit'; +import { classMap } from 'lit/directives/class-map.js'; +import { defineVersioned } from '../../../utils/component-versioning.js'; +import applyDefaults from '../../../utils/apply-defaults.js'; +import styles from './index.scss'; + +class AXASpinner extends LitElement { + static get tagName() { + return 'axa-spinner'; + } + + static get styles() { + return css` + ${unsafeCSS(styles)} + `; + } + + constructor() { + super(); + applyDefaults(this); + } + + static get properties() { + return { + small: { type: Boolean, defaultValue: false }, + color: { type: String }, + }; + } + + render() { + const classes = { + 'a-spinner--small': this.small, + 'a-spinner__dot--inverted-dark-grey': this.color === 'inverted-dark-grey', + 'a-spinner__dot--inverted-white': this.color === 'inverted-white', + }; + + return html` + + `; + } +} + +defineVersioned([AXASpinner], __VERSION_INFO__); + +export default AXASpinner; diff --git a/src/components/10-atoms/spinner/package-lock.json b/src/components/10-atoms/spinner/package-lock.json index 54de762c9f..5c864cd031 100644 --- a/src/components/10-atoms/spinner/package-lock.json +++ b/src/components/10-atoms/spinner/package-lock.json @@ -1,19 +1,61 @@ { "name": "@axa-ch/spinner", "version": "3.0.10", - "lockfileVersion": 1, + "lockfileVersion": 2, "requires": true, + "packages": { + "": { + "name": "@axa-ch/spinner", + "version": "3.0.10", + "license": "Copyright 2021 AXA Versicherungen AG", + "dependencies": { + "lit": "^2.2.1" + } + }, + "node_modules/@lit/reactive-element": { + "version": "1.3.1", + "resolved": "https://registry.npmjs.org/@lit/reactive-element/-/reactive-element-1.3.1.tgz", + "integrity": "sha512-nOJARIr3pReqK3hfFCSW2Zg/kFcFsSAlIE7z4a0C9D2dPrgD/YSn3ZP2ET/rxKB65SXyG7jJbkynBRm+tGlacw==" + }, + "node_modules/@types/trusted-types": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.2.tgz", + "integrity": "sha512-F5DIZ36YVLE+PN+Zwws4kJogq47hNgX3Nx6WyDJ3kcplxyke3XIzB8uK5n/Lpm1HBsbGzd6nmGehL8cPekP+Tg==" + }, + "node_modules/lit": { + "version": "2.2.1", + "resolved": "https://registry.npmjs.org/lit/-/lit-2.2.1.tgz", + "integrity": "sha512-dSe++R50JqrvNGXmI9OE13de1z5U/Y3J2dTm/9GC86vedI8ILoR8ZGnxfThFpvQ9m0lR0qRnIR4IiKj/jDCfYw==", + "dependencies": { + "@lit/reactive-element": "^1.3.0", + "lit-element": "^3.2.0", + "lit-html": "^2.2.0" + } + }, + "node_modules/lit-element": { + "version": "3.2.0", + "resolved": "https://registry.npmjs.org/lit-element/-/lit-element-3.2.0.tgz", + "integrity": "sha512-HbE7yt2SnUtg5DCrWt028oaU4D5F4k/1cntAFHTkzY8ZIa8N0Wmu92PxSxucsQSOXlODFrICkQ5x/tEshKi13g==", + "dependencies": { + "@lit/reactive-element": "^1.3.0", + "lit-html": "^2.2.0" + } + }, + "node_modules/lit-html": { + "version": "2.2.1", + "resolved": "https://registry.npmjs.org/lit-html/-/lit-html-2.2.1.tgz", + "integrity": "sha512-AiJ/Rs0awjICs2FioTnHSh+Np5dhYSkyRczKy3wKjp8qjLhr1Ov+GiHrUQNdX8ou1LMuznpIME990AZsa/tR8g==", + "dependencies": { + "@types/trusted-types": "^2.0.2" + } + } + }, "dependencies": { "@lit/reactive-element": { "version": "1.3.1", "resolved": "https://registry.npmjs.org/@lit/reactive-element/-/reactive-element-1.3.1.tgz", "integrity": "sha512-nOJARIr3pReqK3hfFCSW2Zg/kFcFsSAlIE7z4a0C9D2dPrgD/YSn3ZP2ET/rxKB65SXyG7jJbkynBRm+tGlacw==" }, - "@skatejs/val": { - "version": "0.4.0", - "resolved": "https://registry.npmjs.org/@skatejs/val/-/val-0.4.0.tgz", - "integrity": "sha512-zvZ/tUKkbGV5/wJE6mAN6nQ+OK7DwzGpgi+OMOxc6WxMkpwn6HfsHeArvTGhrS20wN0Df07oblIq3d0fpqICUA==" - }, "@types/trusted-types": { "version": "2.0.2", "resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.2.tgz", diff --git a/src/components/10-atoms/spinner/package.json b/src/components/10-atoms/spinner/package.json index b8efbc7fff..784eb413e8 100644 --- a/src/components/10-atoms/spinner/package.json +++ b/src/components/10-atoms/spinner/package.json @@ -5,17 +5,19 @@ "author": "Pattern Warriors", "homepage": "https://github.com/axa-ch-webhub-cloud/pattern-library/tree/develop/src/components/10-atoms/spinner#readme", "license": "Copyright 2021 AXA Versicherungen AG", - "scripts": { - "prepublishOnly": "../../../../scripts/build/prepublish.js", - "build": "rollup --silent --config ../../../../rollup.config.js", - "build-dist": "rollup --silent --config ../../../../rollup.config.dist.js", - "postpublish": "../../../../scripts/build/postpublish.js", - "watch": "rollup --watch --silent --config ../../../../rollup.config.js" + "type": "module", + "main": "lib/index.js", + "exports": { + ".": "./lib/index.js" }, "files": [ - "lib", - "dist" + "lib" ], + "scripts": { + "build": "rollup --silent --config ../../../../rollup.config.cjs", + "watch": "rollup --watch --silent --config ../../../../rollup.config.cjs", + "genPackagelock": "npm i --package-lock-only" + }, "publishConfig": { "access": "public" }, diff --git a/src/components/10-atoms/spinner/story.js b/src/components/10-atoms/spinner/story.js index 42cf042347..f1abf680e0 100644 --- a/src/components/10-atoms/spinner/story.js +++ b/src/components/10-atoms/spinner/story.js @@ -1,7 +1,7 @@ import { html } from 'lit'; import readme from './README.md'; import changelog from './CHANGELOG.md'; -import './index'; +import './index.wc.js'; const colors = { default: '', diff --git a/src/components/10-atoms/text/index.react.d.ts b/src/components/10-atoms/text/index.d.ts similarity index 83% rename from src/components/10-atoms/text/index.react.d.ts rename to src/components/10-atoms/text/index.d.ts index 641881b3f2..048e4fb248 100644 --- a/src/components/10-atoms/text/index.react.d.ts +++ b/src/components/10-atoms/text/index.d.ts @@ -10,9 +10,7 @@ export interface AXATextProps { children?: React.ReactNode; } -declare function createAXAText( +declare function createAXATextReact( createElement: typeof React.createElement, version?: string ): React.ComponentType; - -export default createAXAText; diff --git a/src/components/10-atoms/text/index.js b/src/components/10-atoms/text/index.js index a32e0b1404..b5f222882c 100644 --- a/src/components/10-atoms/text/index.js +++ b/src/components/10-atoms/text/index.js @@ -1,46 +1,5 @@ -import { LitElement, html, css, unsafeCSS } from 'lit'; -import { defineVersioned } from '../../../utils/component-versioning'; -import applyDefaults from '../../../utils/apply-defaults'; -import styles from './index.scss'; +import AXAText from './index.wc.js'; -class AXAText extends LitElement { - static get tagName() { - return 'axa-text'; - } - - static get styles() { - return css` - ${unsafeCSS(styles)} - `; - } - - static get properties() { - return { - size: { type: Number, reflect: true, defaultValue: 1 }, - nowrap: { type: Boolean, reflect: true }, - bold: { type: Boolean, reflect: true }, - italic: { type: Boolean, reflect: true }, - }; - } - - constructor() { - super(); - applyDefaults(this); - } - - connectedCallback() { - super.connectedCallback(); - - if (!this.nowrap) { - this.setAttribute('aria-role', 'paragraph'); - } - } - - render() { - return this.nowrap ? html`` : html`

`; - } -} - -defineVersioned([AXAText], __VERSION_INFO__); +export { default as createAXATextReact } from './index.react.js'; export default AXAText; diff --git a/src/components/10-atoms/text/index.react.js b/src/components/10-atoms/text/index.react.js index c3fef44294..96e2a4e955 100644 --- a/src/components/10-atoms/text/index.react.js +++ b/src/components/10-atoms/text/index.react.js @@ -1,5 +1,5 @@ -import withReact from '../../../utils/with-react'; -import AXAText from './index'; +import withReact from '../../../utils/with-react.js'; +import AXAText from './index.wc.js'; export default (createElement, version) => withReact(createElement, AXAText, version); diff --git a/src/components/10-atoms/text/index.wc.js b/src/components/10-atoms/text/index.wc.js new file mode 100644 index 0000000000..fcf43d6769 --- /dev/null +++ b/src/components/10-atoms/text/index.wc.js @@ -0,0 +1,46 @@ +import { LitElement, html, css, unsafeCSS } from 'lit'; +import { defineVersioned } from '../../../utils/component-versioning.js'; +import applyDefaults from '../../../utils/apply-defaults.js'; +import styles from './index.scss'; + +class AXAText extends LitElement { + static get tagName() { + return 'axa-text'; + } + + static get styles() { + return css` + ${unsafeCSS(styles)} + `; + } + + static get properties() { + return { + size: { type: Number, reflect: true, defaultValue: 1 }, + nowrap: { type: Boolean, reflect: true }, + bold: { type: Boolean, reflect: true }, + italic: { type: Boolean, reflect: true }, + }; + } + + constructor() { + super(); + applyDefaults(this); + } + + connectedCallback() { + super.connectedCallback(); + + if (!this.nowrap) { + this.setAttribute('aria-role', 'paragraph'); + } + } + + render() { + return this.nowrap ? html`` : html`

`; + } +} + +defineVersioned([AXAText], __VERSION_INFO__); + +export default AXAText; diff --git a/src/components/10-atoms/text/package.json b/src/components/10-atoms/text/package.json index d092a5f49b..402b5fc43b 100644 --- a/src/components/10-atoms/text/package.json +++ b/src/components/10-atoms/text/package.json @@ -5,18 +5,19 @@ "author": "Pattern Warriors", "homepage": "https://github.com/axa-ch-webhub-cloud/pattern-library/tree/develop/src/components/10-atoms/text#readme", "license": "Copyright 2019 AXA Versicherungen AG", - "scripts": { - "prepublishOnly": "../../../../scripts/build/prepublish.js", - "build": "rollup --silent --config ../../../../rollup.config.js", - "build-dist": "rollup --silent --config ../../../../rollup.config.dist.js", - "postpublish": "../../../../scripts/build/postpublish.js", - "watch": "rollup --watch --silent --config ../../../../rollup.config.js", - "genPackagelock": "npm i --package-lock-only" + "type": "module", + "main": "lib/index.js", + "exports": { + ".": "./lib/index.js" }, "files": [ - "lib", - "dist" + "lib" ], + "scripts": { + "build": "rollup --silent --config ../../../../rollup.config.cjs", + "watch": "rollup --watch --silent --config ../../../../rollup.config.cjs", + "genPackagelock": "npm i --package-lock-only" + }, "publishConfig": { "access": "public" }, diff --git a/src/components/10-atoms/text/react/AXATextReact.jsx b/src/components/10-atoms/text/react/AXATextReact.jsx index 9f1a60eff0..70f193c671 100644 --- a/src/components/10-atoms/text/react/AXATextReact.jsx +++ b/src/components/10-atoms/text/react/AXATextReact.jsx @@ -1,5 +1,5 @@ import { createElement } from 'react'; -import createAXAText from '../index.react'; +import createAXAText from '../index.react.js'; const AXAText = createAXAText(createElement); diff --git a/src/components/10-atoms/text/react/story.jsx b/src/components/10-atoms/text/react/story.jsx index acd3c58b42..0c986bbf3b 100644 --- a/src/components/10-atoms/text/react/story.jsx +++ b/src/components/10-atoms/text/react/story.jsx @@ -1,6 +1,6 @@ import React from 'react'; -import { createReactContainer } from '../../../../utils/create-react-container'; -import { args, argTypes } from '../story.args'; +import { createReactContainer } from '../../../../utils/create-react-container.jsx'; +import { args, argTypes } from '../story.args.js'; import changelog from '../CHANGELOG.md'; import readme from '../README.md'; import AXAText from './AXATextReact'; diff --git a/src/components/10-atoms/text/story.js b/src/components/10-atoms/text/story.js index e1d3575505..25c9bf58c0 100644 --- a/src/components/10-atoms/text/story.js +++ b/src/components/10-atoms/text/story.js @@ -1,8 +1,8 @@ import { html } from 'lit'; -import { args, argTypes } from './story.args'; +import { args, argTypes } from './story.args.js'; import changelog from './CHANGELOG.md'; import readme from './README.md'; -import './index'; +import './index.wc.js'; export default { title: 'Components/Text', diff --git a/src/components/10-atoms/text/test/bold/e2e.js b/src/components/10-atoms/text/test/bold/e2e.js index 240ecf99b1..8c6d2caa6a 100644 --- a/src/components/10-atoms/text/test/bold/e2e.js +++ b/src/components/10-atoms/text/test/bold/e2e.js @@ -1,5 +1,5 @@ import { expect, test } from '@playwright/test'; -import { fixtureURL } from '../../../../../utils/e2e-helpers'; +import { fixtureURL } from '../../../../../utils/e2e-helpers.cjs'; test.describe('text: bold', () => { test('should be bold', async ({ page }) => { diff --git a/src/components/10-atoms/text/test/italic/e2e.js b/src/components/10-atoms/text/test/italic/e2e.js index 8afbebf96b..f8b5729d2e 100644 --- a/src/components/10-atoms/text/test/italic/e2e.js +++ b/src/components/10-atoms/text/test/italic/e2e.js @@ -1,5 +1,5 @@ import { expect, test } from '@playwright/test'; -import { fixtureURL } from '../../../../../utils/e2e-helpers'; +import { fixtureURL } from '../../../../../utils/e2e-helpers.cjs'; test.describe('text: italic', () => { test('should be italic', async ({ page }) => { diff --git a/src/components/10-atoms/text/test/nowrap/e2e.js b/src/components/10-atoms/text/test/nowrap/e2e.js index e4b7930328..bb767f9797 100644 --- a/src/components/10-atoms/text/test/nowrap/e2e.js +++ b/src/components/10-atoms/text/test/nowrap/e2e.js @@ -1,5 +1,5 @@ import { expect, test } from '@playwright/test'; -import { fixtureURL } from '../../../../../utils/e2e-helpers'; +import { fixtureURL } from '../../../../../utils/e2e-helpers.cjs'; test.describe('text:nowrap', () => { test('should not render inside a paragraph tag', async ({ page }) => { diff --git a/src/components/10-atoms/text/test/size/e2e.js b/src/components/10-atoms/text/test/size/e2e.js index e80c9caff0..84ecf4d692 100644 --- a/src/components/10-atoms/text/test/size/e2e.js +++ b/src/components/10-atoms/text/test/size/e2e.js @@ -1,12 +1,12 @@ import { expect, test } from '@playwright/test'; -import { fixtureURL } from '../../../../../utils/e2e-helpers'; +import { fixtureURL } from '../../../../../utils/e2e-helpers.cjs'; import { marginBottom, textsDesktop, textsMobile, fontFamilyPrimary, getTextStyles, -} from './e2e.helpers'; +} from './e2e.helpers.js'; test.describe('text: size:desktop', () => { for (const size of Object.keys(textsDesktop)) { diff --git a/src/components/10-atoms/textarea/demo.js b/src/components/10-atoms/textarea/demo.js index 852ada9f23..4db805689f 100644 --- a/src/components/10-atoms/textarea/demo.js +++ b/src/components/10-atoms/textarea/demo.js @@ -1,6 +1,6 @@ import changelog from './CHANGELOG.md'; import readme from './README.md'; -import './index'; +import './index.wc.js'; export default { title: 'Examples/Textarea/Pure HTML', diff --git a/src/components/10-atoms/textarea/index.react.d.ts b/src/components/10-atoms/textarea/index.d.ts similarity index 92% rename from src/components/10-atoms/textarea/index.react.d.ts rename to src/components/10-atoms/textarea/index.d.ts index c636eaf6c3..c72dcb40a7 100644 --- a/src/components/10-atoms/textarea/index.react.d.ts +++ b/src/components/10-atoms/textarea/index.d.ts @@ -29,9 +29,7 @@ export interface AXATextareaProps { onChange?: (event: AXATextareaChangeEvent) => void; } -declare function createAXATextarea( +declare function createAXATextareaReact( createElement: typeof React.createElement, version?: string ): React.ComponentType; - -export default createAXATextarea; diff --git a/src/components/10-atoms/textarea/index.js b/src/components/10-atoms/textarea/index.js index 72371df2ed..2746c5fbd4 100644 --- a/src/components/10-atoms/textarea/index.js +++ b/src/components/10-atoms/textarea/index.js @@ -1,297 +1,5 @@ -import { html } from 'lit'; -import { classMap } from 'lit/directives/class-map.js'; +import AXATextarea from './index.wc.js'; -import NoShadowDOM from '../../../utils/no-shadow'; -import { defineVersioned } from '../../../utils/component-versioning'; -import applyDefaults from '../../../utils/apply-defaults'; -import createRefId from '../../../utils/create-ref-id'; -import styles from './index.scss'; - -class AXATextarea extends NoShadowDOM { - static get tagName() { - return 'axa-textarea'; - } - - static get styles() { - return styles; - } - - static get properties() { - return { - refId: { type: String, defaultValue: `textarea-${createRefId()}` }, - name: { type: String }, - label: { type: String }, - placeholder: { type: String }, - value: { type: String, defaultValue: undefined }, // proper default for controlled-mode under React - defaultValue: { type: String }, - error: { type: String }, - invalid: { type: Boolean }, - checkMark: { type: Boolean }, - required: { type: Boolean }, - disabled: { type: Boolean, reflect: true }, - autocomplete: { type: Boolean }, - readonly: { type: Boolean }, - - counter: { type: String }, - counterMax: { type: String }, - maxLength: { - /** - * Only create a Number when there is an actual value passed. If an - * empty "maxvalue" is used, it would otherwise convert to the type - * Number with the value 0 and the user would not be able write - * anything. - */ - converter: value => - // eslint-disable-next-line no-restricted-globals - !isNaN(parseFloat(value)) && isFinite(value) - ? Number(value) - : undefined, - }, - isReact: { type: Boolean }, - modelCounter: { type: String }, - onChange: { type: Function, attribute: false }, - onFocus: { type: Function, attribute: false }, - onBlur: { type: Function, attribute: false }, - }; - } - - constructor() { - super(); - applyDefaults(this); - this.handleFocus = this.handleFocus.bind(this); - this.handleBlur = this.handleBlur.bind(this); - this.handleInput = this.handleInput.bind(this); - // internal properties - this.isReact = false; - this.modelCounter = ''; - this.nativeInput = { value: '' }; - this.nativeDefaultValue = this.textContent || this.innerText; - this.modelValue = ''; - this.isControlled = false; - this.isPlaceholderInCounter = false; - } - - set value(val) { - const { isControlled } = this; - - if (!isControlled && val !== undefined) { - this.isControlled = true; - } - - const oldVal = this.modelValue; - this.modelValue = val; - - this.requestUpdate('value', oldVal); - } - - get value() { - // When applyDefaults() is called inside the constructor, nativeInput - // does not exist yet. - if (!this.nativeInput) { - return ''; - } - const { - isControlled, - modelValue, - nativeInput: { value: nativeValue }, - } = this; - - return isControlled ? modelValue : nativeValue; - } - - get charsLeft() { - const { - maxLength = 0, - nativeInput: { value: nativeValue }, - } = this; - - if (nativeValue) { - return maxLength - nativeValue.length; - } - - return maxLength; - } - - get getCounterText() { - const { charsLeft } = this; - const userCharsLeft = charsLeft < 0 ? 0 : charsLeft; - - if (this.counter && this.isPlaceholderInCounter) { - return this.counter.replace(/##.*##/, userCharsLeft - 1); - } - - if (this.counter) { - return `${userCharsLeft - 1} ${this.counter}`; - } - - return userCharsLeft; - } - - get areCharsLeft() { - return this.charsLeft > 0; - } - - get showCounter() { - return ( - this.maxLength > 0 && - !this.invalid && - this.areCharsLeft && - !this.disabled && - !this.readonly - ); - } - - get showError() { - return this.error && this.invalid && !this.disabled; - } - - get showCounterMax() { - return ( - this.maxLength > 0 && - this.counterMax && - !this.areCharsLeft && - !this.disabled && - !this.readonly - ); - } - - get showMessages() { - return this.showError || this.showCounter || this.showCounterMax; - } - - focus(options = {}) { - this.nativeInput.focus(options); - this.nativeInput.classList.add('focus'); - } - - blur() { - this.nativeInput.blur(); - this.nativeInput.classList.remove('focus'); - } - - handleFocus(ev) { - this.nativeInput.classList.add('focus'); - this.onFocus(ev); - } - - handleBlur(ev) { - this.nativeInput.classList.remove('focus'); - this.onBlur(ev); - } - - handleInput(ev) { - const { selectionStart = null } = ev.target; - - this.onChange(ev); - - // are we a 'controlled' input in the React sense? - if (this.isControlled) { - // yes, set UI from model state - this.nativeInput.value = this.modelValue; - - requestAnimationFrame(() => { - this.nativeInput.setSelectionRange(selectionStart, selectionStart); - }); - } - - if (this.maxLength) { - this.modelCounter = this.getCounterText; - } - } - - updated() { - const { nativeDefaultValue, defaultValue, isReact, value } = this; - - this.nativeInput = this.querySelector('textarea'); - - if (nativeDefaultValue && !isReact) { - this.nativeInput.value = nativeDefaultValue; - } - - if (isReact) { - this.nativeInput.value = defaultValue || value; - } - - this.isPlaceholderInCounter = this.counter && /##.*##/.test(this.counter); - this.modelCounter = this.getCounterText; - } - - render() { - const { - name, - value, - required, - label = '', - error = '', - modelCounter = '', - counterMax = '', - maxLength = '', - autocomplete, - placeholder, - disabled, - readonly, - isReact, - isControlled, - refId, - invalid, - checkMark, - showError, - showCounter, - showCounterMax, - } = this; - - this.isControlled = isControlled && isReact; - - const textareaClasses = { - 'a-textarea__textarea': true, - 'a-textarea__textarea--readonly': readonly, - 'a-textarea__textarea--error': (invalid || showCounterMax) && !disabled, - 'a-textarea__textarea--check': checkMark && !disabled && !showCounterMax, - }; - - const textareaMessagesClasses = { - 'a-textarea__messages': true, - 'a-textarea__messages--error': (invalid || showCounterMax) && !disabled, - 'a-textarea__messages--hidden': !this.showMessages, - }; - - return html` - ${label && - html` - - `} -
- - - ${checkMark && !showCounterMax - ? html` ` - : ''} -
-
- ${showCounter ? html` ${modelCounter} ` : ''} - ${showCounterMax ? html` ${counterMax} ` : ''} - ${showError ? html` ${error} ` : ''} -
- `; - } -} - -defineVersioned([AXATextarea], __VERSION_INFO__); +export { default as createAXATextareaReact } from './index.react.js'; export default AXATextarea; diff --git a/src/components/10-atoms/textarea/index.react.js b/src/components/10-atoms/textarea/index.react.js index e104c589c8..b73b6b9d35 100644 --- a/src/components/10-atoms/textarea/index.react.js +++ b/src/components/10-atoms/textarea/index.react.js @@ -1,5 +1,5 @@ -import withReact from '../../../utils/with-react'; -import AXATextarea from './index'; +import withReact from '../../../utils/with-react.js'; +import AXATextarea from './index.wc.js'; export default (createElement, version) => withReact(createElement, AXATextarea, version); diff --git a/src/components/10-atoms/textarea/index.wc.js b/src/components/10-atoms/textarea/index.wc.js new file mode 100644 index 0000000000..fc82b4f7f9 --- /dev/null +++ b/src/components/10-atoms/textarea/index.wc.js @@ -0,0 +1,297 @@ +import { html } from 'lit'; +import { classMap } from 'lit/directives/class-map.js'; + +import NoShadowDOM from '../../../utils/no-shadow.js'; +import { defineVersioned } from '../../../utils/component-versioning.js'; +import applyDefaults from '../../../utils/apply-defaults.js'; +import createRefId from '../../../utils/create-ref-id.js'; +import styles from './index.scss'; + +class AXATextarea extends NoShadowDOM { + static get tagName() { + return 'axa-textarea'; + } + + static get styles() { + return styles; + } + + static get properties() { + return { + refId: { type: String, defaultValue: `textarea-${createRefId()}` }, + name: { type: String }, + label: { type: String }, + placeholder: { type: String }, + value: { type: String, defaultValue: undefined }, // proper default for controlled-mode under React + defaultValue: { type: String }, + error: { type: String }, + invalid: { type: Boolean }, + checkMark: { type: Boolean }, + required: { type: Boolean }, + disabled: { type: Boolean, reflect: true }, + autocomplete: { type: Boolean }, + readonly: { type: Boolean }, + + counter: { type: String }, + counterMax: { type: String }, + maxLength: { + /** + * Only create a Number when there is an actual value passed. If an + * empty "maxvalue" is used, it would otherwise convert to the type + * Number with the value 0 and the user would not be able write + * anything. + */ + converter: value => + // eslint-disable-next-line no-restricted-globals + !isNaN(parseFloat(value)) && isFinite(value) + ? Number(value) + : undefined, + }, + isReact: { type: Boolean }, + modelCounter: { type: String }, + onChange: { type: Function, attribute: false }, + onFocus: { type: Function, attribute: false }, + onBlur: { type: Function, attribute: false }, + }; + } + + constructor() { + super(); + applyDefaults(this); + this.handleFocus = this.handleFocus.bind(this); + this.handleBlur = this.handleBlur.bind(this); + this.handleInput = this.handleInput.bind(this); + // internal properties + this.isReact = false; + this.modelCounter = ''; + this.nativeInput = { value: '' }; + this.nativeDefaultValue = this.textContent || this.innerText; + this.modelValue = ''; + this.isControlled = false; + this.isPlaceholderInCounter = false; + } + + set value(val) { + const { isControlled } = this; + + if (!isControlled && val !== undefined) { + this.isControlled = true; + } + + const oldVal = this.modelValue; + this.modelValue = val; + + this.requestUpdate('value', oldVal); + } + + get value() { + // When applyDefaults() is called inside the constructor, nativeInput + // does not exist yet. + if (!this.nativeInput) { + return ''; + } + const { + isControlled, + modelValue, + nativeInput: { value: nativeValue }, + } = this; + + return isControlled ? modelValue : nativeValue; + } + + get charsLeft() { + const { + maxLength = 0, + nativeInput: { value: nativeValue }, + } = this; + + if (nativeValue) { + return maxLength - nativeValue.length; + } + + return maxLength; + } + + get getCounterText() { + const { charsLeft } = this; + const userCharsLeft = charsLeft < 0 ? 0 : charsLeft; + + if (this.counter && this.isPlaceholderInCounter) { + return this.counter.replace(/##.*##/, userCharsLeft - 1); + } + + if (this.counter) { + return `${userCharsLeft - 1} ${this.counter}`; + } + + return userCharsLeft; + } + + get areCharsLeft() { + return this.charsLeft > 0; + } + + get showCounter() { + return ( + this.maxLength > 0 && + !this.invalid && + this.areCharsLeft && + !this.disabled && + !this.readonly + ); + } + + get showError() { + return this.error && this.invalid && !this.disabled; + } + + get showCounterMax() { + return ( + this.maxLength > 0 && + this.counterMax && + !this.areCharsLeft && + !this.disabled && + !this.readonly + ); + } + + get showMessages() { + return this.showError || this.showCounter || this.showCounterMax; + } + + focus(options = {}) { + this.nativeInput.focus(options); + this.nativeInput.classList.add('focus'); + } + + blur() { + this.nativeInput.blur(); + this.nativeInput.classList.remove('focus'); + } + + handleFocus(ev) { + this.nativeInput.classList.add('focus'); + this.onFocus(ev); + } + + handleBlur(ev) { + this.nativeInput.classList.remove('focus'); + this.onBlur(ev); + } + + handleInput(ev) { + const { selectionStart = null } = ev.target; + + this.onChange(ev); + + // are we a 'controlled' input in the React sense? + if (this.isControlled) { + // yes, set UI from model state + this.nativeInput.value = this.modelValue; + + requestAnimationFrame(() => { + this.nativeInput.setSelectionRange(selectionStart, selectionStart); + }); + } + + if (this.maxLength) { + this.modelCounter = this.getCounterText; + } + } + + updated() { + const { nativeDefaultValue, defaultValue, isReact, value } = this; + + this.nativeInput = this.querySelector('textarea'); + + if (nativeDefaultValue && !isReact) { + this.nativeInput.value = nativeDefaultValue; + } + + if (isReact) { + this.nativeInput.value = defaultValue || value; + } + + this.isPlaceholderInCounter = this.counter && /##.*##/.test(this.counter); + this.modelCounter = this.getCounterText; + } + + render() { + const { + name, + value, + required, + label = '', + error = '', + modelCounter = '', + counterMax = '', + maxLength = '', + autocomplete, + placeholder, + disabled, + readonly, + isReact, + isControlled, + refId, + invalid, + checkMark, + showError, + showCounter, + showCounterMax, + } = this; + + this.isControlled = isControlled && isReact; + + const textareaClasses = { + 'a-textarea__textarea': true, + 'a-textarea__textarea--readonly': readonly, + 'a-textarea__textarea--error': (invalid || showCounterMax) && !disabled, + 'a-textarea__textarea--check': checkMark && !disabled && !showCounterMax, + }; + + const textareaMessagesClasses = { + 'a-textarea__messages': true, + 'a-textarea__messages--error': (invalid || showCounterMax) && !disabled, + 'a-textarea__messages--hidden': !this.showMessages, + }; + + return html` + ${label && + html` + + `} +
+ + + ${checkMark && !showCounterMax + ? html` ` + : ''} +
+
+ ${showCounter ? html` ${modelCounter} ` : ''} + ${showCounterMax ? html` ${counterMax} ` : ''} + ${showError ? html` ${error} ` : ''} +
+ `; + } +} + +defineVersioned([AXATextarea], __VERSION_INFO__); + +export default AXATextarea; diff --git a/src/components/10-atoms/textarea/package.json b/src/components/10-atoms/textarea/package.json index c5372287dc..078d094437 100644 --- a/src/components/10-atoms/textarea/package.json +++ b/src/components/10-atoms/textarea/package.json @@ -5,18 +5,19 @@ "author": "Pattern Warriors", "homepage": "https://github.com/axa-ch-webhub-cloud/pattern-library/tree/develop/src/components/10-atoms/textarea#readme", "license": "Copyright 2019 AXA Versicherungen AG", - "scripts": { - "prepublishOnly": "../../../../scripts/build/prepublish.js", - "build": "rollup --silent --config ../../../../rollup.config.js", - "build-dist": "rollup --silent --config ../../../../rollup.config.dist.js", - "postpublish": "../../../../scripts/build/postpublish.js", - "watch": "rollup --watch --silent --config ../../../../rollup.config.js", - "genPackagelock": "npm i --package-lock-only" + "type": "module", + "main": "lib/index.js", + "exports": { + ".": "./lib/index.js" }, "files": [ - "lib", - "dist" + "lib" ], + "scripts": { + "build": "rollup --silent --config ../../../../rollup.config.cjs", + "watch": "rollup --watch --silent --config ../../../../rollup.config.cjs", + "genPackagelock": "npm i --package-lock-only" + }, "publishConfig": { "access": "public" }, diff --git a/src/components/10-atoms/textarea/react/AXATextarea.jsx b/src/components/10-atoms/textarea/react/AXATextarea.jsx index af78918099..f80f2e91c8 100644 --- a/src/components/10-atoms/textarea/react/AXATextarea.jsx +++ b/src/components/10-atoms/textarea/react/AXATextarea.jsx @@ -1,5 +1,5 @@ import { createElement } from 'react'; -import createAXATextarea from '../index.react'; +import createAXATextarea from '../index.react.js'; const AXATextarea = createAXATextarea(createElement); diff --git a/src/components/10-atoms/textarea/react/demo.jsx b/src/components/10-atoms/textarea/react/demo.jsx index 88ecb7e3bc..1ff2eca6d2 100644 --- a/src/components/10-atoms/textarea/react/demo.jsx +++ b/src/components/10-atoms/textarea/react/demo.jsx @@ -2,7 +2,7 @@ import React from 'react'; import changelog from '../CHANGELOG.md'; import readme from '../README.md'; import DemoControllabilityOfTextarea from './DemoControllabilityOfTextarea'; -import { createReactContainer } from '../../../../utils/create-react-container'; +import { createReactContainer } from '../../../../utils/create-react-container.jsx'; export default { title: 'Examples/Textarea/React', diff --git a/src/components/10-atoms/textarea/react/story.jsx b/src/components/10-atoms/textarea/react/story.jsx index 44eb417fff..8c699f60a9 100644 --- a/src/components/10-atoms/textarea/react/story.jsx +++ b/src/components/10-atoms/textarea/react/story.jsx @@ -1,6 +1,6 @@ import React from 'react'; -import { createReactContainer } from '../../../../utils/create-react-container'; -import { args, argTypes } from '../story.args'; +import { createReactContainer } from '../../../../utils/create-react-container.jsx'; +import { args, argTypes } from '../story.args.js'; import changelog from '../CHANGELOG.md'; import readme from '../README.md'; import AXATextarea from './AXATextarea'; diff --git a/src/components/10-atoms/textarea/story.js b/src/components/10-atoms/textarea/story.js index 9b72136467..fe0b50205d 100644 --- a/src/components/10-atoms/textarea/story.js +++ b/src/components/10-atoms/textarea/story.js @@ -1,8 +1,8 @@ import { html } from 'lit'; -import { args, argTypes } from './story.args'; +import { args, argTypes } from './story.args.js'; import changelog from './CHANGELOG.md'; import readme from './README.md'; -import './index'; +import './index.wc.js'; export default { title: 'Components/Textarea', diff --git a/src/components/10-atoms/textarea/test/autocomplete/e2e.js b/src/components/10-atoms/textarea/test/autocomplete/e2e.js index 633aa76792..7084c64935 100644 --- a/src/components/10-atoms/textarea/test/autocomplete/e2e.js +++ b/src/components/10-atoms/textarea/test/autocomplete/e2e.js @@ -1,5 +1,5 @@ import { expect, test } from '@playwright/test'; -import { fixtureURL } from '../../../../../utils/e2e-helpers'; +import { fixtureURL } from '../../../../../utils/e2e-helpers.cjs'; test.describe('textarea: autocomplete', () => { test('should enable autocomplete', async ({ page }) => { diff --git a/src/components/10-atoms/textarea/test/basic/e2e.js b/src/components/10-atoms/textarea/test/basic/e2e.js index 8f47da2c71..14de8210e9 100644 --- a/src/components/10-atoms/textarea/test/basic/e2e.js +++ b/src/components/10-atoms/textarea/test/basic/e2e.js @@ -1,5 +1,5 @@ import { expect, test } from '@playwright/test'; -import { fixtureURL } from '../../../../../utils/e2e-helpers'; +import { fixtureURL } from '../../../../../utils/e2e-helpers.cjs'; test.describe('textarea: basic', () => { test('should type something textarea', async ({ page }) => { diff --git a/src/components/10-atoms/textarea/test/readonly/e2e.js b/src/components/10-atoms/textarea/test/readonly/e2e.js index 771015068a..c2a53092c1 100644 --- a/src/components/10-atoms/textarea/test/readonly/e2e.js +++ b/src/components/10-atoms/textarea/test/readonly/e2e.js @@ -1,5 +1,5 @@ import { expect, test } from '@playwright/test'; -import { fixtureURL } from '../../../../../utils/e2e-helpers'; +import { fixtureURL } from '../../../../../utils/e2e-helpers.cjs'; test.describe('textarea: readonly', () => { test('should be readonly', async ({ page }) => { diff --git a/src/components/10-atoms/toggle-switch/index.react.d.ts b/src/components/10-atoms/toggle-switch/index.d.ts similarity index 79% rename from src/components/10-atoms/toggle-switch/index.react.d.ts rename to src/components/10-atoms/toggle-switch/index.d.ts index e9884345c0..787c73d8ff 100644 --- a/src/components/10-atoms/toggle-switch/index.react.d.ts +++ b/src/components/10-atoms/toggle-switch/index.d.ts @@ -8,9 +8,7 @@ export interface AXAToggleSwitchProps { onToggle?: (checked: boolean) => void; } -declare function createAXAToggleSwitch( +declare function createAXAToggleSwitchReact( createElement: typeof React.createElement, version?: string ): React.ComponentType; - -export default createAXAToggleSwitch; diff --git a/src/components/10-atoms/toggle-switch/index.js b/src/components/10-atoms/toggle-switch/index.js index ffd943f6a2..8181f3a1e5 100644 --- a/src/components/10-atoms/toggle-switch/index.js +++ b/src/components/10-atoms/toggle-switch/index.js @@ -1,116 +1,5 @@ -import { css, html, LitElement, unsafeCSS } from 'lit'; -import { classMap } from 'lit/directives/class-map.js'; -import { defineVersioned } from '../../../utils/component-versioning'; -import fireCustomEvent from '../../../utils/custom-event'; -import applyDefaults from '../../../utils/apply-defaults'; -import styles from './index.scss'; +import AXAToggleSwitch from './index.wc.js'; -class AXAToggleSwitch extends LitElement { - static get tagName() { - return 'axa-toggle-switch'; - } +export { default as createAXAToggleSwitchReact } from './index.react.js'; - static get styles() { - return css` - ${unsafeCSS(styles)} - `; - } - - static get properties() { - return { - checked: { type: Boolean, reflect: true }, - disabled: { type: Boolean }, - error: { type: String }, - onToggle: { type: Function }, - isReact: { type: Boolean }, - }; - } - - constructor() { - super(); - - this.state = { - firstUpdate: true, - isControlled: false, - checked: false, - }; - - applyDefaults(this); - } - - handleSpacebar(e) { - // Key: Space - if (e.keyCode === 32) { - this.checked = !this.checked; - } - } - - set checked(value) { - const { - checked, - isReact, - state: { firstUpdate }, - } = this; - - if (firstUpdate && isReact) { - this.state.isControlled = true; - } - - this.state.checked = value; - this.requestUpdate('checked', checked); - } - - get checked() { - return this.state.checked; - } - - render() { - const { checked, disabled, error, handleChange } = this; - - const classes = { - 'a-toggle-switch__error-message-checked': error !== '', - }; - - const inputElement = html` - - `; - - return html` - - ${error} - `; - } - - handleChange(event) { - if (!this.state.isControlled) { - this.checked = event.target.checked; - fireCustomEvent( - 'axa-toggle-switch-toggle', - { checked: this.checked }, - this - ); - } - if (typeof this.onToggle === 'function') { - this.onToggle(this.checked); - } - } -} - -defineVersioned([AXAToggleSwitch], __VERSION_INFO__); export default AXAToggleSwitch; diff --git a/src/components/10-atoms/toggle-switch/index.react.js b/src/components/10-atoms/toggle-switch/index.react.js index dc90553c3b..130cb6ffa9 100644 --- a/src/components/10-atoms/toggle-switch/index.react.js +++ b/src/components/10-atoms/toggle-switch/index.react.js @@ -1,5 +1,5 @@ -import withReact from '../../../utils/with-react'; -import AXAToggleSwitch from './index'; +import withReact from '../../../utils/with-react.js'; +import AXAToggleSwitch from './index.wc.js'; export default (createElement, version) => withReact(createElement, AXAToggleSwitch, version); diff --git a/src/components/10-atoms/toggle-switch/index.wc.js b/src/components/10-atoms/toggle-switch/index.wc.js new file mode 100644 index 0000000000..3ef12719ac --- /dev/null +++ b/src/components/10-atoms/toggle-switch/index.wc.js @@ -0,0 +1,116 @@ +import { css, html, LitElement, unsafeCSS } from 'lit'; +import { classMap } from 'lit/directives/class-map.js'; +import { defineVersioned } from '../../../utils/component-versioning.js'; +import fireCustomEvent from '../../../utils/custom-event.js'; +import applyDefaults from '../../../utils/apply-defaults.js'; +import styles from './index.scss'; + +class AXAToggleSwitch extends LitElement { + static get tagName() { + return 'axa-toggle-switch'; + } + + static get styles() { + return css` + ${unsafeCSS(styles)} + `; + } + + static get properties() { + return { + checked: { type: Boolean, reflect: true }, + disabled: { type: Boolean }, + error: { type: String }, + onToggle: { type: Function }, + isReact: { type: Boolean }, + }; + } + + constructor() { + super(); + + this.state = { + firstUpdate: true, + isControlled: false, + checked: false, + }; + + applyDefaults(this); + } + + handleSpacebar(e) { + // Key: Space + if (e.keyCode === 32) { + this.checked = !this.checked; + } + } + + set checked(value) { + const { + checked, + isReact, + state: { firstUpdate }, + } = this; + + if (firstUpdate && isReact) { + this.state.isControlled = true; + } + + this.state.checked = value; + this.requestUpdate('checked', checked); + } + + get checked() { + return this.state.checked; + } + + render() { + const { checked, disabled, error, handleChange } = this; + + const classes = { + 'a-toggle-switch__error-message-checked': error !== '', + }; + + const inputElement = html` + + `; + + return html` + + ${error} + `; + } + + handleChange(event) { + if (!this.state.isControlled) { + this.checked = event.target.checked; + fireCustomEvent( + 'axa-toggle-switch-toggle', + { checked: this.checked }, + this + ); + } + if (typeof this.onToggle === 'function') { + this.onToggle(this.checked); + } + } +} + +defineVersioned([AXAToggleSwitch], __VERSION_INFO__); +export default AXAToggleSwitch; diff --git a/src/components/10-atoms/toggle-switch/package.json b/src/components/10-atoms/toggle-switch/package.json index 7d5d4b5018..b671b98b19 100644 --- a/src/components/10-atoms/toggle-switch/package.json +++ b/src/components/10-atoms/toggle-switch/package.json @@ -5,18 +5,19 @@ "author": "Pattern Warriors", "homepage": "https://github.com/axa-ch-webhub-cloud/pattern-library/tree/develop/src/components/10-atoms/toggle-switch#readme", "license": "Copyright 2021 AXA Versicherungen AG", - "scripts": { - "prepublishOnly": "../../../../scripts/build/prepublish.js", - "build": "rollup --silent --config ../../../../rollup.config.js", - "build-dist": "rollup --silent --config ../../../../rollup.config.dist.js", - "postpublish": "../../../../scripts/build/postpublish.js", - "watch": "rollup --watch --silent --config ../../../../rollup.config.js", - "genPackagelock": "npm i --package-lock-only" + "type": "module", + "main": "lib/index.js", + "exports": { + ".": "./lib/index.js" }, "files": [ - "lib", - "dist" + "lib" ], + "scripts": { + "build": "rollup --silent --config ../../../../rollup.config.cjs", + "watch": "rollup --watch --silent --config ../../../../rollup.config.cjs", + "genPackagelock": "npm i --package-lock-only" + }, "publishConfig": { "access": "public" }, diff --git a/src/components/10-atoms/toggle-switch/react/demo.jsx b/src/components/10-atoms/toggle-switch/react/demo.jsx index 281d5dbe31..c29143d89e 100644 --- a/src/components/10-atoms/toggle-switch/react/demo.jsx +++ b/src/components/10-atoms/toggle-switch/react/demo.jsx @@ -1,5 +1,5 @@ import React from 'react'; -import { createReactContainer } from '../../../../utils/create-react-container'; +import { createReactContainer } from '../../../../utils/create-react-container.jsx'; import changelog from '../CHANGELOG.md'; import readme from '../README.md'; import AXAToggleSwitchReact from './AXAToggleSwitchReact'; diff --git a/src/components/10-atoms/toggle-switch/react/test/basic/e2e.js b/src/components/10-atoms/toggle-switch/react/test/basic/e2e.js index 85ac33bce8..74f6337718 100644 --- a/src/components/10-atoms/toggle-switch/react/test/basic/e2e.js +++ b/src/components/10-atoms/toggle-switch/react/test/basic/e2e.js @@ -1,5 +1,5 @@ import { expect, test } from '@playwright/test'; -import { fixtureURL } from '../../../../../../utils/e2e-helpers'; +import { fixtureURL } from '../../../../../../utils/e2e-helpers.cjs'; test.describe('toggle-switch react: basic', () => { test('should fire correct change event in controlled mode', async ({ diff --git a/src/components/10-atoms/toggle-switch/story.js b/src/components/10-atoms/toggle-switch/story.js index bf6ff046b5..95d8dca693 100644 --- a/src/components/10-atoms/toggle-switch/story.js +++ b/src/components/10-atoms/toggle-switch/story.js @@ -1,7 +1,7 @@ import { html } from 'lit'; import changelog from './CHANGELOG.md'; import readme from './README.md'; -import './index'; +import './index.wc.js'; export default { title: 'Components/Toggle Switch', diff --git a/src/components/10-atoms/toggle-switch/test/basic/e2e.js b/src/components/10-atoms/toggle-switch/test/basic/e2e.js index 77575aa757..8ff0d514e1 100644 --- a/src/components/10-atoms/toggle-switch/test/basic/e2e.js +++ b/src/components/10-atoms/toggle-switch/test/basic/e2e.js @@ -1,5 +1,5 @@ import { expect, test } from '@playwright/test'; -import { fixtureURL } from '../../../../../utils/e2e-helpers'; +import { fixtureURL } from '../../../../../utils/e2e-helpers.cjs'; test.describe('toggle-switch: basic', () => { test('should set correct background-color to unchecked toggle-switch-slider', async ({ diff --git a/src/components/20-molecules/accordion/index.react.d.ts b/src/components/20-molecules/accordion/index.d.ts similarity index 84% rename from src/components/20-molecules/accordion/index.react.d.ts rename to src/components/20-molecules/accordion/index.d.ts index db369a07e2..7e9bc664a8 100644 --- a/src/components/20-molecules/accordion/index.react.d.ts +++ b/src/components/20-molecules/accordion/index.d.ts @@ -12,9 +12,7 @@ export interface AXAAccordionProps { onStateChange?: (isOpen: boolean) => void; } -declare function createAXAAccordion( +declare function createAXAAccordionReact( createElement: typeof React.createElement, version?: string ): React.ComponentType; - -export default createAXAAccordion; diff --git a/src/components/20-molecules/accordion/index.js b/src/components/20-molecules/accordion/index.js index 8958bae153..7e78c46481 100644 --- a/src/components/20-molecules/accordion/index.js +++ b/src/components/20-molecules/accordion/index.js @@ -1,161 +1,5 @@ -import { LitElement, html, css, unsafeCSS } from 'lit'; -import { unsafeHTML } from 'lit/directives/unsafe-html.js'; -import expandLess from '@axa-ch/materials/icons/material-design/expand_less.svg'; -import expandMore from '@axa-ch/materials/icons/material-design/expand_more.svg'; +import AXAAccordion from './index.wc.js'; -import { classMap } from 'lit/directives/class-map.js'; -import { defineVersioned } from '../../../utils/component-versioning'; -import { sanitizeSVG } from '../../../utils/sanitize'; -import applyDefaults from '../../../utils/apply-defaults'; -import fireCustomEvent from '../../../utils/custom-event'; -import createRefId from '../../../utils/create-ref-id'; -import styles from './index.scss'; - -const collapseContent = el => { - // get the height of the element's inner content, regardless of its actual size - const contentHeight = el.scrollHeight; - // temporarily disable all css transitions - const savedTransition = el.style.transition; - el.style.transition = ''; - - // on the next frame (as soon as the previous style change has taken effect), - // explicitly set the element's height to its current pixel height, so we - // aren't transitioning out of 'height: auto'. - requestAnimationFrame(() => { - el.style.height = `${contentHeight}px`; - el.style.transition = savedTransition; - - // on the next frame (as soon as the previous style change has taken effect), - // have the element transition to height: 0 - requestAnimationFrame(() => { - el.style.height = 0; - }); - }); -}; - -const expandContent = el => { - // get the height of the element's inner content, regardless of its actual size - const contentHeight = el.scrollHeight; - // have the element transition to the height of its inner content - el.style.height = `${contentHeight}px`; - - const expandAnimation = () => { - // remove "height" from the element's inline styles, so it can return to its initial value - el.style.removeProperty('height'); - }; - - // when the next CSS transition finishes (which should be the one we just triggered) - el.addEventListener('transitionend', expandAnimation, { once: true }); -}; - -class AXAAccordion extends LitElement { - static get tagName() { - return 'axa-accordion'; - } - - static get styles() { - return css` - ${unsafeCSS(styles)} - `; - } - - static get properties() { - return { - refId: { type: String, defaultValue: `accordion-${createRefId()}` }, - small: { type: Boolean }, - ariaLevel: { type: String }, - open: { type: Boolean }, - disabled: { type: Boolean }, - icon: { type: String }, - title: { type: String }, - onStateChange: { type: Function, attribute: false }, - }; - } - - constructor() { - super(); - applyDefaults(this); - this.toggleAccordion = this.toggleAccordion.bind(this); - } - - toggleAccordion() { - const accordionContent = this.shadowRoot.querySelector( - '.m-accordion__content' - ); - - if (!accordionContent || this.disabled) { - return; - } - - if (this.open) { - collapseContent(accordionContent); - } else { - expandContent(accordionContent); - } - - this.open = !this.open; - this.onStateChange(this.open); - fireCustomEvent('axa-state-change', this.open, this); - } - - render() { - const { refId, open, title, small, disabled, icon, ariaLevel = '' } = this; - const titleContainerClasses = { - 'm-accordion__header': true, - 'm-accordion__header--disabled': disabled, - }; - const titleClasses = { - 'm-accordion__title': true, - 'm-accordion__title--small': small, - }; - const contentClasses = { - 'm-accordion__content': true, - 'm-accordion__content--open': open, - }; - - return html` -
-
- -
-
- -
-
- `; - } -} - -defineVersioned([AXAAccordion], __VERSION_INFO__); +export { default as createAXAAccordionReact } from './index.react.js'; export default AXAAccordion; diff --git a/src/components/20-molecules/accordion/index.react.js b/src/components/20-molecules/accordion/index.react.js index e9079710b1..d53aa6df7e 100644 --- a/src/components/20-molecules/accordion/index.react.js +++ b/src/components/20-molecules/accordion/index.react.js @@ -1,5 +1,5 @@ -import withReact from '../../../utils/with-react'; -import AXAAccordion from './index'; +import withReact from '../../../utils/with-react.js'; +import AXAAccordion from './index.wc.js'; export default (createElement, version) => withReact(createElement, AXAAccordion, version); diff --git a/src/components/20-molecules/accordion/index.wc.js b/src/components/20-molecules/accordion/index.wc.js new file mode 100644 index 0000000000..947b0bc413 --- /dev/null +++ b/src/components/20-molecules/accordion/index.wc.js @@ -0,0 +1,163 @@ +import { LitElement, html, css, unsafeCSS } from 'lit'; +import { unsafeHTML } from 'lit/directives/unsafe-html.js'; +import { + Expand_lessSvg as expandLess, + Expand_moreSvg as expandMore, +} from '@axa-ch/materials/icons/material-design'; + +import { classMap } from 'lit/directives/class-map.js'; +import { defineVersioned } from '../../../utils/component-versioning.js'; +import { sanitizeSVG } from '../../../utils/sanitize.js'; +import applyDefaults from '../../../utils/apply-defaults.js'; +import fireCustomEvent from '../../../utils/custom-event.js'; +import createRefId from '../../../utils/create-ref-id.js'; +import styles from './index.scss'; + +const collapseContent = el => { + // get the height of the element's inner content, regardless of its actual size + const contentHeight = el.scrollHeight; + // temporarily disable all css transitions + const savedTransition = el.style.transition; + el.style.transition = ''; + + // on the next frame (as soon as the previous style change has taken effect), + // explicitly set the element's height to its current pixel height, so we + // aren't transitioning out of 'height: auto'. + requestAnimationFrame(() => { + el.style.height = `${contentHeight}px`; + el.style.transition = savedTransition; + + // on the next frame (as soon as the previous style change has taken effect), + // have the element transition to height: 0 + requestAnimationFrame(() => { + el.style.height = 0; + }); + }); +}; + +const expandContent = el => { + // get the height of the element's inner content, regardless of its actual size + const contentHeight = el.scrollHeight; + // have the element transition to the height of its inner content + el.style.height = `${contentHeight}px`; + + const expandAnimation = () => { + // remove "height" from the element's inline styles, so it can return to its initial value + el.style.removeProperty('height'); + }; + + // when the next CSS transition finishes (which should be the one we just triggered) + el.addEventListener('transitionend', expandAnimation, { once: true }); +}; + +class AXAAccordion extends LitElement { + static get tagName() { + return 'axa-accordion'; + } + + static get styles() { + return css` + ${unsafeCSS(styles)} + `; + } + + static get properties() { + return { + refId: { type: String, defaultValue: `accordion-${createRefId()}` }, + small: { type: Boolean }, + ariaLevel: { type: String }, + open: { type: Boolean }, + disabled: { type: Boolean }, + icon: { type: String }, + title: { type: String }, + onStateChange: { type: Function, attribute: false }, + }; + } + + constructor() { + super(); + applyDefaults(this); + this.toggleAccordion = this.toggleAccordion.bind(this); + } + + toggleAccordion() { + const accordionContent = this.shadowRoot.querySelector( + '.m-accordion__content' + ); + + if (!accordionContent || this.disabled) { + return; + } + + if (this.open) { + collapseContent(accordionContent); + } else { + expandContent(accordionContent); + } + + this.open = !this.open; + this.onStateChange(this.open); + fireCustomEvent('axa-state-change', this.open, this); + } + + render() { + const { refId, open, title, small, disabled, icon, ariaLevel = '' } = this; + const titleContainerClasses = { + 'm-accordion__header': true, + 'm-accordion__header--disabled': disabled, + }; + const titleClasses = { + 'm-accordion__title': true, + 'm-accordion__title--small': small, + }; + const contentClasses = { + 'm-accordion__content': true, + 'm-accordion__content--open': open, + }; + + return html` +
+
+ +
+
+ +
+
+ `; + } +} + +defineVersioned([AXAAccordion], __VERSION_INFO__); + +export default AXAAccordion; diff --git a/src/components/20-molecules/accordion/package-lock.json b/src/components/20-molecules/accordion/package-lock.json new file mode 100644 index 0000000000..69448cba0a --- /dev/null +++ b/src/components/20-molecules/accordion/package-lock.json @@ -0,0 +1,115 @@ +{ + "name": "@axa-ch/accordion", + "version": "1.2.5", + "lockfileVersion": 2, + "requires": true, + "packages": { + "": { + "name": "@axa-ch/accordion", + "version": "1.2.5", + "license": "Copyright AXA AG", + "dependencies": { + "@axa-ch/materials": "16.0.8", + "lit": "^2.2.1" + } + }, + "../../00-materials": { + "name": "@axa-ch/materials", + "version": "16.0.8", + "license": "Copyright 2019 AXA Versicherungen AG", + "dependencies": { + "lit": "^2.2.1" + }, + "devDependencies": { + "svgo": "^2.8.0" + } + }, + "node_modules/@axa-ch/materials": { + "resolved": "../../00-materials", + "link": true + }, + "node_modules/@lit/reactive-element": { + "version": "1.5.0", + "resolved": "https://registry.npmjs.org/@lit/reactive-element/-/reactive-element-1.5.0.tgz", + "integrity": "sha512-fQh9FDK0LPTwDk+0HhSZEtb8K0LTN1wXerwpGrWA+a8tWulYRDLI4vQDWp4GOIsewn0572KYV/oZ3+492D7osA==" + }, + "node_modules/@types/trusted-types": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.2.tgz", + "integrity": "sha512-F5DIZ36YVLE+PN+Zwws4kJogq47hNgX3Nx6WyDJ3kcplxyke3XIzB8uK5n/Lpm1HBsbGzd6nmGehL8cPekP+Tg==" + }, + "node_modules/lit": { + "version": "2.5.0", + "resolved": "https://registry.npmjs.org/lit/-/lit-2.5.0.tgz", + "integrity": "sha512-DtnUP6vR3l4Q8nRPPNBD+UxbAhwJPeky+OVbi3pdgMqm0g57xFSl1Sj64D1rIB+nVNdiVVg8YxB0hqKjvdadZA==", + "dependencies": { + "@lit/reactive-element": "^1.5.0", + "lit-element": "^3.2.0", + "lit-html": "^2.5.0" + } + }, + "node_modules/lit-element": { + "version": "3.2.2", + "resolved": "https://registry.npmjs.org/lit-element/-/lit-element-3.2.2.tgz", + "integrity": "sha512-6ZgxBR9KNroqKb6+htkyBwD90XGRiqKDHVrW/Eh0EZ+l+iC+u+v+w3/BA5NGi4nizAVHGYvQBHUDuSmLjPp7NQ==", + "dependencies": { + "@lit/reactive-element": "^1.3.0", + "lit-html": "^2.2.0" + } + }, + "node_modules/lit-html": { + "version": "2.5.0", + "resolved": "https://registry.npmjs.org/lit-html/-/lit-html-2.5.0.tgz", + "integrity": "sha512-bLHosg1XL3JRUcKdSVI0sLCs0y1wWrj2sqqAN3cZ7bDDPNgmDHH29RV48x6Wz3ZmkxIupaE+z7uXSZ/pXWAO1g==", + "dependencies": { + "@types/trusted-types": "^2.0.2" + } + } + }, + "dependencies": { + "@axa-ch/materials": { + "version": "file:../../00-materials", + "requires": { + "lit": "^2.2.1", + "svgo": "^2.8.0" + } + }, + "@lit/reactive-element": { + "version": "1.5.0", + "resolved": "https://registry.npmjs.org/@lit/reactive-element/-/reactive-element-1.5.0.tgz", + "integrity": "sha512-fQh9FDK0LPTwDk+0HhSZEtb8K0LTN1wXerwpGrWA+a8tWulYRDLI4vQDWp4GOIsewn0572KYV/oZ3+492D7osA==" + }, + "@types/trusted-types": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.2.tgz", + "integrity": "sha512-F5DIZ36YVLE+PN+Zwws4kJogq47hNgX3Nx6WyDJ3kcplxyke3XIzB8uK5n/Lpm1HBsbGzd6nmGehL8cPekP+Tg==" + }, + "lit": { + "version": "2.5.0", + "resolved": "https://registry.npmjs.org/lit/-/lit-2.5.0.tgz", + "integrity": "sha512-DtnUP6vR3l4Q8nRPPNBD+UxbAhwJPeky+OVbi3pdgMqm0g57xFSl1Sj64D1rIB+nVNdiVVg8YxB0hqKjvdadZA==", + "requires": { + "@lit/reactive-element": "^1.5.0", + "lit-element": "^3.2.0", + "lit-html": "^2.5.0" + } + }, + "lit-element": { + "version": "3.2.2", + "resolved": "https://registry.npmjs.org/lit-element/-/lit-element-3.2.2.tgz", + "integrity": "sha512-6ZgxBR9KNroqKb6+htkyBwD90XGRiqKDHVrW/Eh0EZ+l+iC+u+v+w3/BA5NGi4nizAVHGYvQBHUDuSmLjPp7NQ==", + "requires": { + "@lit/reactive-element": "^1.3.0", + "lit-html": "^2.2.0" + } + }, + "lit-html": { + "version": "2.5.0", + "resolved": "https://registry.npmjs.org/lit-html/-/lit-html-2.5.0.tgz", + "integrity": "sha512-bLHosg1XL3JRUcKdSVI0sLCs0y1wWrj2sqqAN3cZ7bDDPNgmDHH29RV48x6Wz3ZmkxIupaE+z7uXSZ/pXWAO1g==", + "requires": { + "@types/trusted-types": "^2.0.2" + } + } + } +} diff --git a/src/components/20-molecules/accordion/package.json b/src/components/20-molecules/accordion/package.json index 3b137e8240..2b27690f09 100644 --- a/src/components/20-molecules/accordion/package.json +++ b/src/components/20-molecules/accordion/package.json @@ -5,17 +5,19 @@ "author": "Pattern Warriors", "homepage": "https://github.com/axa-ch-webhub-cloud/pattern-library/tree/develop/src/components/20-molecules/accordion#readme", "license": "Copyright AXA AG", - "scripts": { - "prepublishOnly": "../../../../scripts/build/prepublish.js", - "build": "rollup --silent --config ../../../../rollup.config.js", - "build-dist": "rollup --silent --config ../../../../rollup.config.dist.js", - "postpublish": "../../../../scripts/build/postpublish.js", - "watch": "rollup --watch --silent --config ../../../../rollup.config.js" + "type": "module", + "main": "lib/index.js", + "exports": { + ".": "./lib/index.js" }, "files": [ - "lib", - "dist" + "lib" ], + "scripts": { + "build": "rollup --silent --config ../../../../rollup.config.cjs", + "watch": "rollup --watch --silent --config ../../../../rollup.config.cjs", + "genPackagelock": "npm i --package-lock-only" + }, "publishConfig": { "access": "public" }, diff --git a/src/components/20-molecules/accordion/react/AXAAcordion.jsx b/src/components/20-molecules/accordion/react/AXAAcordion.jsx index 14b949236a..042a11581a 100644 --- a/src/components/20-molecules/accordion/react/AXAAcordion.jsx +++ b/src/components/20-molecules/accordion/react/AXAAcordion.jsx @@ -1,5 +1,5 @@ import { createElement } from 'react'; -import createAXAAccordion from '../index.react'; +import createAXAAccordion from '../index.react.js'; const AXAAccordion = createAXAAccordion(createElement); diff --git a/src/components/20-molecules/accordion/react/demo.jsx b/src/components/20-molecules/accordion/react/demo.jsx index da95df5de0..3103c77e5e 100644 --- a/src/components/20-molecules/accordion/react/demo.jsx +++ b/src/components/20-molecules/accordion/react/demo.jsx @@ -1,7 +1,7 @@ import React from 'react'; import readme from '../README.md'; import changelog from '../CHANGELOG.md'; -import { createReactContainer } from '../../../../utils/create-react-container'; +import { createReactContainer } from '../../../../utils/create-react-container.jsx'; import DemoAccordionStateChange from './DemoAccordionStateChange'; export default { diff --git a/src/components/20-molecules/accordion/react/story.jsx b/src/components/20-molecules/accordion/react/story.jsx index 9c5372a444..8a5ae481b0 100644 --- a/src/components/20-molecules/accordion/react/story.jsx +++ b/src/components/20-molecules/accordion/react/story.jsx @@ -1,6 +1,6 @@ import React from 'react'; -import { createReactContainer } from '../../../../utils/create-react-container'; -import { args, argTypes } from '../story.args'; +import { createReactContainer } from '../../../../utils/create-react-container.jsx'; +import { args, argTypes } from '../story.args.js'; import readme from '../README.md'; import changelog from '../CHANGELOG.md'; import AXAAccordion from './AXAAcordion'; diff --git a/src/components/20-molecules/accordion/react/test/dynamic/e2e.js b/src/components/20-molecules/accordion/react/test/dynamic/e2e.js index 8d3641ccef..3a28b9dac3 100644 --- a/src/components/20-molecules/accordion/react/test/dynamic/e2e.js +++ b/src/components/20-molecules/accordion/react/test/dynamic/e2e.js @@ -1,5 +1,5 @@ import { expect, test } from '@playwright/test'; -import { fixtureURL } from '../../../../../../utils/e2e-helpers'; +import { fixtureURL } from '../../../../../../utils/e2e-helpers.cjs'; test.describe('button react: dynamic', () => { test('should change text on state change', async ({ page }) => { diff --git a/src/components/20-molecules/accordion/story.js b/src/components/20-molecules/accordion/story.js index 211dbb4473..fb84a898ee 100644 --- a/src/components/20-molecules/accordion/story.js +++ b/src/components/20-molecules/accordion/story.js @@ -1,8 +1,8 @@ import { html } from 'lit'; -import { args, argTypes } from './story.args'; +import { args, argTypes } from './story.args.js'; import readme from './README.md'; import changelog from './CHANGELOG.md'; -import './index'; +import './index.wc.js'; export default { title: 'Components/Accordion', diff --git a/src/components/20-molecules/accordion/test/basic/e2e.js b/src/components/20-molecules/accordion/test/basic/e2e.js index 2593db8f2d..49aefa825c 100644 --- a/src/components/20-molecules/accordion/test/basic/e2e.js +++ b/src/components/20-molecules/accordion/test/basic/e2e.js @@ -1,5 +1,5 @@ import { expect, test } from '@playwright/test'; -import { fixtureURL } from '../../../../../utils/e2e-helpers'; +import { fixtureURL } from '../../../../../utils/e2e-helpers.cjs'; test.describe('accordion: basic', () => { test('should open', async ({ page }) => { diff --git a/src/components/20-molecules/cookie-disclaimer/demo.js b/src/components/20-molecules/cookie-disclaimer/demo.js index c1eb90a197..8d3466d0d1 100644 --- a/src/components/20-molecules/cookie-disclaimer/demo.js +++ b/src/components/20-molecules/cookie-disclaimer/demo.js @@ -1,8 +1,8 @@ import changelog from './CHANGELOG.md'; import readme from './README.md'; -import './index'; -import '../../10-atoms/link'; -import '../../10-atoms/button'; +import './index.js'; +import '../../10-atoms/link/index.wc.js'; +import '../../10-atoms/button/index.wc.js'; export default { title: 'Examples/Cookie Disclaimer/Pure HTML', diff --git a/src/components/20-molecules/cookie-disclaimer/index.react.d.ts b/src/components/20-molecules/cookie-disclaimer/index.d.ts similarity index 81% rename from src/components/20-molecules/cookie-disclaimer/index.react.d.ts rename to src/components/20-molecules/cookie-disclaimer/index.d.ts index fd0c946b06..1a0a5dd745 100644 --- a/src/components/20-molecules/cookie-disclaimer/index.react.d.ts +++ b/src/components/20-molecules/cookie-disclaimer/index.d.ts @@ -11,9 +11,7 @@ export interface AXACookieDisclaimerProps { onClick?: (event: MouseEvent) => void; } -declare function createAXACookieDisclaimer( +declare function createAXACookieDisclaimerReact( createElement: typeof React.createElement, version?: string ): React.ComponentType; - -export default createAXACookieDisclaimer; diff --git a/src/components/20-molecules/cookie-disclaimer/index.js b/src/components/20-molecules/cookie-disclaimer/index.js index b303b54da5..2a6360200e 100644 --- a/src/components/20-molecules/cookie-disclaimer/index.js +++ b/src/components/20-molecules/cookie-disclaimer/index.js @@ -1,113 +1,5 @@ -import { LitElement, css, unsafeCSS } from 'lit'; -import { classMap } from 'lit/directives/class-map.js'; -import AXAButton from '@axa-ch/button'; -import AXAContainer from '@axa-ch/container'; +import AXACookieDisclaimer from './index.wc.js'; -import { - defineVersioned, - versionedHtml, -} from '../../../utils/component-versioning'; -import applyDefaults from '../../../utils/apply-defaults'; -import styles from './index.scss'; - -const _global = window || global; - -class AXACookieDisclaimer extends LitElement { - static get tagName() { - return 'axa-cookie-disclaimer'; - } - - static get styles() { - return css` - ${unsafeCSS(styles)} - `; - } - - static get properties() { - return { - onClick: { type: Function, attribute: false }, - buttonname: { type: String }, - title: { type: String }, - variant: { type: String }, - }; - } - - constructor() { - super(); - applyDefaults(this); - - defineVersioned([AXAContainer, AXAButton], __VERSION_INFO__, this); - } - - firstUpdated() { - if (this.hasAccepted()) { - this.selfDestruction(); - } else { - // Necessary to inject in the local dom a style tag for resetting - // the p tag as its is within 2 shadow roots (axa-cookie-disclaimer and axa-container). - // Property ::slotted has not beign used due to IE and EDGE compatibility - // and its standard-ification is still "Working Draft" the 21.06.2019 - const resetStyle = document.createElement('style'); - resetStyle.textContent = ` - axa-cookie-disclaimer p { - margin: 0; - padding: 0; - } - `; - this.appendChild(resetStyle); - } - } - - handleButtonClick(ev) { - const { localStorage } = _global; - if (localStorage) { - this.selfDestruction(); - localStorage.setItem( - 'axa-ch-cookie-disclaimer-accepted', - new Date().getTime() - ); - } - this.onClick(ev); - } - - selfDestruction() { - this.parentNode.removeChild(this); - } - - hasAccepted() { - const { localStorage } = _global; - return !!localStorage.getItem('axa-ch-cookie-disclaimer-accepted'); - } - - render() { - const { buttonname, title, variant } = this; - const classes = { - 'm-cookie-disclaimer': true, - 'm-cookie-disclaimer--fixed': variant === 'fixed', - }; - /* eslint-disable indent */ - return versionedHtml(this)` -
- -
-
-

${title}

- -
-
- - ${buttonname} - -
-
- -
- `; - } -} - -defineVersioned([AXACookieDisclaimer], __VERSION_INFO__); +export { default as createAXACookieDisclaimerReact } from './index.react.js'; export default AXACookieDisclaimer; diff --git a/src/components/20-molecules/cookie-disclaimer/index.react.js b/src/components/20-molecules/cookie-disclaimer/index.react.js index c85912cee8..75355ea2ba 100644 --- a/src/components/20-molecules/cookie-disclaimer/index.react.js +++ b/src/components/20-molecules/cookie-disclaimer/index.react.js @@ -1,5 +1,5 @@ -import withReact from '../../../utils/with-react'; -import AXACookieDisclaimer from './index'; +import withReact from '../../../utils/with-react.js'; +import AXACookieDisclaimer from './index.wc.js'; export default (createElement, version) => withReact(createElement, AXACookieDisclaimer, version); diff --git a/src/components/20-molecules/cookie-disclaimer/index.wc.js b/src/components/20-molecules/cookie-disclaimer/index.wc.js new file mode 100644 index 0000000000..ca4addaca5 --- /dev/null +++ b/src/components/20-molecules/cookie-disclaimer/index.wc.js @@ -0,0 +1,113 @@ +import { LitElement, css, unsafeCSS } from 'lit'; +import { classMap } from 'lit/directives/class-map.js'; +import AXAButton from '@axa-ch/button'; +import AXAContainer from '@axa-ch/container'; + +import { + defineVersioned, + versionedHtml, +} from '../../../utils/component-versioning.js'; +import applyDefaults from '../../../utils/apply-defaults.js'; +import styles from './index.scss'; + +const _global = window || global; + +class AXACookieDisclaimer extends LitElement { + static get tagName() { + return 'axa-cookie-disclaimer'; + } + + static get styles() { + return css` + ${unsafeCSS(styles)} + `; + } + + static get properties() { + return { + onClick: { type: Function, attribute: false }, + buttonname: { type: String }, + title: { type: String }, + variant: { type: String }, + }; + } + + constructor() { + super(); + applyDefaults(this); + + defineVersioned([AXAContainer, AXAButton], __VERSION_INFO__, this); + } + + firstUpdated() { + if (this.hasAccepted()) { + this.selfDestruction(); + } else { + // Necessary to inject in the local dom a style tag for resetting + // the p tag as its is within 2 shadow roots (axa-cookie-disclaimer and axa-container). + // Property ::slotted has not beign used due to IE and EDGE compatibility + // and its standard-ification is still "Working Draft" the 21.06.2019 + const resetStyle = document.createElement('style'); + resetStyle.textContent = ` + axa-cookie-disclaimer p { + margin: 0; + padding: 0; + } + `; + this.appendChild(resetStyle); + } + } + + handleButtonClick(ev) { + const { localStorage } = _global; + if (localStorage) { + this.selfDestruction(); + localStorage.setItem( + 'axa-ch-cookie-disclaimer-accepted', + new Date().getTime() + ); + } + this.onClick(ev); + } + + selfDestruction() { + this.parentNode.removeChild(this); + } + + hasAccepted() { + const { localStorage } = _global; + return !!localStorage.getItem('axa-ch-cookie-disclaimer-accepted'); + } + + render() { + const { buttonname, title, variant } = this; + const classes = { + 'm-cookie-disclaimer': true, + 'm-cookie-disclaimer--fixed': variant === 'fixed', + }; + /* eslint-disable indent */ + return versionedHtml(this)` +
+ +
+
+

${title}

+ +
+
+ + ${buttonname} + +
+
+ +
+ `; + } +} + +defineVersioned([AXACookieDisclaimer], __VERSION_INFO__); + +export default AXACookieDisclaimer; diff --git a/src/components/20-molecules/cookie-disclaimer/package.json b/src/components/20-molecules/cookie-disclaimer/package.json index 2a0b913ad3..7497e4f5e2 100644 --- a/src/components/20-molecules/cookie-disclaimer/package.json +++ b/src/components/20-molecules/cookie-disclaimer/package.json @@ -5,18 +5,19 @@ "author": "Pattern Warriors", "homepage": "https://github.com/axa-ch-webhub-cloud/pattern-library/tree/develop/src/components/20-molecules/cookie-disclaimer#readme", "license": "Copyright 2019 AXA Versicherungen AG", - "scripts": { - "prepublishOnly": "../../../../scripts/build/prepublish.js", - "build": "rollup --silent --config ../../../../rollup.config.js", - "build-dist": "rollup --silent --config ../../../../rollup.config.dist.js", - "postpublish": "../../../../scripts/build/postpublish.js", - "watch": "rollup --watch --silent --config ../../../../rollup.config.js", - "genPackagelock": "npm i --package-lock-only" + "type": "module", + "main": "lib/index.js", + "exports": { + ".": "./lib/index.js" }, "files": [ - "lib", - "dist" + "lib" ], + "scripts": { + "build": "rollup --silent --config ../../../../rollup.config.cjs", + "watch": "rollup --watch --silent --config ../../../../rollup.config.cjs", + "genPackagelock": "npm i --package-lock-only" + }, "publishConfig": { "access": "public" }, diff --git a/src/components/20-molecules/cookie-disclaimer/react/AXACookieDisclaimerReact.jsx b/src/components/20-molecules/cookie-disclaimer/react/AXACookieDisclaimerReact.jsx index 7dd2231a6c..ff6485311d 100644 --- a/src/components/20-molecules/cookie-disclaimer/react/AXACookieDisclaimerReact.jsx +++ b/src/components/20-molecules/cookie-disclaimer/react/AXACookieDisclaimerReact.jsx @@ -1,5 +1,5 @@ import { createElement } from 'react'; -import createAXACookieDisclaimerReact from '../index.react'; +import createAXACookieDisclaimerReact from '../index.react.js'; const AXACookieDisclaimerReact = createAXACookieDisclaimerReact(createElement); diff --git a/src/components/20-molecules/cookie-disclaimer/react/story.jsx b/src/components/20-molecules/cookie-disclaimer/react/story.jsx index 8ec178ebeb..b737f93396 100644 --- a/src/components/20-molecules/cookie-disclaimer/react/story.jsx +++ b/src/components/20-molecules/cookie-disclaimer/react/story.jsx @@ -1,6 +1,6 @@ import React from 'react'; -import { createReactContainer } from '../../../../utils/create-react-container'; -import { args, argTypes } from '../story.args'; +import { createReactContainer } from '../../../../utils/create-react-container.jsx'; +import { args, argTypes } from '../story.args.js'; import changelog from '../CHANGELOG.md'; import readme from '../README.md'; import AXACookieDisclaimerReact from './AXACookieDisclaimerReact'; diff --git a/src/components/20-molecules/cookie-disclaimer/story.js b/src/components/20-molecules/cookie-disclaimer/story.js index 2b4b4326a5..ac9e99f76b 100644 --- a/src/components/20-molecules/cookie-disclaimer/story.js +++ b/src/components/20-molecules/cookie-disclaimer/story.js @@ -1,9 +1,9 @@ import { html } from 'lit'; -import { args, argTypes } from './story.args'; +import { args, argTypes } from './story.args.js'; import changelog from './CHANGELOG.md'; import readme from './README.md'; -import './index'; -import '../../10-atoms/link'; +import './index.wc.js'; +import '../../10-atoms/link/index.wc.js'; export default { title: 'Components/Cookie Disclaimer', diff --git a/src/components/20-molecules/datepicker/demo.js b/src/components/20-molecules/datepicker/demo.js index 6cd6d8a545..7b72315659 100644 --- a/src/components/20-molecules/datepicker/demo.js +++ b/src/components/20-molecules/datepicker/demo.js @@ -1,8 +1,8 @@ import { html } from 'lit'; import changelog from './CHANGELOG.md'; import readme from './README.md'; -import './index'; -import '../../10-atoms/button'; +import './index.wc.js'; +import '../../10-atoms/button/index.wc.js'; export default { title: 'Examples/Datepicker/Pure HTML', diff --git a/src/components/20-molecules/datepicker/e2e.js b/src/components/20-molecules/datepicker/e2e.js index 344372210e..f558ee091b 100644 --- a/src/components/20-molecules/datepicker/e2e.js +++ b/src/components/20-molecules/datepicker/e2e.js @@ -1,5 +1,5 @@ import { expect, test } from '@playwright/test'; -import { fixtureURL } from '../../../utils/e2e-helpers'; +import { fixtureURL } from '../../../utils/e2e-helpers.cjs'; test.describe('datepicker', () => { test.describe('datepicker: form', () => { diff --git a/src/components/20-molecules/datepicker/helpers.js b/src/components/20-molecules/datepicker/helpers.js index fe8b4e1a41..e4d20c87f6 100644 --- a/src/components/20-molecules/datepicker/helpers.js +++ b/src/components/20-molecules/datepicker/helpers.js @@ -1,4 +1,4 @@ -import { range } from './utils/date'; +import { range } from './utils/date.js'; export const shouldMove = elem => { const element = elem.getBoundingClientRect(); diff --git a/src/components/20-molecules/datepicker/index.react.d.ts b/src/components/20-molecules/datepicker/index.d.ts similarity index 93% rename from src/components/20-molecules/datepicker/index.react.d.ts rename to src/components/20-molecules/datepicker/index.d.ts index 8e194d4764..dd6f7730b1 100644 --- a/src/components/20-molecules/datepicker/index.react.d.ts +++ b/src/components/20-molecules/datepicker/index.d.ts @@ -35,9 +35,7 @@ export interface AXADatepickerProps { name?: string; } -declare function createAXADatepicker( +declare function createAXADatepickerReact( createElement: typeof React.createElement, version?: string ): React.ComponentType; - -export default createAXADatepicker; diff --git a/src/components/20-molecules/datepicker/index.js b/src/components/20-molecules/datepicker/index.js index 82a1553e5b..4a05a34e82 100644 --- a/src/components/20-molecules/datepicker/index.js +++ b/src/components/20-molecules/datepicker/index.js @@ -1,787 +1,5 @@ -/* eslint-disable camelcase */ +import AXADatepicker from './index.wc.js'; -import AXADropdown from '@axa-ch/dropdown'; -import { - Date_rangeSvg, - Keyboard_arrow_leftSvg, - Keyboard_arrow_rightSvg, -} from '@axa-ch/materials/icons/material-design'; -import { html } from 'lit'; -import { unsafeHTML } from 'lit/directives/unsafe-html.js'; -import { classMap } from 'lit/directives/class-map.js'; -import { - defineVersioned, - versionedHtml, -} from '../../../utils/component-versioning'; -import createRefId from '../../../utils/create-ref-id'; -import fireCustomEvent from '../../../utils/custom-event'; -import debounce from '../../../utils/debounce'; -import NoShadowDOM from '../../../utils/no-shadow'; -import applyDefaults from '../../../utils/apply-defaults'; -import styles from './index.scss'; -import { - getAllLocaleMonthsArray, - getMonthMatrix, - getWeekdays, - parseLocalisedDateIfValid, -} from './utils/date'; -import { - parseAndFormatAllowedYears, - shouldMove, - applyEffect, - overrideDate, -} from './helpers'; - -// module constants -const dateRangeIcon = unsafeHTML(Date_rangeSvg); -const keyboardArrowLeftIcon = unsafeHTML(Keyboard_arrow_leftSvg); -const keyboardArrowRightIcon = unsafeHTML(Keyboard_arrow_rightSvg); -const EMPTY_FUNCTION = () => {}; - -// module globals -let openDatepickerInstance; - -// CE -class AXADatepicker extends NoShadowDOM { - static get tagName() { - return 'axa-datepicker'; - } - - static get styles() { - return styles; - } - - static get properties() { - const now = new Date(); - // formally mark the (internal) default date, s.t. it can be distinguished - // from dates that are set by applications (exploiting the malleability - // of system objects...) - now.type = 'default'; - return { - 'data-test-id': { type: String, reflect: true }, - open: { type: Boolean, reflect: true }, - value: { type: String, defaultValue: undefined }, // proper default for controlled-mode under React - defaultValue: { type: String }, - name: { type: String, reflect: true }, - locale: { type: String, reflect: true, defaultValue: 'de-CH' }, - date: { - type: Object, - converter: { - fromAttribute: value => (value ? new Date(value) : null), - toAttribute: value => (value ? value.toISOString() : null), - }, - defaultValue: now, - }, - outputdate: { type: String, reflect: true }, - year: { type: Number, reflect: true, defaultValue: undefined }, - month: { type: Number, reflect: true, defaultValue: undefined }, - day: { type: Number, reflect: true, defaultValue: undefined }, - refId: { type: String, defaultValue: `datepicker-${createRefId()}` }, - inverted: { type: Boolean, reflect: true }, - inputfield: { type: Boolean, reflect: true }, - allowedyears: { type: Array, reflect: true }, - monthitems: { type: Array }, - yearitems: { type: Array }, - cells: { type: Array }, - placeholder: { type: String, defaultValue: 'Please select a date' }, - monthtitle: { type: String, defaultValue: 'Choose month' }, - yeartitle: { type: String, defaultValue: 'Choose year' }, - invalid: { type: Boolean, reflect: true }, - invaliddatetext: { type: String, defaultValue: 'Invalid date' }, - error: { type: String, reflect: true }, - disabled: { type: Boolean, reflect: true }, - required: { type: Boolean, reflect: true }, - label: { type: String, reflect: true }, - checkMark: { type: Boolean, reflect: true }, - autofocus: { type: Boolean, reflect: true }, - onChange: { type: Function, attribute: false }, - onDateChange: { type: Function, attribute: false }, - onFocus: { type: Function, attribute: false }, - onBlur: { type: Function, attribute: false }, - onInputfieldKeyUp: { type: Function, attribute: false }, - }; - } - - get isControlled() { - return this.state.isControlled && this.isReact; - } - - set value(newValue) { - const { - state: { isControlled, value }, - state, - } = this; - // first value coming in indicates controlledness? - if (!isControlled && newValue !== undefined) { - // yes, remember in model state - state.isControlled = true; - } - // update state - state.value = newValue; - // manual re-render, necessary for custom setters - this.requestUpdate('value', value); - } - - get value() { - const { - inputfield, - input, - state: { value }, - } = this; - const inputFieldValue = inputfield && input ? input.value : ''; - return this.isControlled ? value : inputFieldValue; - } - - set date(value) { - if (value && value instanceof Date) { - const oldValue = this._date; - // a date is considered externally pre-set iff it's not an internal 'default' date; - // tracking pre-set date-related property values is important to differentiate between - // which dates are to be considered as selected-by-application-or-user. - this.initDate(value, { preset: value.type !== 'default' }); - this.requestUpdate('date', oldValue); - } - } - - get date() { - return this._date; - } - - set day(value) { - if (typeof value === 'number') { - const oldValue = this._day; - this._day = value; - this.initDate(null, { preset: true }); - this.requestUpdate('day', oldValue); - } - } - - get day() { - return this._day; - } - - set month(value) { - if (typeof value === 'number') { - const oldValue = this._day; - this._month = value; - this.initDate(null, { preset: true }); - this.requestUpdate('month', oldValue); - } - } - - get month() { - return this._month; - } - - set year(value) { - if (typeof value === 'number') { - const oldValue = this._day; - this._year = value; - this.initDate(null, { preset: true }); - this.requestUpdate('year', oldValue); - } - } - - get year() { - return this._year; - } - - setMonthAndYearItems(month, year) { - const _month = typeof month === 'number' ? month : this.month; - const _year = typeof year === 'number' ? year : this.year; - - this.monthitems = getAllLocaleMonthsArray(this.locale).map( - (item, index) => ({ - selected: index === _month, - name: item.toString(), - value: index.toString(), - }) - ); - - this.yearitems = this.allowedyears.reverse().map(item => ({ - selected: item === _year, - name: item.toString(), - value: item.toString(), - })); - } - - formatDate(date, options = {}) { - return parseLocalisedDateIfValid(date, options); - } - - constructor() { - super(); - // internal model state - this.state = {}; - applyDefaults(this); - this.handleWindowKeyDown = this.handleWindowKeyDown.bind(this); - this.handleBodyClick = this.handleBodyClick.bind(this); - - this.debouncedHandleViewportCheck = debounce( - () => this.handleViewportCheck(this.input), - 250 - ); - - // ensure we use the versioned variant of axa-dropdown internally - - defineVersioned([AXADropdown], __VERSION_INFO__, this); - } - - // throttle re-rendering to once per frame (too many updates with default microtask timing before...) - performUpdate() { - new Promise(resolve => - // eslint-disable-next-line no-promise-executor-return - window.requestAnimationFrame(() => resolve()) - ).then(() => super.performUpdate()); - } - - shouldUpdate(changedProperties) { - if (changedProperties.has('allowedyears')) { - this.allowedyears = parseAndFormatAllowedYears( - this.year, - this.allowedyears - ); - } - if (changedProperties.has('value')) { - this.validate(this.value); - } - return true; - } - - render() { - const { - _date, - state, - refId = '', - label, - required, - disabled, - checkMark, - } = this; - - const [month, year] = [ - _date ? _date.getMonth() : this.month, - _date ? _date.getFullYear() : this.year, - ]; - - this.setMonthAndYearItems(month, year); - - const { error, invalid, invaliddatetext } = this; - const needToShowError = (error || invalid) && invaliddatetext; - - const cellClasses = ({ sameMonth, today, inactive, selected }) => { - const isToday = !selected && today; - - return classMap({ - 'm-datepicker__calendar-cell': true, - 'js-datepicker__calender-body__cell': true, - 'm-datepicker__calendar-not-current-month': !sameMonth, - 'm-datepicker__calendar-current-month': sameMonth, - 'm-datepicker__calendar-today': isToday, - 'm-datepicker__calendar-selected-day': selected, - 'm-datepicker__calendar-day--inactive': inactive, - }); - }; - - const monthDropdown = versionedHtml(this)` - - - `; - - const yearDropdown = versionedHtml(this)` - - `; - - const noPreviousAllowedYear = year === this.navigateYear(-1) && month === 0; - const noNextAllowedYear = year === this.navigateYear() && month === 11; - - return html` -
- ${label && - html` - - `} - ${!this.inputfield - ? '' - : html` -
- - - ${checkMark - ? html` - - - - ` - : ''} -
- `} - ${(this.open && !disabled) || !this.inputfield - ? html` -
-
-
- ${monthDropdown} ${yearDropdown} -
- -
-
- ${this.weekdays && - this.weekdays.map( - day => - html` - ${day} - ` - )} -
-
- -
- ${this.cells && - this.cells.map( - (cell, index) => - html` - - ` - )} -
-
- - -
- ` - : ''} - ${needToShowError - ? html` - ${this.invaliddatetext} - ` - : html``} -
- `; - } - - firstUpdated() { - this.input = this.querySelector('.js-datepicker__input'); - - window.addEventListener('keydown', this.handleWindowKeyDown); - window.addEventListener('click', this.handleBodyClick); - - const { - input, - isReact, - defaultValue, - day, - month, - year, - autofocus, - startDate, - } = this; - - if (input) { - if (autofocus) { - input.focus(); - } - - window.setTimeout(() => { - window.addEventListener('resize', this.debouncedHandleViewportCheck); - window.addEventListener('scroll', this.debouncedHandleViewportCheck); - this.handleViewportCheck(input); - }, 100); - - if (isReact && defaultValue) { - input.value = defaultValue; - this.validate(defaultValue); - } - } - - if (this.isControlled) { - return; - } - - this.startDate = overrideDate(year, month, day, startDate); - - this.initDate(); - } - - updated(changedProperties) { - if (changedProperties.has('open') && this.open) { - applyEffect(this); - this.handleViewportCheck(this.input); - } - } - - disconnectedCallback() { - super.disconnectedCallback(); - window.removeEventListener('keydown', this.handleWindowKeyDown); - window.removeEventListener('click', this.handleBodyClick); - window.removeEventListener('resize', this.debouncedHandleViewportCheck); - window.removeEventListener('scroll', this.debouncedHandleViewportCheck); - } - - // Methods - - initDate(date, options = {}) { - if (date) { - // eslint-disable-next-line no-restricted-globals - const isValidDateObject = date instanceof Date && !isNaN(+date); - if (isValidDateObject) { - this.startDate = date; - this._day = date.getDate(); - this._year = date.getFullYear(); - this._month = date.getMonth(); - } - } - - // does the range of allowed years exclude the starting year? - if ( - this.allowedyears && - this.year && - !this.allowedyears.includes(this.year) - ) { - // yes, so in order to prevent the datepicker from showing an "empty" month sheet - // without any days to select, force-pick the starting year as the first of the range of allowed years - const [newStartYear] = this.allowedyears; - this.year = newStartYear; - } - - const { - _year, - _month, - _day, - allowedyears, - locale, - startDate, - isControlled, - } = this; - const { output, tentative, preset, canonicalFormat } = options; - this._date = overrideDate(_year, _month, _day, startDate); - const { _date } = this; - // did the start date get actually overridden via one or more of the - // date parts (year, month, day)? - if (preset) { - // yes, so the resulting _date is application-selected - delete _date.type; - } - - this.allowedyears = parseAndFormatAllowedYears(_year, allowedyears); - - if (output) { - this.outputdate = this.formatDate(_date, { - formatted: canonicalFormat && !isControlled, - }); - } - - const isUserOrApplicationSelected = !tentative && preset; - - if (output || isUserOrApplicationSelected) { - // remember selected date, ensuring it is an independent copy - // (so that navigation - which changes _date - does not inadvertantly change the - // selected date with it) - this._selectedDate = new Date(_date); - } - - this.cells = getMonthMatrix(_date, this._selectedDate, this.allowedyears); - this.weekdays = getWeekdays(_date, locale); - - return this.outputdate; - } - - handleViewportCheck(baseElem) { - const calendar = this.querySelector('.js-datepicker__wrap'); - if (!calendar) { - return; - } - const bodyRectangle = { - top: 0, - bottom: document.documentElement.scrollHeight, - }; - const calendarRectangle = calendar.getBoundingClientRect(); - const calendarBelowPage = calendarRectangle.bottom > bodyRectangle.bottom; - const calendarAbovePage = calendarRectangle.top < bodyRectangle.top; - const newInverted = - calendarBelowPage || (shouldMove(baseElem) && !calendarAbovePage); - if (newInverted !== this.inverted) { - this.inverted = newInverted; - } - } - - toggleDatepicker() { - if (!this.open) { - if (openDatepickerInstance && openDatepickerInstance !== this) { - openDatepickerInstance.open = false; - } - this.open = true; - openDatepickerInstance = this; - } else { - openDatepickerInstance = null; - applyEffect(this).then(() => { - this.open = false; - }); - } - } - - validate(value, pure, options = {}) { - const { invaliddatetext, allowedyears } = this; - const validDate = parseLocalisedDateIfValid(value); - const validYear = date => allowedyears.indexOf(date.getFullYear()) > -1; - const isValid = validDate && validYear(validDate); - if (pure) { - return isValid ? validDate : null; - } - this.error = null; - if (isValid) { - this.initDate(validDate, { - output: true, - canonicalFormat: options.canonicalFormat, - }); // sets this._date - } else if (value && invaliddatetext) { - this.error = invaliddatetext; - this._date = null; - } - return this._date; - } - - // Events - handleWindowKeyDown(e) { - if (e.key === 'Escape' || e.key === 'Esc' || e.keyCode === 27) { - e.preventDefault(); - if (this.open) { - this.toggleDatepicker(); - } - } - } - - handleDatepickerClick(e) { - e.stopPropagation(); - fireCustomEvent('axa-dropdown-close', null, window); - } - - handleBodyClick(e) { - e.stopPropagation(); - if (this.open) { - this.toggleDatepicker(); - } - } - - handleChangeDropdownMonth(e) { - e.preventDefault(); - const month = parseInt(e.detail, 10); - if (typeof month === 'number') { - this.initDate(overrideDate(null, month, null, this._date), { - tentative: true, - }); - } - } - - handleChangeDropdownYear(e) { - e.preventDefault(); - const year = parseInt(e.detail, 10); - if (typeof year === 'number') { - this.initDate(overrideDate(year, null, null, this._date), { - tentative: true, - }); - } - } - - handleInputButtonClick(e) { - e.stopPropagation(); - if (this.inputfield) { - this.initDate(this._date); - this.toggleDatepicker(); - } - } - - handleInputChange(e) { - const { - onChange = EMPTY_FUNCTION, - input, - state, - name, - onDateChange = EMPTY_FUNCTION, - } = this; - onChange(e); - const validDate = this.validate(input.value, true); - fireCustomEvent( - 'axa-input', - { value: input.value, date: validDate, name }, - this - ); - if (validDate) { - onDateChange(validDate); - } - if (this.isControlled) { - const { value: stateValue } = state; - input.value = stateValue; - } else if (validDate) { - this.fireEvents(validDate); - } - } - - handleBlur(e) { - const { input, onBlur } = this; - this.validate(input.value, false, { canonicalFormat: true }); - onBlur(e); - } - - fireEvents(validDate) { - if (validDate) { - const { name } = this; - const value = this.formatDate(validDate); - const details = { value, date: validDate, name }; - fireCustomEvent('axa-change', value, this, { bubbles: false }); - fireCustomEvent('change', details, this, { bubbles: false }); - } - } - - handleDatepickerCalendarCellClick(e) { - e.preventDefault(); - e.stopPropagation(); - e.target.blur(); // prevent the ugly focus ring after the click - - const cellIndex = parseInt(e.target.dataset.index, 10); - const date = e.target.dataset.value; - this.index = cellIndex; - const value = this.initDate(new Date(date), { - output: true, - canonicalFormat: true, - }); - this.setMonthAndYearItems(); - - const { - _date, - inputfield, - input, - onChange, - onDateChange, - state: { value: stateValue }, - } = this; - onChange({ target: { value } }); - onDateChange(_date); - this.fireEvents(_date); - if (inputfield) { - this.toggleDatepicker(); - input.value = this.isControlled ? stateValue : value; - } - // since the calendar UI only allows legal dates to be picked, - // any preexisting error should be cleared - this.error = null; - } - - handleNavigateToPrevMonth() { - this.navigateMonth(-1); - } - - handleNavigateToNextMonth() { - this.navigateMonth(); - } - - // Navigates to the next allowed month, when offset = 1. - // Navigates to the previous allowed month, when offset = -1. - // Has no effect, when there is no next/previous allowed month. - navigateMonth(offset = 1) { - const MIN = 0; - const MAX = 11; - const { min, max, abs } = Math; - - let month = parseInt(this.month, 10) + offset; - let year = parseInt(this.year, 10); - - // Month out of bounds? - if (month < MIN || month > MAX) { - // Clamp month to valid range - month = min(max(month, MIN), MAX); - - // Try to adjust year (might fail if not an allowed year) - year = this.navigateYear(offset); - - // Year adjustment succeeded? - if (year !== this.year) { - // Correct month - month = abs(month - MAX); - } - } - - this.initDate(overrideDate(year, month, null, this._date), { - tentative: true, - }); - } - - // Returns the next allowed year, when offset = 1. - // Returns the previous allowed year, when offset = -1. - // Returns the currently selected year, when there is no next/previous allowed year. - navigateYear(offset = 1) { - const MIN = 0; - const MAX = this.allowedyears.length - 1; - const { min, max } = Math; - - let indexOfYear = this.allowedyears.findIndex(year => year === this.year); - - indexOfYear -= offset; - indexOfYear = min(max(indexOfYear, MIN), MAX); // prevent out-of-bounds navigation - - return parseInt(this.allowedyears[indexOfYear], 10); - } -} - -defineVersioned([AXADatepicker], __VERSION_INFO__); +export { default as createAXADatepickerReact } from './index.react.js'; export default AXADatepicker; diff --git a/src/components/20-molecules/datepicker/index.react.js b/src/components/20-molecules/datepicker/index.react.js index 16adae0f3b..b1c4b4df98 100644 --- a/src/components/20-molecules/datepicker/index.react.js +++ b/src/components/20-molecules/datepicker/index.react.js @@ -1,5 +1,5 @@ -import withReact from '../../../utils/with-react'; -import AXADatepicker from './index'; +import withReact from '../../../utils/with-react.js'; +import AXADatepicker from './index.wc.js'; export default (createElement, version) => withReact(createElement, AXADatepicker, version); diff --git a/src/components/20-molecules/datepicker/index.wc.js b/src/components/20-molecules/datepicker/index.wc.js new file mode 100644 index 0000000000..b53c03eea5 --- /dev/null +++ b/src/components/20-molecules/datepicker/index.wc.js @@ -0,0 +1,787 @@ +/* eslint-disable camelcase */ + +import AXADropdown from '@axa-ch/dropdown'; +import { + Date_rangeSvg, + Keyboard_arrow_leftSvg, + Keyboard_arrow_rightSvg, +} from '@axa-ch/materials/icons/material-design'; +import { html } from 'lit'; +import { unsafeHTML } from 'lit/directives/unsafe-html.js'; +import { classMap } from 'lit/directives/class-map.js'; +import { + defineVersioned, + versionedHtml, +} from '../../../utils/component-versioning.js'; +import createRefId from '../../../utils/create-ref-id.js'; +import fireCustomEvent from '../../../utils/custom-event.js'; +import debounce from '../../../utils/debounce.js'; +import NoShadowDOM from '../../../utils/no-shadow.js'; +import applyDefaults from '../../../utils/apply-defaults.js'; +import styles from './index.scss'; +import { + getAllLocaleMonthsArray, + getMonthMatrix, + getWeekdays, + parseLocalisedDateIfValid, +} from './utils/date.js'; +import { + parseAndFormatAllowedYears, + shouldMove, + applyEffect, + overrideDate, +} from './helpers.js'; + +// module constants +const dateRangeIcon = unsafeHTML(Date_rangeSvg); +const keyboardArrowLeftIcon = unsafeHTML(Keyboard_arrow_leftSvg); +const keyboardArrowRightIcon = unsafeHTML(Keyboard_arrow_rightSvg); +const EMPTY_FUNCTION = () => {}; + +// module globals +let openDatepickerInstance; + +// CE +class AXADatepicker extends NoShadowDOM { + static get tagName() { + return 'axa-datepicker'; + } + + static get styles() { + return styles; + } + + static get properties() { + const now = new Date(); + // formally mark the (internal) default date, s.t. it can be distinguished + // from dates that are set by applications (exploiting the malleability + // of system objects...) + now.type = 'default'; + return { + 'data-test-id': { type: String, reflect: true }, + open: { type: Boolean, reflect: true }, + value: { type: String, defaultValue: undefined }, // proper default for controlled-mode under React + defaultValue: { type: String }, + name: { type: String, reflect: true }, + locale: { type: String, reflect: true, defaultValue: 'de-CH' }, + date: { + type: Object, + converter: { + fromAttribute: value => (value ? new Date(value) : null), + toAttribute: value => (value ? value.toISOString() : null), + }, + defaultValue: now, + }, + outputdate: { type: String, reflect: true }, + year: { type: Number, reflect: true, defaultValue: undefined }, + month: { type: Number, reflect: true, defaultValue: undefined }, + day: { type: Number, reflect: true, defaultValue: undefined }, + refId: { type: String, defaultValue: `datepicker-${createRefId()}` }, + inverted: { type: Boolean, reflect: true }, + inputfield: { type: Boolean, reflect: true }, + allowedyears: { type: Array, reflect: true }, + monthitems: { type: Array }, + yearitems: { type: Array }, + cells: { type: Array }, + placeholder: { type: String, defaultValue: 'Please select a date' }, + monthtitle: { type: String, defaultValue: 'Choose month' }, + yeartitle: { type: String, defaultValue: 'Choose year' }, + invalid: { type: Boolean, reflect: true }, + invaliddatetext: { type: String, defaultValue: 'Invalid date' }, + error: { type: String, reflect: true }, + disabled: { type: Boolean, reflect: true }, + required: { type: Boolean, reflect: true }, + label: { type: String, reflect: true }, + checkMark: { type: Boolean, reflect: true }, + autofocus: { type: Boolean, reflect: true }, + onChange: { type: Function, attribute: false }, + onDateChange: { type: Function, attribute: false }, + onFocus: { type: Function, attribute: false }, + onBlur: { type: Function, attribute: false }, + onInputfieldKeyUp: { type: Function, attribute: false }, + }; + } + + get isControlled() { + return this.state.isControlled && this.isReact; + } + + set value(newValue) { + const { + state: { isControlled, value }, + state, + } = this; + // first value coming in indicates controlledness? + if (!isControlled && newValue !== undefined) { + // yes, remember in model state + state.isControlled = true; + } + // update state + state.value = newValue; + // manual re-render, necessary for custom setters + this.requestUpdate('value', value); + } + + get value() { + const { + inputfield, + input, + state: { value }, + } = this; + const inputFieldValue = inputfield && input ? input.value : ''; + return this.isControlled ? value : inputFieldValue; + } + + set date(value) { + if (value && value instanceof Date) { + const oldValue = this._date; + // a date is considered externally pre-set iff it's not an internal 'default' date; + // tracking pre-set date-related property values is important to differentiate between + // which dates are to be considered as selected-by-application-or-user. + this.initDate(value, { preset: value.type !== 'default' }); + this.requestUpdate('date', oldValue); + } + } + + get date() { + return this._date; + } + + set day(value) { + if (typeof value === 'number') { + const oldValue = this._day; + this._day = value; + this.initDate(null, { preset: true }); + this.requestUpdate('day', oldValue); + } + } + + get day() { + return this._day; + } + + set month(value) { + if (typeof value === 'number') { + const oldValue = this._day; + this._month = value; + this.initDate(null, { preset: true }); + this.requestUpdate('month', oldValue); + } + } + + get month() { + return this._month; + } + + set year(value) { + if (typeof value === 'number') { + const oldValue = this._day; + this._year = value; + this.initDate(null, { preset: true }); + this.requestUpdate('year', oldValue); + } + } + + get year() { + return this._year; + } + + setMonthAndYearItems(month, year) { + const _month = typeof month === 'number' ? month : this.month; + const _year = typeof year === 'number' ? year : this.year; + + this.monthitems = getAllLocaleMonthsArray(this.locale).map( + (item, index) => ({ + selected: index === _month, + name: item.toString(), + value: index.toString(), + }) + ); + + this.yearitems = this.allowedyears.reverse().map(item => ({ + selected: item === _year, + name: item.toString(), + value: item.toString(), + })); + } + + formatDate(date, options = {}) { + return parseLocalisedDateIfValid(date, options); + } + + constructor() { + super(); + // internal model state + this.state = {}; + applyDefaults(this); + this.handleWindowKeyDown = this.handleWindowKeyDown.bind(this); + this.handleBodyClick = this.handleBodyClick.bind(this); + + this.debouncedHandleViewportCheck = debounce( + () => this.handleViewportCheck(this.input), + 250 + ); + + // ensure we use the versioned variant of axa-dropdown internally + + defineVersioned([AXADropdown], __VERSION_INFO__, this); + } + + // throttle re-rendering to once per frame (too many updates with default microtask timing before...) + performUpdate() { + new Promise(resolve => + // eslint-disable-next-line no-promise-executor-return + window.requestAnimationFrame(() => resolve()) + ).then(() => super.performUpdate()); + } + + shouldUpdate(changedProperties) { + if (changedProperties.has('allowedyears')) { + this.allowedyears = parseAndFormatAllowedYears( + this.year, + this.allowedyears + ); + } + if (changedProperties.has('value')) { + this.validate(this.value); + } + return true; + } + + render() { + const { + _date, + state, + refId = '', + label, + required, + disabled, + checkMark, + } = this; + + const [month, year] = [ + _date ? _date.getMonth() : this.month, + _date ? _date.getFullYear() : this.year, + ]; + + this.setMonthAndYearItems(month, year); + + const { error, invalid, invaliddatetext } = this; + const needToShowError = (error || invalid) && invaliddatetext; + + const cellClasses = ({ sameMonth, today, inactive, selected }) => { + const isToday = !selected && today; + + return classMap({ + 'm-datepicker__calendar-cell': true, + 'js-datepicker__calender-body__cell': true, + 'm-datepicker__calendar-not-current-month': !sameMonth, + 'm-datepicker__calendar-current-month': sameMonth, + 'm-datepicker__calendar-today': isToday, + 'm-datepicker__calendar-selected-day': selected, + 'm-datepicker__calendar-day--inactive': inactive, + }); + }; + + const monthDropdown = versionedHtml(this)` + + + `; + + const yearDropdown = versionedHtml(this)` + + `; + + const noPreviousAllowedYear = year === this.navigateYear(-1) && month === 0; + const noNextAllowedYear = year === this.navigateYear() && month === 11; + + return html` +
+ ${label && + html` + + `} + ${!this.inputfield + ? '' + : html` +
+ + + ${checkMark + ? html` + + + + ` + : ''} +
+ `} + ${(this.open && !disabled) || !this.inputfield + ? html` +
+
+
+ ${monthDropdown} ${yearDropdown} +
+ +
+
+ ${this.weekdays && + this.weekdays.map( + day => + html` + ${day} + ` + )} +
+
+ +
+ ${this.cells && + this.cells.map( + (cell, index) => + html` + + ` + )} +
+
+ + +
+ ` + : ''} + ${needToShowError + ? html` + ${this.invaliddatetext} + ` + : html``} +
+ `; + } + + firstUpdated() { + this.input = this.querySelector('.js-datepicker__input'); + + window.addEventListener('keydown', this.handleWindowKeyDown); + window.addEventListener('click', this.handleBodyClick); + + const { + input, + isReact, + defaultValue, + day, + month, + year, + autofocus, + startDate, + } = this; + + if (input) { + if (autofocus) { + input.focus(); + } + + window.setTimeout(() => { + window.addEventListener('resize', this.debouncedHandleViewportCheck); + window.addEventListener('scroll', this.debouncedHandleViewportCheck); + this.handleViewportCheck(input); + }, 100); + + if (isReact && defaultValue) { + input.value = defaultValue; + this.validate(defaultValue); + } + } + + if (this.isControlled) { + return; + } + + this.startDate = overrideDate(year, month, day, startDate); + + this.initDate(); + } + + updated(changedProperties) { + if (changedProperties.has('open') && this.open) { + applyEffect(this); + this.handleViewportCheck(this.input); + } + } + + disconnectedCallback() { + super.disconnectedCallback(); + window.removeEventListener('keydown', this.handleWindowKeyDown); + window.removeEventListener('click', this.handleBodyClick); + window.removeEventListener('resize', this.debouncedHandleViewportCheck); + window.removeEventListener('scroll', this.debouncedHandleViewportCheck); + } + + // Methods + + initDate(date, options = {}) { + if (date) { + // eslint-disable-next-line no-restricted-globals + const isValidDateObject = date instanceof Date && !isNaN(+date); + if (isValidDateObject) { + this.startDate = date; + this._day = date.getDate(); + this._year = date.getFullYear(); + this._month = date.getMonth(); + } + } + + // does the range of allowed years exclude the starting year? + if ( + this.allowedyears && + this.year && + !this.allowedyears.includes(this.year) + ) { + // yes, so in order to prevent the datepicker from showing an "empty" month sheet + // without any days to select, force-pick the starting year as the first of the range of allowed years + const [newStartYear] = this.allowedyears; + this.year = newStartYear; + } + + const { + _year, + _month, + _day, + allowedyears, + locale, + startDate, + isControlled, + } = this; + const { output, tentative, preset, canonicalFormat } = options; + this._date = overrideDate(_year, _month, _day, startDate); + const { _date } = this; + // did the start date get actually overridden via one or more of the + // date parts (year, month, day)? + if (preset) { + // yes, so the resulting _date is application-selected + delete _date.type; + } + + this.allowedyears = parseAndFormatAllowedYears(_year, allowedyears); + + if (output) { + this.outputdate = this.formatDate(_date, { + formatted: canonicalFormat && !isControlled, + }); + } + + const isUserOrApplicationSelected = !tentative && preset; + + if (output || isUserOrApplicationSelected) { + // remember selected date, ensuring it is an independent copy + // (so that navigation - which changes _date - does not inadvertantly change the + // selected date with it) + this._selectedDate = new Date(_date); + } + + this.cells = getMonthMatrix(_date, this._selectedDate, this.allowedyears); + this.weekdays = getWeekdays(_date, locale); + + return this.outputdate; + } + + handleViewportCheck(baseElem) { + const calendar = this.querySelector('.js-datepicker__wrap'); + if (!calendar) { + return; + } + const bodyRectangle = { + top: 0, + bottom: document.documentElement.scrollHeight, + }; + const calendarRectangle = calendar.getBoundingClientRect(); + const calendarBelowPage = calendarRectangle.bottom > bodyRectangle.bottom; + const calendarAbovePage = calendarRectangle.top < bodyRectangle.top; + const newInverted = + calendarBelowPage || (shouldMove(baseElem) && !calendarAbovePage); + if (newInverted !== this.inverted) { + this.inverted = newInverted; + } + } + + toggleDatepicker() { + if (!this.open) { + if (openDatepickerInstance && openDatepickerInstance !== this) { + openDatepickerInstance.open = false; + } + this.open = true; + openDatepickerInstance = this; + } else { + openDatepickerInstance = null; + applyEffect(this).then(() => { + this.open = false; + }); + } + } + + validate(value, pure, options = {}) { + const { invaliddatetext, allowedyears } = this; + const validDate = parseLocalisedDateIfValid(value); + const validYear = date => allowedyears.indexOf(date.getFullYear()) > -1; + const isValid = validDate && validYear(validDate); + if (pure) { + return isValid ? validDate : null; + } + this.error = null; + if (isValid) { + this.initDate(validDate, { + output: true, + canonicalFormat: options.canonicalFormat, + }); // sets this._date + } else if (value && invaliddatetext) { + this.error = invaliddatetext; + this._date = null; + } + return this._date; + } + + // Events + handleWindowKeyDown(e) { + if (e.key === 'Escape' || e.key === 'Esc' || e.keyCode === 27) { + e.preventDefault(); + if (this.open) { + this.toggleDatepicker(); + } + } + } + + handleDatepickerClick(e) { + e.stopPropagation(); + fireCustomEvent('axa-dropdown-close', null, window); + } + + handleBodyClick(e) { + e.stopPropagation(); + if (this.open) { + this.toggleDatepicker(); + } + } + + handleChangeDropdownMonth(e) { + e.preventDefault(); + const month = parseInt(e.detail, 10); + if (typeof month === 'number') { + this.initDate(overrideDate(null, month, null, this._date), { + tentative: true, + }); + } + } + + handleChangeDropdownYear(e) { + e.preventDefault(); + const year = parseInt(e.detail, 10); + if (typeof year === 'number') { + this.initDate(overrideDate(year, null, null, this._date), { + tentative: true, + }); + } + } + + handleInputButtonClick(e) { + e.stopPropagation(); + if (this.inputfield) { + this.initDate(this._date); + this.toggleDatepicker(); + } + } + + handleInputChange(e) { + const { + onChange = EMPTY_FUNCTION, + input, + state, + name, + onDateChange = EMPTY_FUNCTION, + } = this; + onChange(e); + const validDate = this.validate(input.value, true); + fireCustomEvent( + 'axa-input', + { value: input.value, date: validDate, name }, + this + ); + if (validDate) { + onDateChange(validDate); + } + if (this.isControlled) { + const { value: stateValue } = state; + input.value = stateValue; + } else if (validDate) { + this.fireEvents(validDate); + } + } + + handleBlur(e) { + const { input, onBlur } = this; + this.validate(input.value, false, { canonicalFormat: true }); + onBlur(e); + } + + fireEvents(validDate) { + if (validDate) { + const { name } = this; + const value = this.formatDate(validDate); + const details = { value, date: validDate, name }; + fireCustomEvent('axa-change', value, this, { bubbles: false }); + fireCustomEvent('change', details, this, { bubbles: false }); + } + } + + handleDatepickerCalendarCellClick(e) { + e.preventDefault(); + e.stopPropagation(); + e.target.blur(); // prevent the ugly focus ring after the click + + const cellIndex = parseInt(e.target.dataset.index, 10); + const date = e.target.dataset.value; + this.index = cellIndex; + const value = this.initDate(new Date(date), { + output: true, + canonicalFormat: true, + }); + this.setMonthAndYearItems(); + + const { + _date, + inputfield, + input, + onChange, + onDateChange, + state: { value: stateValue }, + } = this; + onChange({ target: { value } }); + onDateChange(_date); + this.fireEvents(_date); + if (inputfield) { + this.toggleDatepicker(); + input.value = this.isControlled ? stateValue : value; + } + // since the calendar UI only allows legal dates to be picked, + // any preexisting error should be cleared + this.error = null; + } + + handleNavigateToPrevMonth() { + this.navigateMonth(-1); + } + + handleNavigateToNextMonth() { + this.navigateMonth(); + } + + // Navigates to the next allowed month, when offset = 1. + // Navigates to the previous allowed month, when offset = -1. + // Has no effect, when there is no next/previous allowed month. + navigateMonth(offset = 1) { + const MIN = 0; + const MAX = 11; + const { min, max, abs } = Math; + + let month = parseInt(this.month, 10) + offset; + let year = parseInt(this.year, 10); + + // Month out of bounds? + if (month < MIN || month > MAX) { + // Clamp month to valid range + month = min(max(month, MIN), MAX); + + // Try to adjust year (might fail if not an allowed year) + year = this.navigateYear(offset); + + // Year adjustment succeeded? + if (year !== this.year) { + // Correct month + month = abs(month - MAX); + } + } + + this.initDate(overrideDate(year, month, null, this._date), { + tentative: true, + }); + } + + // Returns the next allowed year, when offset = 1. + // Returns the previous allowed year, when offset = -1. + // Returns the currently selected year, when there is no next/previous allowed year. + navigateYear(offset = 1) { + const MIN = 0; + const MAX = this.allowedyears.length - 1; + const { min, max } = Math; + + let indexOfYear = this.allowedyears.findIndex(year => year === this.year); + + indexOfYear -= offset; + indexOfYear = min(max(indexOfYear, MIN), MAX); // prevent out-of-bounds navigation + + return parseInt(this.allowedyears[indexOfYear], 10); + } +} + +defineVersioned([AXADatepicker], __VERSION_INFO__); + +export default AXADatepicker; diff --git a/src/components/20-molecules/datepicker/package.json b/src/components/20-molecules/datepicker/package.json index 75316721b4..ec34af2ec7 100644 --- a/src/components/20-molecules/datepicker/package.json +++ b/src/components/20-molecules/datepicker/package.json @@ -5,18 +5,19 @@ "author": "Pattern Warriors", "homepage": "https://github.com/axa-ch-webhub-cloud/pattern-library/blob/develop/src/components/20-molecules/datepicker#readme", "license": "Copyright 2019 AXA Versicherungen AG", - "scripts": { - "prepublishOnly": "../../../../scripts/build/prepublish.js", - "build": "rollup --silent --config ../../../../rollup.config.js", - "build-dist": "rollup --silent --config ../../../../rollup.config.dist.js", - "postpublish": "../../../../scripts/build/postpublish.js", - "watch": "rollup --watch --silent --config ../../../../rollup.config.js", - "genPackagelock": "npm i --package-lock-only" + "type": "module", + "main": "lib/index.js", + "exports": { + ".": "./lib/index.js" }, "files": [ - "lib", - "dist" + "lib" ], + "scripts": { + "build": "rollup --silent --config ../../../../rollup.config.cjs", + "watch": "rollup --watch --silent --config ../../../../rollup.config.cjs", + "genPackagelock": "npm i --package-lock-only" + }, "publishConfig": { "access": "public" }, diff --git a/src/components/20-molecules/datepicker/react/AXADatepickerReact.jsx b/src/components/20-molecules/datepicker/react/AXADatepickerReact.jsx index 1403da6bee..3c45fffe80 100644 --- a/src/components/20-molecules/datepicker/react/AXADatepickerReact.jsx +++ b/src/components/20-molecules/datepicker/react/AXADatepickerReact.jsx @@ -1,5 +1,5 @@ import { createElement } from 'react'; -import createAXADatepickerReact from '../index.react'; +import createAXADatepickerReact from '../index.react.js'; const AXADatepickerReact = createAXADatepickerReact(createElement); export default AXADatepickerReact; diff --git a/src/components/20-molecules/datepicker/react/AXADatepickerReactPod.jsx b/src/components/20-molecules/datepicker/react/AXADatepickerReactPod.jsx index fa05ff9567..eeaf4358da 100644 --- a/src/components/20-molecules/datepicker/react/AXADatepickerReactPod.jsx +++ b/src/components/20-molecules/datepicker/react/AXADatepickerReactPod.jsx @@ -1,5 +1,5 @@ import { createElement } from 'react'; -import createAXADatepickerReact from '../index.react'; +import createAXADatepickerReact from '../index.react.js'; const podNameAsVersionSuffix = 'rsv'; diff --git a/src/components/20-molecules/datepicker/react/AxaCheckboxReactPod.jsx b/src/components/20-molecules/datepicker/react/AxaCheckboxReactPod.jsx index bfa91ada36..68665db7ef 100644 --- a/src/components/20-molecules/datepicker/react/AxaCheckboxReactPod.jsx +++ b/src/components/20-molecules/datepicker/react/AxaCheckboxReactPod.jsx @@ -1,6 +1,6 @@ import { createElement } from 'react'; -import createAXACheckboxReact from '../../../10-atoms/checkbox/index.react'; +import createAXACheckboxReact from '../../../10-atoms/checkbox/index.react.js'; const podNameAsVersionSuffix = 'rsv'; diff --git a/src/components/20-molecules/datepicker/react/demo.jsx b/src/components/20-molecules/datepicker/react/demo.jsx index 3e99747fd7..4d4d3ac6ff 100644 --- a/src/components/20-molecules/datepicker/react/demo.jsx +++ b/src/components/20-molecules/datepicker/react/demo.jsx @@ -1,7 +1,7 @@ import React from 'react'; import changelog from '../CHANGELOG.md'; import readme from '../README.md'; -import { createReactContainer } from '../../../../utils/create-react-container'; +import { createReactContainer } from '../../../../utils/create-react-container.jsx'; import DemoDatepickerExternalValidation from './DemoDatepickerExternalValidation'; import DemoDatepickerNoInputfield from './DemoDatepickerNoInputfield'; import DemoDatepickerOnDateChange from './DemoDatepickerOnDateChange'; diff --git a/src/components/20-molecules/datepicker/react/story.jsx b/src/components/20-molecules/datepicker/react/story.jsx index 8407bbc00f..dae146ecdd 100644 --- a/src/components/20-molecules/datepicker/react/story.jsx +++ b/src/components/20-molecules/datepicker/react/story.jsx @@ -1,6 +1,6 @@ import React from 'react'; -import { createReactContainer } from '../../../../utils/create-react-container'; -import { args, argTypes } from '../story.args'; +import { createReactContainer } from '../../../../utils/create-react-container.jsx'; +import { args, argTypes } from '../story.args.js'; import changelog from '../CHANGELOG.md'; import readme from '../README.md'; import AXADatepickerReact from './AXADatepickerReact'; diff --git a/src/components/20-molecules/datepicker/story.js b/src/components/20-molecules/datepicker/story.js index 18b77e656f..ebed60179d 100644 --- a/src/components/20-molecules/datepicker/story.js +++ b/src/components/20-molecules/datepicker/story.js @@ -1,8 +1,8 @@ import { html } from 'lit'; -import { args, argTypes } from './story.args'; +import { args, argTypes } from './story.args.js'; import changelog from './CHANGELOG.md'; import readme from './README.md'; -import './index'; +import './index.wc.js'; export default { title: 'Components/Datepicker', diff --git a/src/components/20-molecules/datepicker/ui.test.js b/src/components/20-molecules/datepicker/ui.test.js index a86be01a3d..1d59b1d043 100644 --- a/src/components/20-molecules/datepicker/ui.test.js +++ b/src/components/20-molecules/datepicker/ui.test.js @@ -1,6 +1,6 @@ import { ClientFunction, Selector } from 'testcafe'; import { DatePickerAccessor } from './test.accessor'; -import { range, parseLocalisedDateIfValid } from './utils/date'; +import { range, parseLocalisedDateIfValid } from './utils/date.js'; const host = process.env.TEST_HOST_STORYBOOK_URL; diff --git a/src/components/20-molecules/datepicker/unit.test.js b/src/components/20-molecules/datepicker/unit.test.js index 9a65884e61..cb7f5cc00f 100644 --- a/src/components/20-molecules/datepicker/unit.test.js +++ b/src/components/20-molecules/datepicker/unit.test.js @@ -1,6 +1,6 @@ import { describe, it, expect } from 'vitest'; -import { getWeekdays } from './utils/date'; -import { parseAndFormatAllowedYears } from './helpers'; +import { getWeekdays } from './utils/date.js'; +import { parseAndFormatAllowedYears } from './helpers.js'; describe('Datepicker unit tests', () => { it('should return correct month names with English abreviations', () => { diff --git a/src/components/20-molecules/dropdown/demo.js b/src/components/20-molecules/dropdown/demo.js index b9d4f80632..ab49e3c666 100644 --- a/src/components/20-molecules/dropdown/demo.js +++ b/src/components/20-molecules/dropdown/demo.js @@ -1,8 +1,8 @@ import { html } from 'lit'; import changelog from './CHANGELOG.md'; import readme from './README.md'; -import './index'; -import '../../10-atoms/button'; +import './index.wc.js'; +import '../../10-atoms/button/index.wc.js'; export default { title: 'Examples/Dropdown/Pure HTML', diff --git a/src/components/20-molecules/dropdown/e2e.js b/src/components/20-molecules/dropdown/e2e.js index caea4d7eb2..fce9919fcb 100644 --- a/src/components/20-molecules/dropdown/e2e.js +++ b/src/components/20-molecules/dropdown/e2e.js @@ -1,5 +1,5 @@ import { expect, test } from '@playwright/test'; -import { fixtureURL } from '../../../utils/e2e-helpers'; +import { fixtureURL } from '../../../utils/e2e-helpers.cjs'; test.describe('dropdown', () => { test.describe('dropdown: form', () => { diff --git a/src/components/20-molecules/dropdown/index.react.d.ts b/src/components/20-molecules/dropdown/index.d.ts similarity index 92% rename from src/components/20-molecules/dropdown/index.react.d.ts rename to src/components/20-molecules/dropdown/index.d.ts index 3fbf2d916a..e76eede143 100644 --- a/src/components/20-molecules/dropdown/index.react.d.ts +++ b/src/components/20-molecules/dropdown/index.d.ts @@ -37,9 +37,7 @@ export interface AXADropdownProps { showValue?: boolean; } -declare function createAXADropdown( +declare function createAXADropdownReact( createElement: typeof React.createElement, version?: string ): React.ComponentType; - -export default createAXADropdown; diff --git a/src/components/20-molecules/dropdown/index.js b/src/components/20-molecules/dropdown/index.js index ec445d4517..8278619711 100644 --- a/src/components/20-molecules/dropdown/index.js +++ b/src/components/20-molecules/dropdown/index.js @@ -1,607 +1,5 @@ -/* eslint-disable camelcase */ -/* eslint-disable no-restricted-globals */ +import AXADropdown from './index.wc.js'; -import { html } from 'lit'; -import { unsafeHTML } from 'lit/directives/unsafe-html.js'; -import { classMap } from 'lit/directives/class-map.js'; -import { Expand_moreSvg } from '@axa-ch/materials/icons/material-design'; -import debounce from '../../../utils/debounce'; -import styles from './index.scss'; -import NoShadowDOM from '../../../utils/no-shadow'; -import { defineVersioned } from '../../../utils/component-versioning'; -import fireCustomEvent from '../../../utils/custom-event'; -import createRefId from '../../../utils/create-ref-id'; -import typecheck from '../../../utils/typecheck'; -import findIndex from '../../../utils/find-index'; -import applyDefaults from '../../../utils/apply-defaults'; - -// module constants -const ARROW_ICON = unsafeHTML(Expand_moreSvg); -const DEBOUNCE_DELAY = 250; // milliseconds -const DROPDOWN_UL_MAXHEIGHT = '200px'; -const DOWN = '40'; // keyCode -const UP = '38'; // keyCode -const ARROW_KEY = { [UP]: -1, [DOWN]: 1 }; - -const WORD_END = '\x00'; // separator character that doesn't occur in normal user input -const INDEX_END = '\x01'; // ditto -const AUTOSUGGEST_INACTIVITY_DELAY = 300; // milliseconds - -// module globals -let openDropdownInstance; - -// helper functions -const shouldMove = elem => { - const boundingBox = elem.getBoundingClientRect(); - const bottomIsInViewport = - boundingBox.bottom <= - (window.innerHeight || document.documentElement.clientHeight); - const enoughSpaceToMove = boundingBox.top > boundingBox.height; - return !bottomIsInViewport && enoughSpaceToMove; -}; - -const handleViewportCheck = elem => { - if (elem && shouldMove(elem)) { - elem.style.maxHeight = DROPDOWN_UL_MAXHEIGHT; - } -}; - -const forEach = (array, callback, scope) => { - for (let i = 0, n = array.length; i < n; i++) { - callback.call(scope, i, array[i]); // passes back stuff we need - } -}; - -const nativeItemsMapper = ({ name, value, selected, _disabled }, index) => { - return html` - - `; -}; - -// prettier-ignore -const contentItemsMapper = - (clickHandler, defaultTitle) => - ({ name, value, selected, _disabled }, index) => { - const classes = { - 'm-dropdown__item': true, - 'm-dropdown__item--is-selected': selected, - }; - return _disabled - ? html`` - : html` -
  • - -
    • - `; - }; - -const defaultTitleIfNeeded = (title, anotherSelection) => - title - ? [{ name: title, _disable: true, selected: !anotherSelection, value: '' }] - : []; - -// CE -class AXADropdown extends NoShadowDOM { - static get tagName() { - return 'axa-dropdown'; - } - - static get styles() { - return styles; - } - - static get properties() { - return { - 'data-test-id': { type: String, reflect: true }, - maxHeight: { type: String, reflect: true }, - refId: { type: String, defaultValue: `dropdown-${createRefId()}` }, - label: { type: String }, - required: { type: Boolean }, - items: { type: Array, /* participate in typecheck'ing */ check: true }, - open: { type: Boolean, reflect: true }, - value: { type: String, defaultValue: undefined }, // proper default for controlled-mode under React - name: { type: String, reflect: true }, - defaultTitle: { type: String, reflect: true }, - native: { type: Boolean, reflect: true }, - checkMark: { type: Boolean, reflect: true }, - invalid: { type: Boolean, reflect: true }, - error: { type: String, reflect: true }, - disabled: { type: Boolean, reflect: true }, - cropText: { type: Boolean, reflect: true }, - showValue: { type: Boolean, reflect: true }, - onChange: { type: Function, attribute: false }, - onFocus: { type: Function, attribute: false }, - onBlur: { type: Function, attribute: false }, - useCase: { type: String, reflect: true, noAccessor: true }, - isReact: { type: Boolean }, - }; - } - - set value(newValue) { - const { - state: { isControlled, value, firstTime }, - state, - } = this; - // first value coming in indicates controlledness? - if (!isControlled && newValue !== undefined && firstTime) { - // yes, remember in model state - state.isControlled = true; - } - // update state - state.value = newValue; - state.firstTime = false; - // manual re-render, necessary for custom setters - this.requestUpdate('value', value); - } - - get value() { - return this.state.value; - } - - get isControlled() { - return this.state.isControlled && this.isReact; - } - - constructor() { - super(); - // internal properties - this.state = { isControlled: false, firstTime: true }; - this._typedSoFar = ''; - // Very important that applyDefaults is *after* state initialization - // because applyDefaults changes 'value' and needs firstTime: true flag - // to define controlledness - applyDefaults(this); - // bound event handlers (so scope and de-registration work as expected) - this.handleWindowClick = this.handleWindowClick.bind(this); - this.handleDropdownItemClick = this.handleDropdownItemClick.bind(this); - this.handleDropdownClick = this.handleDropdownClick.bind(this); - this.handleResize = debounce( - () => handleViewportCheck(this.dropdown), - DEBOUNCE_DELAY - ); - } - - openDropdown(open) { - this.open = open; - const links = this.querySelectorAll('.js-dropdown__button'); - forEach(links, (_, link) => - link.setAttribute('tabindex', open ? '0' : '-1') - ); - if (open) { - // close any other open instance in the same document - if (openDropdownInstance) { - openDropdownInstance.open = false; - } - // focus on selected item s.t. enhanced-mode keyboard navigation works like native - this.focusOnButton( - this.selectedIndex, - /* already includes default-title offset */ true - ); - } - openDropdownInstance = open ? this : /* help GC */ null; - } - - handleWindowClick() { - if (this.open) { - this.openDropdown(false); - } - } - - focusOnButton(index, includesOffset) { - if (typeof index === 'number') { - const { defaultTitle, dropdown } = this; - const defaultTitleOffset = defaultTitle && !includesOffset ? 1 : 0; - dropdown - .querySelector( - `.js-dropdown__button[data-index="${index + defaultTitleOffset}"]` - ) - .focus(); - } - } - - navigateByKeyboard(direction) { - const { items, defaultTitle } = this; - const { activeElement } = document; - const defaultTitleOffset = defaultTitle ? 1 : 0; - - // don't get involved if preexisting focus outside enhanced-mode DOM - if ( - !this.contains(activeElement) || - !/(?:BUTTON|LI)/.test(activeElement.tagName) - ) { - return; - } - - // get selected item's index - let focussedIndex = - parseInt(activeElement.dataset.index || '0', 10) - defaultTitleOffset; - - // move in the direction of the arrow key - focussedIndex += direction; - - // we landed on a focussable item? - if (items[focussedIndex] && !items[focussedIndex]._disabled) { - // yes, put the focus on it - this.focusOnButton(focussedIndex); - } - } - - handleKeyUp(e) { - const { key, keyCode } = e; - e.preventDefault(); - const arrowKey = ARROW_KEY[keyCode.toString()]; - // close dropdown via key? - if (key === 'Escape' || key === 'Esc' || keyCode === 27) { - this.openDropdown(false); - } else if (arrowKey) { - // arrow keys ↑, ↓, - // case 1: dropdown closed - if (!this.open) { - // open it in order to mimick native (narrow window widths or 'native' mode), - // use DOM-API 'selectedIndex' to find out which option the click targeted - const realTarget = - target instanceof HTMLSelectElement - ? target.children[target.selectedIndex] - : target; - - const { value, index } = realTarget.dataset; - const { onChange, selectedIndex, name } = this; - - this.openDropdown(false); - - // no change compared to previous selection? - const integerIndex = parseInt(index, 10) || 0; // || 0: parseInt may return NaN - if ( - selectedIndex === integerIndex && - /* in controlled mode, additionally clicked value and model value must agree - (this may e.g. be violated in 1st click after 'unfreezing' a frozen model) */ - (!this.isControlled || value === this.value) - ) { - return; - } - - this.selectedIndex = integerIndex; - const [{ name: label }] = this.findByValue(value); - - const details = { - value, - name, - label, - index: integerIndex, - }; - - onChange(details); - if (!this.isControlled) { - // declare the following value update to be uncontrolled - this.state.firstTime = false; - this.value = value; // triggers re-render - fireCustomEvent('axa-change', value, this, { bubbles: false }); - fireCustomEvent('change', details, this, { bubbles: false }); - } - } - - findByValue(value, indexOnly) { - const { items = [], defaultTitle } = this; - const itemIndex = findIndex(items, ({ selected, value: selectedValue }) => - value === null - ? selected - : selectedValue === value || selectedValue === parseInt(value, 10) - ); - if (indexOnly) { - return itemIndex; - } - - // no item selected, but defaultTitle set? - if (value === null && itemIndex < 0 && defaultTitle) { - return [false]; // signal caller (render) to use defaultTitle as title - } - - return [items[itemIndex], itemIndex]; - } - - scrollIntoView(index) { - const realIndex = - typeof index === 'number' ? index : this.select.selectedIndex; - const itemNode = this.querySelector( - `.js-dropdown__button[data-index="${realIndex}"]` - ); - if (itemNode) { - // note: IE does not interpret scrollIntoView options, therefore - // that the selected item might not be centered there. - itemNode.scrollIntoView({ block: 'center' }); - } - } - - updateItems(value, scrollIntoView) { - if (typeof value !== 'string') { - return; - } - const [item, itemIndex] = this.findByValue(value); - if (!item) { - return; - } - const { name } = item; - this.value = value || name || ''; - // clone items array with updated selected property - // (the fact that items are cloned ensures re-render!) - this.items = this.items.map((_item, index) => { - _item.selected = index === itemIndex; - return _item; - }); - - if (scrollIntoView) { - this.scrollIntoView(itemIndex); - } - } - - /* last overrideable lifecycle point *before* render: - put side-effects there that influence render */ - shouldUpdate(changedProperties) { - typecheck(this, { items: [] }); - // implicit change of value via newly selected item? - if ( - !this.isControlled && - changedProperties.has('items') && - changedProperties.size === 1 - ) { - // make change explicit - const selectedItem = this.items.find(item => item.selected); - if (selectedItem) { - this.value = selectedItem.value; - } - } - this.updateItems(this.value); - return true; - } - - render() { - const { - items = [], - name = '', - label = '', - refId = '', - defaultTitle = '', - checkMark, - invalid, - error, - required, - disabled, - handleDropdownItemClick, - handleDropdownClick, - handleKeyUp, - maxHeight, - useCase, - } = this; - - const [selectedItem, selectedItemIndex] = this.findByValue(null); - this.title = selectedItem ? selectedItem.name : defaultTitle; - if (selectedItem) { - const { value } = selectedItem; - if (value) { - this.value = value; - } - if (useCase === 'axa-input-phone') { - this.selectedIndex = selectedItemIndex + (defaultTitle ? 1 : 0); - } - } - - return html` - ${label && - html` - - `} -
    -
    - -
    - - ${ARROW_ICON} -
    - - - - - -
      - ${items.map( - contentItemsMapper(handleDropdownItemClick, defaultTitle) - )} -
    - -
    - ${checkMark - ? html` - - - - ` - : ''} -
    - ${invalid && error - ? html` - ${error} - ` - : ''} - `; - } - - firstUpdated() { - this.button = this.querySelector('.js-dropdown__toggle'); - this.dropdown = this.querySelector('.js-dropdown__content'); - this.select = this.querySelector('.js-dropdown__select'); - window.addEventListener('resize', this.handleResize); - window.addEventListener('click', this.handleWindowClick); - window.addEventListener('axa-dropdown-close', this.handleWindowClick); - } - - // build one long string of words paired with their indices in `items`, - // separating the elements in each pair with suitable control characters - // that do not occur in typed input - buildAutosuggestDictionary() { - this._autosuggestLetters = new Set(); - const { items, _autosuggestLetters: letters } = this; - - this._autosuggestDictionary = - items - .filter(item => !item.disabled && item.name) - .map((item, index) => { - // normalize word for purposes of matching - const word = item.name.toLowerCase(); - // construct a set of all letters in word - // (used for an early filter over keystrokes) - word.split('').forEach(letter => { - letters.add(letter.toLowerCase()); - }); - return `${INDEX_END}${word}${WORD_END}${index}`; - }) - .join('') + INDEX_END; - } - - updated(changedProperties) { - const { select, defaultTitle } = this; - // adjust native behaviour + this.openDropdown(true); + } else { + // case 2: already open, navigate + this.navigateByKeyboard(arrowKey); + } + } else { + // selection of first matching dropdown item by quickly typing a prefix + // of the item's 'name' value, e.g. 'afgh' for selecting Afghanistan in a country list + this.handleAutosuggest(key); + } + } + + handleAutosuggest(key) { + // ready for autosuggestions, by having focus on the non-native UI? + if (document.activeElement !== this.button) { + // no, bail out + return; + } + // do we have even a chance of matching for the key that was just pressed? + const character = key.toLowerCase(); + if (!this._autosuggestLetters.has(character)) { + // no, bail out + return; + } + + this._typedSoFar += character; + // wait for certain period of keyboard inactivitity... + clearTimeout(this._timer); + this._timer = setTimeout(() => { + // ... before trying to match what was typed sofar against items + const { _autosuggestDictionary, _typedSoFar, items } = this; + const match = _autosuggestDictionary.indexOf(INDEX_END + _typedSoFar); + if (match > -1) { + // we have a match, determine the corresponding item ... + const matchIndexPos = + _autosuggestDictionary.indexOf(WORD_END, match) + 1; + const firstSelectedItem = parseInt( + _autosuggestDictionary.slice(matchIndexPos), + 10 + ); + // ... and its value + const { value } = items[firstSelectedItem]; + // re-render to visually select matched item + this.updateItems(value, 'scrollIntoView'); + } + // next characters start a *new* autosuggestion + this._typedSoFar = ''; + }, AUTOSUGGEST_INACTIVITY_DELAY); + } + + handleDropdownClick(e) { + e.preventDefault(); + e.stopPropagation(); + // toggle dropdown + const { open } = this; + this.openDropdown(!open); + if (open) { + // note: without setTimeout, scrolling is off by several items, s.t. the selected + // element is not visible (at least with maxHeight being set) + setTimeout(() => this.scrollIntoView(), 1); + } + } + + handleDropdownItemClick(e) { + e.preventDefault(); + e.stopPropagation(); + const { target } = e; + + // if click 'lands' on native + ${defaultTitleIfNeeded(defaultTitle, selectedItem) + .concat(items) + .map((item, i) => nativeItemsMapper(item, i))} + + ${ARROW_ICON} + + + + + + +
      + ${items.map( + contentItemsMapper(handleDropdownItemClick, defaultTitle) + )} +
    + + + ${checkMark + ? html` + + + + ` + : ''} + + ${invalid && error + ? html` + ${error} + ` + : ''} + `; + } + + firstUpdated() { + this.button = this.querySelector('.js-dropdown__toggle'); + this.dropdown = this.querySelector('.js-dropdown__content'); + this.select = this.querySelector('.js-dropdown__select'); + window.addEventListener('resize', this.handleResize); + window.addEventListener('click', this.handleWindowClick); + window.addEventListener('axa-dropdown-close', this.handleWindowClick); + } + + // build one long string of words paired with their indices in `items`, + // separating the elements in each pair with suitable control characters + // that do not occur in typed input + buildAutosuggestDictionary() { + this._autosuggestLetters = new Set(); + const { items, _autosuggestLetters: letters } = this; + + this._autosuggestDictionary = + items + .filter(item => !item.disabled && item.name) + .map((item, index) => { + // normalize word for purposes of matching + const word = item.name.toLowerCase(); + // construct a set of all letters in word + // (used for an early filter over keystrokes) + word.split('').forEach(letter => { + letters.add(letter.toLowerCase()); + }); + return `${INDEX_END}${word}${WORD_END}${index}`; + }) + .join('') + INDEX_END; + } + + updated(changedProperties) { + const { select, defaultTitle } = this; + // adjust native