This commit is contained in:
2024-07-30 10:43:54 +02:00
parent 0689bf9ffe
commit 549d914b6c
5 changed files with 1033 additions and 39 deletions

425
package-lock.json generated Normal file
View File

@@ -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"
}
}
}
}

View File

@@ -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"
}
}

View File

@@ -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);

221
tp-tag-input-popup.js Normal file
View File

@@ -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`
<div class="wrap">
<div id="list" @click=${this.onItemClick}>
${this.filteredItems.map(item => html`
<div class="item" .value=${item.value} ?selected=${item.value === this.value}>${item.label}</div>
`)}
</div>
</div>
`;
}
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);

380
tp-tag-input.js Normal file
View File

@@ -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`<path fill="var(--tp-icon-color)" d="M20 6.91L17.09 4L12 9.09L6.91 4L4 6.91L9.09 12L4 17.09L6.91 20L12 14.91L17.09 20L20 17.09L14.91 12L20 6.91Z" />`;
}
render() {
const value = this.value || [];
return html`
<div class="wrap" part="wrap">
${value.map(item => html`
<div class="item">
<tp-icon .icon=${TpTagInput.icon}></tp-icon>
${item.label}
</div>
`)}
<tp-input id="input" .validator=${this.validator} @input=${e => this._inputChanged(e)} required>
<input type="text" id="innerInput" .pattern=${this.pattern}>
</tp-input>
</div>
<tp-tag-input-popup id="autoCpl" .items=${this.items} @selection-changed=${e => this._itemSelected(e.detail.item)}></tp-tag-input-popup>
`;
}
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);