diff --git a/package-lock.json b/package-lock.json new file mode 100644 index 0000000..2afca25 --- /dev/null +++ b/package-lock.json @@ -0,0 +1,425 @@ +{ + "name": "@tp/tp-tag-input", + "version": "1.0.0", + "lockfileVersion": 2, + "requires": true, + "packages": { + "": { + "name": "@tp/tp-tag-input", + "version": "1.0.0", + "license": "Apache-2.0", + "dependencies": { + "@tp/helpers": "^2.2.0", + "@tp/tp-icon": "^1.0.1", + "@tp/tp-input": "^1.0.6", + "lit": "^3.0.0" + } + }, + "node_modules/@lit-labs/ssr-dom-shim": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/@lit-labs/ssr-dom-shim/-/ssr-dom-shim-1.2.0.tgz", + "integrity": "sha512-yWJKmpGE6lUURKAaIltoPIE/wrbY3TEkqQt+X0m+7fQNnAv0keydnYvbiJFP1PnMhizmIWRWOG5KLhYyc/xl+g==" + }, + "node_modules/@lit/reactive-element": { + "version": "2.0.4", + "resolved": "https://registry.npmjs.org/@lit/reactive-element/-/reactive-element-2.0.4.tgz", + "integrity": "sha512-GFn91inaUa2oHLak8awSIigYz0cU0Payr1rcFsrkf5OJ5eSPxElyZfKh0f2p9FsTiZWXQdWGJeXZICEfXXYSXQ==", + "dependencies": { + "@lit-labs/ssr-dom-shim": "^1.2.0" + } + }, + "node_modules/@tp/helpers": { + "version": "2.2.0", + "resolved": "https://gitea.codeblob.work/api/packages/tp-elements/npm/%40tp%2Fhelpers/-/2.2.0/helpers-2.2.0.tgz", + "integrity": "sha512-kf+ieedMdYZOnQ6xUUQxTlP8cQEp4obpSs3vI7V/3xnex7VvMbiWzgFHU+wr1D2eR/IA0Cl1cZxvJ3E052EQew==", + "license": "Apache-2.0" + }, + "node_modules/@tp/tp-icon": { + "version": "1.0.1", + "resolved": "https://gitea.codeblob.work/api/packages/tp-elements/npm/%40tp%2Ftp-icon/-/1.0.1/tp-icon-1.0.1.tgz", + "integrity": "sha512-rBbQoXZ5t35F7yIbPAEGAlDscZhxLZ5/o229kyiBBrXvCrc+aVOsetSwF1jPeBSmb57h2PfinIvQhtMARwWHoA==", + "license": "Apache-2.0", + "dependencies": { + "@tp/tp-tooltip": "^1.0.0", + "lit": "^2.2.0" + } + }, + "node_modules/@tp/tp-icon/node_modules/@lit/reactive-element": { + "version": "1.6.3", + "resolved": "https://registry.npmjs.org/@lit/reactive-element/-/reactive-element-1.6.3.tgz", + "integrity": "sha512-QuTgnG52Poic7uM1AN5yJ09QMe0O28e10XzSvWDz02TJiiKee4stsiownEIadWm8nYzyDAyT+gKzUoZmiWQtsQ==", + "dependencies": { + "@lit-labs/ssr-dom-shim": "^1.0.0" + } + }, + "node_modules/@tp/tp-icon/node_modules/lit": { + "version": "2.8.0", + "resolved": "https://registry.npmjs.org/lit/-/lit-2.8.0.tgz", + "integrity": "sha512-4Sc3OFX9QHOJaHbmTMk28SYgVxLN3ePDjg7hofEft2zWlehFL3LiAuapWc4U/kYwMYJSh2hTCPZ6/LIC7ii0MA==", + "dependencies": { + "@lit/reactive-element": "^1.6.0", + "lit-element": "^3.3.0", + "lit-html": "^2.8.0" + } + }, + "node_modules/@tp/tp-icon/node_modules/lit-element": { + "version": "3.3.3", + "resolved": "https://registry.npmjs.org/lit-element/-/lit-element-3.3.3.tgz", + "integrity": "sha512-XbeRxmTHubXENkV4h8RIPyr8lXc+Ff28rkcQzw3G6up2xg5E8Zu1IgOWIwBLEQsu3cOVFqdYwiVi0hv0SlpqUA==", + "dependencies": { + "@lit-labs/ssr-dom-shim": "^1.1.0", + "@lit/reactive-element": "^1.3.0", + "lit-html": "^2.8.0" + } + }, + "node_modules/@tp/tp-icon/node_modules/lit-html": { + "version": "2.8.0", + "resolved": "https://registry.npmjs.org/lit-html/-/lit-html-2.8.0.tgz", + "integrity": "sha512-o9t+MQM3P4y7M7yNzqAyjp7z+mQGa4NS4CxiyLqFPyFWyc4O+nodLrkrxSaCTrla6M5YOLaT3RpbbqjszB5g3Q==", + "dependencies": { + "@types/trusted-types": "^2.0.2" + } + }, + "node_modules/@tp/tp-input": { + "version": "1.0.6", + "resolved": "https://gitea.codeblob.work/api/packages/tp-elements/npm/%40tp%2Ftp-input/-/1.0.6/tp-input-1.0.6.tgz", + "integrity": "sha512-i24LTVNX8taafWEcO4FII1YwrLQO5RvA0f4KDGpxU0Ca+WWfSkq3xwJEbiC9eovP/wrB9e2XoLQ1mjm0S79+mg==", + "license": "Apache-2.0", + "dependencies": { + "@tp/helpers": "^1.0.0", + "lit": "^2.2.0" + } + }, + "node_modules/@tp/tp-input/node_modules/@lit/reactive-element": { + "version": "1.6.3", + "resolved": "https://registry.npmjs.org/@lit/reactive-element/-/reactive-element-1.6.3.tgz", + "integrity": "sha512-QuTgnG52Poic7uM1AN5yJ09QMe0O28e10XzSvWDz02TJiiKee4stsiownEIadWm8nYzyDAyT+gKzUoZmiWQtsQ==", + "dependencies": { + "@lit-labs/ssr-dom-shim": "^1.0.0" + } + }, + "node_modules/@tp/tp-input/node_modules/@tp/helpers": { + "version": "1.3.0", + "resolved": "https://gitea.codeblob.work/api/packages/tp-elements/npm/%40tp%2Fhelpers/-/1.3.0/helpers-1.3.0.tgz", + "integrity": "sha512-mOAVP45kkEYXwonaOd5jkFQLX1nbeKtl8YX8FpL2ytON0cOSsh6TUAbCEcMU5xqgyD6L1ZEZNvxCjhOKOKdGyA==", + "license": "Apache-2.0" + }, + "node_modules/@tp/tp-input/node_modules/lit": { + "version": "2.8.0", + "resolved": "https://registry.npmjs.org/lit/-/lit-2.8.0.tgz", + "integrity": "sha512-4Sc3OFX9QHOJaHbmTMk28SYgVxLN3ePDjg7hofEft2zWlehFL3LiAuapWc4U/kYwMYJSh2hTCPZ6/LIC7ii0MA==", + "dependencies": { + "@lit/reactive-element": "^1.6.0", + "lit-element": "^3.3.0", + "lit-html": "^2.8.0" + } + }, + "node_modules/@tp/tp-input/node_modules/lit-element": { + "version": "3.3.3", + "resolved": "https://registry.npmjs.org/lit-element/-/lit-element-3.3.3.tgz", + "integrity": "sha512-XbeRxmTHubXENkV4h8RIPyr8lXc+Ff28rkcQzw3G6up2xg5E8Zu1IgOWIwBLEQsu3cOVFqdYwiVi0hv0SlpqUA==", + "dependencies": { + "@lit-labs/ssr-dom-shim": "^1.1.0", + "@lit/reactive-element": "^1.3.0", + "lit-html": "^2.8.0" + } + }, + "node_modules/@tp/tp-input/node_modules/lit-html": { + "version": "2.8.0", + "resolved": "https://registry.npmjs.org/lit-html/-/lit-html-2.8.0.tgz", + "integrity": "sha512-o9t+MQM3P4y7M7yNzqAyjp7z+mQGa4NS4CxiyLqFPyFWyc4O+nodLrkrxSaCTrla6M5YOLaT3RpbbqjszB5g3Q==", + "dependencies": { + "@types/trusted-types": "^2.0.2" + } + }, + "node_modules/@tp/tp-tooltip": { + "version": "1.0.0", + "resolved": "https://gitea.codeblob.work/api/packages/tp-elements/npm/%40tp%2Ftp-tooltip/-/1.0.0/tp-tooltip-1.0.0.tgz", + "integrity": "sha512-wal/DPJH73rz9RbHg66ZciZUyjqfeTKMSImEVWczwjXGoPTG9n5FL5+tPyikpgFr5KDhDKlW8/Q0niBbGnc5KA==", + "license": "Apache-2.0", + "dependencies": { + "@tp/helpers": "^1.0.0", + "lit": "^2.2.0" + } + }, + "node_modules/@tp/tp-tooltip/node_modules/@lit/reactive-element": { + "version": "1.6.3", + "resolved": "https://registry.npmjs.org/@lit/reactive-element/-/reactive-element-1.6.3.tgz", + "integrity": "sha512-QuTgnG52Poic7uM1AN5yJ09QMe0O28e10XzSvWDz02TJiiKee4stsiownEIadWm8nYzyDAyT+gKzUoZmiWQtsQ==", + "dependencies": { + "@lit-labs/ssr-dom-shim": "^1.0.0" + } + }, + "node_modules/@tp/tp-tooltip/node_modules/@tp/helpers": { + "version": "1.3.0", + "resolved": "https://gitea.codeblob.work/api/packages/tp-elements/npm/%40tp%2Fhelpers/-/1.3.0/helpers-1.3.0.tgz", + "integrity": "sha512-mOAVP45kkEYXwonaOd5jkFQLX1nbeKtl8YX8FpL2ytON0cOSsh6TUAbCEcMU5xqgyD6L1ZEZNvxCjhOKOKdGyA==", + "license": "Apache-2.0" + }, + "node_modules/@tp/tp-tooltip/node_modules/lit": { + "version": "2.8.0", + "resolved": "https://registry.npmjs.org/lit/-/lit-2.8.0.tgz", + "integrity": "sha512-4Sc3OFX9QHOJaHbmTMk28SYgVxLN3ePDjg7hofEft2zWlehFL3LiAuapWc4U/kYwMYJSh2hTCPZ6/LIC7ii0MA==", + "dependencies": { + "@lit/reactive-element": "^1.6.0", + "lit-element": "^3.3.0", + "lit-html": "^2.8.0" + } + }, + "node_modules/@tp/tp-tooltip/node_modules/lit-element": { + "version": "3.3.3", + "resolved": "https://registry.npmjs.org/lit-element/-/lit-element-3.3.3.tgz", + "integrity": "sha512-XbeRxmTHubXENkV4h8RIPyr8lXc+Ff28rkcQzw3G6up2xg5E8Zu1IgOWIwBLEQsu3cOVFqdYwiVi0hv0SlpqUA==", + "dependencies": { + "@lit-labs/ssr-dom-shim": "^1.1.0", + "@lit/reactive-element": "^1.3.0", + "lit-html": "^2.8.0" + } + }, + "node_modules/@tp/tp-tooltip/node_modules/lit-html": { + "version": "2.8.0", + "resolved": "https://registry.npmjs.org/lit-html/-/lit-html-2.8.0.tgz", + "integrity": "sha512-o9t+MQM3P4y7M7yNzqAyjp7z+mQGa4NS4CxiyLqFPyFWyc4O+nodLrkrxSaCTrla6M5YOLaT3RpbbqjszB5g3Q==", + "dependencies": { + "@types/trusted-types": "^2.0.2" + } + }, + "node_modules/@types/trusted-types": { + "version": "2.0.7", + "resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.7.tgz", + "integrity": "sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw==" + }, + "node_modules/lit": { + "version": "3.1.4", + "resolved": "https://registry.npmjs.org/lit/-/lit-3.1.4.tgz", + "integrity": "sha512-q6qKnKXHy2g1kjBaNfcoLlgbI3+aSOZ9Q4tiGa9bGYXq5RBXxkVTqTIVmP2VWMp29L4GyvCFm8ZQ2o56eUAMyA==", + "dependencies": { + "@lit/reactive-element": "^2.0.4", + "lit-element": "^4.0.4", + "lit-html": "^3.1.2" + } + }, + "node_modules/lit-element": { + "version": "4.0.6", + "resolved": "https://registry.npmjs.org/lit-element/-/lit-element-4.0.6.tgz", + "integrity": "sha512-U4sdJ3CSQip7sLGZ/uJskO5hGiqtlpxndsLr6mt3IQIjheg93UKYeGQjWMRql1s/cXNOaRrCzC2FQwjIwSUqkg==", + "dependencies": { + "@lit-labs/ssr-dom-shim": "^1.2.0", + "@lit/reactive-element": "^2.0.4", + "lit-html": "^3.1.2" + } + }, + "node_modules/lit-html": { + "version": "3.1.4", + "resolved": "https://registry.npmjs.org/lit-html/-/lit-html-3.1.4.tgz", + "integrity": "sha512-yKKO2uVv7zYFHlWMfZmqc+4hkmSbFp8jgjdZY9vvR9jr4J8fH6FUMXhr+ljfELgmjpvlF7Z1SJ5n5/Jeqtc9YA==", + "dependencies": { + "@types/trusted-types": "^2.0.2" + } + } + }, + "dependencies": { + "@lit-labs/ssr-dom-shim": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/@lit-labs/ssr-dom-shim/-/ssr-dom-shim-1.2.0.tgz", + "integrity": "sha512-yWJKmpGE6lUURKAaIltoPIE/wrbY3TEkqQt+X0m+7fQNnAv0keydnYvbiJFP1PnMhizmIWRWOG5KLhYyc/xl+g==" + }, + "@lit/reactive-element": { + "version": "2.0.4", + "resolved": "https://registry.npmjs.org/@lit/reactive-element/-/reactive-element-2.0.4.tgz", + "integrity": "sha512-GFn91inaUa2oHLak8awSIigYz0cU0Payr1rcFsrkf5OJ5eSPxElyZfKh0f2p9FsTiZWXQdWGJeXZICEfXXYSXQ==", + "requires": { + "@lit-labs/ssr-dom-shim": "^1.2.0" + } + }, + "@tp/helpers": { + "version": "2.2.0", + "resolved": "https://gitea.codeblob.work/api/packages/tp-elements/npm/%40tp%2Fhelpers/-/2.2.0/helpers-2.2.0.tgz", + "integrity": "sha512-kf+ieedMdYZOnQ6xUUQxTlP8cQEp4obpSs3vI7V/3xnex7VvMbiWzgFHU+wr1D2eR/IA0Cl1cZxvJ3E052EQew==" + }, + "@tp/tp-icon": { + "version": "1.0.1", + "resolved": "https://gitea.codeblob.work/api/packages/tp-elements/npm/%40tp%2Ftp-icon/-/1.0.1/tp-icon-1.0.1.tgz", + "integrity": "sha512-rBbQoXZ5t35F7yIbPAEGAlDscZhxLZ5/o229kyiBBrXvCrc+aVOsetSwF1jPeBSmb57h2PfinIvQhtMARwWHoA==", + "requires": { + "@tp/tp-tooltip": "^1.0.0", + "lit": "^2.2.0" + }, + "dependencies": { + "@lit/reactive-element": { + "version": "1.6.3", + "resolved": "https://registry.npmjs.org/@lit/reactive-element/-/reactive-element-1.6.3.tgz", + "integrity": "sha512-QuTgnG52Poic7uM1AN5yJ09QMe0O28e10XzSvWDz02TJiiKee4stsiownEIadWm8nYzyDAyT+gKzUoZmiWQtsQ==", + "requires": { + "@lit-labs/ssr-dom-shim": "^1.0.0" + } + }, + "lit": { + "version": "2.8.0", + "resolved": "https://registry.npmjs.org/lit/-/lit-2.8.0.tgz", + "integrity": "sha512-4Sc3OFX9QHOJaHbmTMk28SYgVxLN3ePDjg7hofEft2zWlehFL3LiAuapWc4U/kYwMYJSh2hTCPZ6/LIC7ii0MA==", + "requires": { + "@lit/reactive-element": "^1.6.0", + "lit-element": "^3.3.0", + "lit-html": "^2.8.0" + } + }, + "lit-element": { + "version": "3.3.3", + "resolved": "https://registry.npmjs.org/lit-element/-/lit-element-3.3.3.tgz", + "integrity": "sha512-XbeRxmTHubXENkV4h8RIPyr8lXc+Ff28rkcQzw3G6up2xg5E8Zu1IgOWIwBLEQsu3cOVFqdYwiVi0hv0SlpqUA==", + "requires": { + "@lit-labs/ssr-dom-shim": "^1.1.0", + "@lit/reactive-element": "^1.3.0", + "lit-html": "^2.8.0" + } + }, + "lit-html": { + "version": "2.8.0", + "resolved": "https://registry.npmjs.org/lit-html/-/lit-html-2.8.0.tgz", + "integrity": "sha512-o9t+MQM3P4y7M7yNzqAyjp7z+mQGa4NS4CxiyLqFPyFWyc4O+nodLrkrxSaCTrla6M5YOLaT3RpbbqjszB5g3Q==", + "requires": { + "@types/trusted-types": "^2.0.2" + } + } + } + }, + "@tp/tp-input": { + "version": "1.0.6", + "resolved": "https://gitea.codeblob.work/api/packages/tp-elements/npm/%40tp%2Ftp-input/-/1.0.6/tp-input-1.0.6.tgz", + "integrity": "sha512-i24LTVNX8taafWEcO4FII1YwrLQO5RvA0f4KDGpxU0Ca+WWfSkq3xwJEbiC9eovP/wrB9e2XoLQ1mjm0S79+mg==", + "requires": { + "@tp/helpers": "^1.0.0", + "lit": "^2.2.0" + }, + "dependencies": { + "@lit/reactive-element": { + "version": "1.6.3", + "resolved": "https://registry.npmjs.org/@lit/reactive-element/-/reactive-element-1.6.3.tgz", + "integrity": "sha512-QuTgnG52Poic7uM1AN5yJ09QMe0O28e10XzSvWDz02TJiiKee4stsiownEIadWm8nYzyDAyT+gKzUoZmiWQtsQ==", + "requires": { + "@lit-labs/ssr-dom-shim": "^1.0.0" + } + }, + "@tp/helpers": { + "version": "1.3.0", + "resolved": "https://gitea.codeblob.work/api/packages/tp-elements/npm/%40tp%2Fhelpers/-/1.3.0/helpers-1.3.0.tgz", + "integrity": "sha512-mOAVP45kkEYXwonaOd5jkFQLX1nbeKtl8YX8FpL2ytON0cOSsh6TUAbCEcMU5xqgyD6L1ZEZNvxCjhOKOKdGyA==" + }, + "lit": { + "version": "2.8.0", + "resolved": "https://registry.npmjs.org/lit/-/lit-2.8.0.tgz", + "integrity": "sha512-4Sc3OFX9QHOJaHbmTMk28SYgVxLN3ePDjg7hofEft2zWlehFL3LiAuapWc4U/kYwMYJSh2hTCPZ6/LIC7ii0MA==", + "requires": { + "@lit/reactive-element": "^1.6.0", + "lit-element": "^3.3.0", + "lit-html": "^2.8.0" + } + }, + "lit-element": { + "version": "3.3.3", + "resolved": "https://registry.npmjs.org/lit-element/-/lit-element-3.3.3.tgz", + "integrity": "sha512-XbeRxmTHubXENkV4h8RIPyr8lXc+Ff28rkcQzw3G6up2xg5E8Zu1IgOWIwBLEQsu3cOVFqdYwiVi0hv0SlpqUA==", + "requires": { + "@lit-labs/ssr-dom-shim": "^1.1.0", + "@lit/reactive-element": "^1.3.0", + "lit-html": "^2.8.0" + } + }, + "lit-html": { + "version": "2.8.0", + "resolved": "https://registry.npmjs.org/lit-html/-/lit-html-2.8.0.tgz", + "integrity": "sha512-o9t+MQM3P4y7M7yNzqAyjp7z+mQGa4NS4CxiyLqFPyFWyc4O+nodLrkrxSaCTrla6M5YOLaT3RpbbqjszB5g3Q==", + "requires": { + "@types/trusted-types": "^2.0.2" + } + } + } + }, + "@tp/tp-tooltip": { + "version": "1.0.0", + "resolved": "https://gitea.codeblob.work/api/packages/tp-elements/npm/%40tp%2Ftp-tooltip/-/1.0.0/tp-tooltip-1.0.0.tgz", + "integrity": "sha512-wal/DPJH73rz9RbHg66ZciZUyjqfeTKMSImEVWczwjXGoPTG9n5FL5+tPyikpgFr5KDhDKlW8/Q0niBbGnc5KA==", + "requires": { + "@tp/helpers": "^1.0.0", + "lit": "^2.2.0" + }, + "dependencies": { + "@lit/reactive-element": { + "version": "1.6.3", + "resolved": "https://registry.npmjs.org/@lit/reactive-element/-/reactive-element-1.6.3.tgz", + "integrity": "sha512-QuTgnG52Poic7uM1AN5yJ09QMe0O28e10XzSvWDz02TJiiKee4stsiownEIadWm8nYzyDAyT+gKzUoZmiWQtsQ==", + "requires": { + "@lit-labs/ssr-dom-shim": "^1.0.0" + } + }, + "@tp/helpers": { + "version": "1.3.0", + "resolved": "https://gitea.codeblob.work/api/packages/tp-elements/npm/%40tp%2Fhelpers/-/1.3.0/helpers-1.3.0.tgz", + "integrity": "sha512-mOAVP45kkEYXwonaOd5jkFQLX1nbeKtl8YX8FpL2ytON0cOSsh6TUAbCEcMU5xqgyD6L1ZEZNvxCjhOKOKdGyA==" + }, + "lit": { + "version": "2.8.0", + "resolved": "https://registry.npmjs.org/lit/-/lit-2.8.0.tgz", + "integrity": "sha512-4Sc3OFX9QHOJaHbmTMk28SYgVxLN3ePDjg7hofEft2zWlehFL3LiAuapWc4U/kYwMYJSh2hTCPZ6/LIC7ii0MA==", + "requires": { + "@lit/reactive-element": "^1.6.0", + "lit-element": "^3.3.0", + "lit-html": "^2.8.0" + } + }, + "lit-element": { + "version": "3.3.3", + "resolved": "https://registry.npmjs.org/lit-element/-/lit-element-3.3.3.tgz", + "integrity": "sha512-XbeRxmTHubXENkV4h8RIPyr8lXc+Ff28rkcQzw3G6up2xg5E8Zu1IgOWIwBLEQsu3cOVFqdYwiVi0hv0SlpqUA==", + "requires": { + "@lit-labs/ssr-dom-shim": "^1.1.0", + "@lit/reactive-element": "^1.3.0", + "lit-html": "^2.8.0" + } + }, + "lit-html": { + "version": "2.8.0", + "resolved": "https://registry.npmjs.org/lit-html/-/lit-html-2.8.0.tgz", + "integrity": "sha512-o9t+MQM3P4y7M7yNzqAyjp7z+mQGa4NS4CxiyLqFPyFWyc4O+nodLrkrxSaCTrla6M5YOLaT3RpbbqjszB5g3Q==", + "requires": { + "@types/trusted-types": "^2.0.2" + } + } + } + }, + "@types/trusted-types": { + "version": "2.0.7", + "resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.7.tgz", + "integrity": "sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw==" + }, + "lit": { + "version": "3.1.4", + "resolved": "https://registry.npmjs.org/lit/-/lit-3.1.4.tgz", + "integrity": "sha512-q6qKnKXHy2g1kjBaNfcoLlgbI3+aSOZ9Q4tiGa9bGYXq5RBXxkVTqTIVmP2VWMp29L4GyvCFm8ZQ2o56eUAMyA==", + "requires": { + "@lit/reactive-element": "^2.0.4", + "lit-element": "^4.0.4", + "lit-html": "^3.1.2" + } + }, + "lit-element": { + "version": "4.0.6", + "resolved": "https://registry.npmjs.org/lit-element/-/lit-element-4.0.6.tgz", + "integrity": "sha512-U4sdJ3CSQip7sLGZ/uJskO5hGiqtlpxndsLr6mt3IQIjheg93UKYeGQjWMRql1s/cXNOaRrCzC2FQwjIwSUqkg==", + "requires": { + "@lit-labs/ssr-dom-shim": "^1.2.0", + "@lit/reactive-element": "^2.0.4", + "lit-html": "^3.1.2" + } + }, + "lit-html": { + "version": "3.1.4", + "resolved": "https://registry.npmjs.org/lit-html/-/lit-html-3.1.4.tgz", + "integrity": "sha512-yKKO2uVv7zYFHlWMfZmqc+4hkmSbFp8jgjdZY9vvR9jr4J8fH6FUMXhr+ljfELgmjpvlF7Z1SJ5n5/Jeqtc9YA==", + "requires": { + "@types/trusted-types": "^2.0.2" + } + } + } +} diff --git a/package.json b/package.json index 24f0225..6068da0 100644 --- a/package.json +++ b/package.json @@ -1,18 +1,21 @@ { - "name": "@tp/tp-element", - "version": "0.0.1", + "name": "@tp/tp-tag-input", + "version": "1.0.0", "description": "", - "main": "tp-element.js", + "main": "tp-tag-input.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "repository": { "type": "git", - "url": "https://gitea.codeblob.work/tp-elements/tp-element.git" + "url": "https://gitea.codeblob.work/tp-elements/tp-tag-input.git" }, "author": "trading_peter", "license": "Apache-2.0", "dependencies": { + "@tp/helpers": "^2.2.0", + "@tp/tp-icon": "^1.0.1", + "@tp/tp-input": "^1.0.6", "lit": "^3.0.0" } } diff --git a/tp-element.js b/tp-element.js deleted file mode 100644 index 6195006..0000000 --- a/tp-element.js +++ /dev/null @@ -1,35 +0,0 @@ -/** -@license -Copyright (c) 2024 trading_peter -This program is available under Apache License Version 2.0 -*/ - -import { LitElement, html, css } from 'lit'; - -class TpElement extends LitElement { - static get styles() { - return [ - css` - :host { - display: block; - } - ` - ]; - } - - render() { - const { } = this; - - return html` - - `; - } - - static get properties() { - return { }; - } - - -} - -window.customElements.define('tp-element', TpElement); diff --git a/tp-tag-input-popup.js b/tp-tag-input-popup.js new file mode 100644 index 0000000..7fae94e --- /dev/null +++ b/tp-tag-input-popup.js @@ -0,0 +1,221 @@ +/** +@license +Copyright (c) 2024 trading_peter +This program is available under Apache License Version 2.0 +*/ + +import { LitElement, html, css } from 'lit'; +import { DomQuery } from '@tp/helpers/dom-query.js'; +import { EventHelpers } from '@tp/helpers/event-helpers.js'; +import { closest } from '@tp/helpers/closest.js'; + +class TpTagInputPopup extends DomQuery(EventHelpers(LitElement)) { + static get styles() { + return [ + css` + :host { + display: none; + position: fixed; + border-radius: 2px; + background: #ffffff; + z-index: 1; + left: 0; + width: 100%; + margin-top: 5px; + box-shadow: var(--tp-tag-input-popup-shadow, none); + } + + #list { + max-height: 150px; + overflow-y: auto; + } + + .item { + line-height: 25px; + padding: 3px 10px; + white-space: nowrap; + overflow: hidden; + cursor: pointer; + text-overflow: ellipsis; + } + + .item[selected] { + background: #e4e4e4; + } + ` + ]; + } + + render() { + return html` +
+
+ ${this.filteredItems.map(item => html` +
${item.label}
+ `)} +
+
+ `; + } + + static get is() { return 'era-autocomplete-popup'; } + + static get properties() { + return { + /** + * The choosen item. + */ + value: { type: String }, + + /** + * List of items available for auto complete. + */ + items: { type: Array }, + filteredItems: { type: Array }, + + /** + * The filter string to narrow down the items. + */ + filter: { type: String }, + + selection: { type: Number }, + + visible: { type: Boolean } + }; + } + + constructor() { + super(); + this.visible = false; + this.filteredItems = []; + } + + get target() { + return closest(this, 'tp-tag-input', true); + } + + shouldUpdate(changes) { + if (changes.has('filter') || changes.has('items')) { + this._filterItemsByTerm(); + } + + return true; + } + + firstUpdated() { + this.listen(this.$.list, 'down', '_onItemTap'); + } + + disconnectedCallback() { + super.disconnectedCallback(); + this.unlisten(this.$.list, 'down', '_onItemTap'); + } + + show() { + if (this.visible) { + return; + } + + var targetRect = this.target.getBoundingClientRect(); + this.style.top = (targetRect.top + targetRect.height) + 'px'; + this.style.left = targetRect.left + 'px'; + this.style.width = Math.max(100, targetRect.width) + 'px'; + + this.listen(this.target, 'keydown', '_onHostKeydown'); + this.style.display = 'block'; + this.visible = true; + } + + hide() { + this.style.display = 'none'; + this.unlisten(this.target, 'keydown', '_onHostKeydown'); + this.visible = false; + } + + onItemClick(e) { + const item = closest(e.composedPath()[0], '.item', true); + if (!item) return; + this.value = item.value; + this.dispatchEvent(new CustomEvent('selection-changed', { detail: this.value, bubbles: true, composed: true })); + } + + _filterItemsByTerm() { + if (!Array.isArray(this.items)) return; + + if (!this.filter) { + this.filteredItems = this.items; + } else { + const term = this.filter.toLowerCase(); + this.filteredItems = this.items.filter(item => item.label.toLowerCase().includes(term)); + } + } + + _onHostKeydown(e) { + const count = this.$.list.querySelectorAll('.item').length; + let el; + + switch (e.keyCode) { + case 38: // Up + this.selection = this.selection - 1 < 0 ? count - 1 : this.selection - 1; + el = this.$.list.querySelector('.item[selected]'); + this._scrollIntoView(el, this.$.list); + e.preventDefault(); + e.stopPropagation(); + return; + case 40: // Down + if (isNaN(this.selection) || this.selection === null) { + this.selection = 0; + } else { + this.selection = (this.selection + 1) % count; + } + el = this.$.list.querySelector('.item[selected]'); + this._scrollIntoView(el, this.$.list); + e.preventDefault(); + e.stopPropagation(); + return; + case 13: // Enter + const item = this.$.list.querySelector('.item[selected]'); + if (item) { + this.value = this.$.itemRepeater.itemForElement(item); + } + this.hide(); + e.preventDefault(); + e.stopPropagation(); + return; + case 27: // Esc + this.hide(); + e.preventDefault(); + e.stopPropagation(); + return; + } + } + + _onItemTap(e) { + const item = e.composedPath()[0]; + + if (item.classList.contains('item')) { + this.value = this.$.itemRepeater.itemForElement(item); + this.hide(); + this.target.focus(); + } + } + + _scrollIntoView(element, container) { + if (!element) { + return; + } + + const containerTop = container.scrollTop; + const containerBottom = containerTop + container.offsetHeight; + const elTop = element.offsetTop; + const elBottom = elTop + element.offsetHeight; + + if (elTop < containerTop) { + container.scrollTop = elTop; + } else if (elBottom > containerBottom) { + container.scrollTop = elBottom - container.offsetHeight; + } + } +} + +window.customElements.define('tp-tag-input-popup', TpTagInputPopup); diff --git a/tp-tag-input.js b/tp-tag-input.js new file mode 100644 index 0000000..9eee40a --- /dev/null +++ b/tp-tag-input.js @@ -0,0 +1,380 @@ +/** +@license +Copyright (c) 2024 trading_peter +This program is available under Apache License Version 2.0 +*/ + +import '@tp/tp-input/tp-input.js'; +import '@tp/tp-icon/tp-icon.js'; +import './tp-tag-input-popup.js'; +import { LitElement, html, css, svg } from 'lit'; +import { FormElement } from '@tp/helpers/form-element.js'; +import { EventHelpers } from '@tp/helpers/event-helpers.js'; +import { DomQuery } from '@tp/helpers/dom-query.js'; +import { reach } from '@tp/helpers/reach.js'; +import { debounce } from '@tp/helpers/debounce.js'; + +const mixins = [ + FormElement, + EventHelpers, + DomQuery +]; + +/* @litElement */ +const BaseElement = mixins.reduce((baseClass, mixin) => { + return mixin(baseClass); +}, LitElement); + +class TpTagInput extends BaseElement { + static get styles() { + return [ + css` + :host { + display: block; + border-radius: 2px; + border: solid 1px #BDBDBD; + } + + :host([invalid]) { + border: solid 1px #B71C1C; + } + + [hidden] { + display: none; + } + + .wrap { + display: flex; + flex-direction: row; + flex-wrap: wrap; + } + + tp-input { + min-height: 15px; + outline: none; + margin: 5px; + padding: 0; + display: flex; + } + + tp-input::part(wrap) { + border: none; + } + + :host(.has-items) tp-input { + margin-top: 10px; + } + + .item { + display: inline-block; + margin: 5px; + border-radius: 2px; + border: solid 1px #9E9E9E; + background: #FFFFFF; + font-size: 14px; + padding: 3px 5px 3px 3px; + margin-right: 5px; + display: flex; + flex-direction: row; + align-items: center; + } + + .item tp-icon { + --tp-icon-width: 12px; + --tp-icon-height: 12px; + margin-right: 2px; + } + ` + ]; + } + + static get icon() { + return svg``; + } + + render() { + const value = this.value || []; + + return html` +
+ ${value.map(item => html` +
+ + ${item.label} +
+ `)} + this._inputChanged(e)} required> + + +
+ this._itemSelected(e.detail.item)}> + `; + } + + static get properties() { + return { + value: { type: Array }, + items: { type: Array }, + validator: { type: Object }, + allowUnknown: { type: Boolean }, + allowDuplicates: { type: Boolean }, + tooltipRemove: { type: String }, + min: { type: Number }, + max: { type: Number }, + invalid: { type: Boolean }, + filter: { type: String }, + pattern: { type: String }, + triggerKeys: { type: String }, + _input: { type: String }, + }; + } + + constructor() { + super(); + this.allowUnknown = false; + this.allowDuplicates = false; + this.triggerKeys = 'enter'; + this.tooltipRemove = 'Remove'; + this._input = ''; + + this._callFilterApiDebounced = debounce(this._callFilterApi.bind(this), 300, true); + } + + firstUpdated() { + this.listen(this.$.innerInput, 'keydown', '_inputKeyDown'); + this.listen(this.$.input, 'blur', '_inputBlur'); + this.listen(this, 'focus', '_onFocus'); + } + + disconnectedCallback() { + super.disconnectedCallback(); + + this.unlisten(this.$.innerInput, 'keydown', '_inputKeyDown'); + this.unlisten(this.$.innerInput, 'blur', '_inputBlur'); + this.unlisten(this, 'focus', '_onFocus'); + } + + // shouldUpdate(changes) { + // if (changes.has('_input')) { + // this._inputChanged(); + // } + // } + + validate() { + const val = Array.isArray(this.value) ? this.value : []; + + if ((this.required && val.length === 0) || + (this.min > 0 && val.length < this.min) || + (this.max > 0 && val.length > this.max)) { + this.invalid = true; + return false; + } + + return true; + } + + _inputChanged(e) { + this._input = e.target.value; + + console.log('input changed'); + if (this.api && this._input.length > 2) { + this._callFilterApiDebounced(); + return; + } + + if (this._input.length > 0) { + this.$.autoCpl.show(); + } else { + this.$.autoCpl.hide(); + } + } + + async _callFilterApi() { + const apiFunc = typeof this.api === 'function' ? this.api : reach(this.api, window); + if (typeof apiFunc !== 'function') return; + + this.items = []; + + const apiResp = apiFunc({ value: this._input }); + const promisedResult = apiResp.completes ? apiResp.completes : apiResp; + + const result = await promisedResult; + this.$.autoCpl.loading = false; + + if (Array.isArray(result)) { + this.items = result; + this.$.autoCpl.show(); + return; + } + + const resp = result.response; + if (resp && resp.statusCode === 200) { + this.items = resp.data; + this.$.autoCpl.show(); + } + } + + _itemSelected(item) { + if (item !== null) { + if (this.allowDuplicates || !this._isAlreadySelected(item.label)) { + // Need to clone the item so polymer won't get confused if the user removes duplicated entries. + if (Array.isArray(this.value)) { + this.push('value', this._clone(item)); + } else { + this.set('value', [ this._clone(item) ]); + } + } + this._input = ''; + this.$.autoCpl.selection = null; + this.$.autoCpl.value = null; + } + } + + _inputBlur() { + if (!this._tryToAddItem()) { + this._input = ''; + this.$.autoCpl.selection = null; + this.$.autoCpl.value = null; + this.$.autoCpl.hide(); + } + } + + _prepFilter(filter, api) { + if (api) { + return ''; // No filter because items come from api called and should already be filtered by a server. + } else { + return filter; + } + } + + _maxLengthReached() { + return (this.value || []).length === this.max && this.max > 0; + } + + _inputKeyDown(e) { + if (this._keyboardEventMatchesKeys(e, this.triggerKeys)) { + e.preventDefault(); + this._tryToAddItem(); + return; + } + + if (this._keyboardEventMatchesKeys(e, 'backspace')) { + if (this._input === '' && this.value) { + this.pop('value'); + return; + } + } + + if (this._maxLengthReached() && !this._keyboardEventMatchesKeys(e, 'tab')) { + e.preventDefault(); + } + } + + _tryToAddItem() { + if (this._maxLengthReached()) { + return; + } + + if (typeof this.$.autoCpl.selection === 'number') { + return; + } + + if (this.allowUnknown) { + if (this.$.input.validate()) { + var item = this._getItemByLabel(this._input); + if (!item) { + item = { + value: this._getFreeValue(), + label: this._input, + custom: true + }; + + this.push('items', item); + } + + if (!this.allowDuplicates && this._isAlreadySelected(this._input)) { + return false; + } + + this._itemSelected(item); + return true; + } + } else { + if (this.$.autoCpl.filteredItems.length > 0 && this.$.autoCpl.visible) { + if (this.allowDuplicates || !this._isAlreadySelected(this.$.autoCpl.filteredItems[0].label)) { + this._itemSelected(this.$.autoCpl.filteredItems[0]); + return true; + } + return false; + } + } + } + + _keyboardEventMatchesKeys(e, keys) { + const keyList = keys.split(' '); + + for (const key of keyList) { + if (key === e.key) { + return true; + } + } + } + + _valueChanged() { + this.toggleClass('has-items', Array.isArray(this.value) && this.value.length > 0); + } + + _removeItem(e) { + this.splice('value', e.model.index, 1)[0]; + } + + _isAlreadySelected(label) { + if (!Array.isArray(this.value)) return false; + + for (let i = 0, li = this.value.length; i < li; ++i) { + const item = this.value[i]; + if (item.label.toLocaleLowerCase() === label.toLocaleLowerCase()) { + return true; + } + } + return false; + } + + _getItemByLabel(label) { + for (var i = 0, li = this.items.length; i < li; ++i) { + var item = this.items[i]; + if (item.label === label) { + return item; + } + } + } + + _getFreeValue() { + var newValue = 0; + var _this = this; + + while(!isFree(newValue)) { + newValue++; + } + + function isFree() { + for (var i = 0, li = _this.items.length; i < li; ++i) { + if (_this.items[i].value == newValue) { + return false; + } + } + + return true; + } + + return newValue; + } + + _onFocus() { + this.$.input.focus(); + } + + +} + +window.customElements.define('tp-tag-input', TpTagInput);