{"_id":"@ecohead/kondonizer","_rev":"3-e9b4a8791f4754deecec95089b0493db","name":"@ecohead/kondonizer","dist-tags":{"latest":"0.1.0"},"versions":{"0.1.0":{"name":"@ecohead/kondonizer","version":"0.1.0","keywords":["Media Library","Custom Elements","HTML","Component"],"author":{"url":"https://github.com/aureldvx","name":"Aurélien Devaux","email":"oss@aureldvx.fr"},"license":"MIT","_id":"@ecohead/kondonizer@0.1.0","maintainers":[{"name":"aurel_dvx","email":"oss@aureldvx.fr"}],"homepage":"https://kondonizer.aureldvx.fr/","bugs":{"url":"https://github.com/ecohead/kondonizer/issues"},"dist":{"shasum":"cf0942e05997d39e9a052a582f24869009676d91","tarball":"https://registry.npmjs.org/@ecohead/kondonizer/-/kondonizer-0.1.0.tgz","fileCount":53,"integrity":"sha512-cUMEorZM2P+4EMtgqQ+kI8CbGdeLqG6Ma75mA/BYQF+DholP/hx4Kb6vuNfcud3LHK/amIHooaIwKD6NSsQwdw==","signatures":[{"sig":"MEUCIQDMYmrP41hmNh2lAmt2K7Exu8r3jLaqffR80WXIzyM3hAIgFQ+wBgXRpNIFPbcLtfH3xzOwW7WfQjU4iQGarat+DTA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":334314,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJimLljACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpaQw//aQCYTVicPvOWoLGrc1CMZS2o5Gm12yZerlkjHbiiDS/hT1sk\r\n3tDFGU3kMAn034K1u8SndEMRauKs191Atr6jZuP7f32CmUy1kwbYXSsjm00F\r\nLHN+X6lf5/L0JJjIEUnTmseCpDELiBoHWwOy9hBSW113bRdOZM4KQO2QkmOc\r\neCsyArmGYLQA7I4Lszhcb8NcnAk6aA3Zs+kUXriV83k9oDTQmwAw5DasIyuG\r\n04Hnl7l7qCglh22SAkNn968H/g16LMNX9P9ih7OtgDjGO3naq6sDfrRZlw1I\r\neAOP90LiTRPL4loQTuJ+E98HiHp/6BVzOUVGBBSzlChzx/wmjWAexS7C8G1x\r\nPoIkOa8X/8UZHvY2q9iwLkJZ46/oCi7nRHZL0VgbkvF/65YRO5lKVrlDs9TY\r\n4kNglC0YQ35w4ciC3PjdOYLmEaLSd+o8fosIX3B4pQa9uPxea1A59DWGvSME\r\nypHqFpIJifS9fmobV6y7A+hvs8MwQr2z+qyqWk6cUhjCRM8NVAEZcLXKWw4u\r\nMqSgndNlTRJTCNr91IAxhaTWmHOe32MQgzxLHZmre0F+912qrnVnipKDDpNV\r\nMUbiOQHD4wZh1yE6wlPFU7xrZk9Dm3I7lLF2yq/z1MYJYiOcZB4/yp6Ctfoc\r\noz78mCtfR/0Xd3zh8vc11z8WK9aiYwF2q+U=\r\n=rj+P\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib/index.js","type":"module","husky":{"hooks":{"pre-commit":"lint-staged"}},"types":"types/index.d.ts","module":"lib/index.js","exports":{".":"./lib/index.js","./standalone":"./lib/index.bundle.js"},"gitHead":"279ab9358f5ce6ba516e90f0cb497d78221ea413","scripts":{"dev":"vite","lint":"eslint --ext .ts,.html . --ignore-path .gitignore && prettier \"**/*.ts\" --check --ignore-path .gitignore","build":"rimraf lib && pnpm run analyze && pnpm run generate-types && pnpm run esbuild && pnpm run rollup","format":"eslint --ext .ts,.html . --fix --ignore-path .gitignore && prettier \"**/*.ts\" --write --ignore-path .gitignore","rollup":"rollup --config rollup.config.mjs","analyze":"cem analyze --litelement","esbuild":"node esbuild.config.js","publish":"pnpm run build && npm publish","test:e2e":"playwright test","test:unit":"vitest","postinstall":"pnpx playwright install","test:unit:ui":"vitest --ui","generate-types":"tsc -p tsconfig.types.json","publish:preview":"pnpm run build && npm pack","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"aurel_dvx","email":"oss@aureldvx.fr"},"repository":{"url":"git+https://github.com/ecohead/kondonizer.git","type":"git"},"_npmVersion":"8.11.0","description":"🗂 A universal media library web component based on the Custom Elements standard.","directories":{},"lint-staged":{"*.ts":["eslint --fix","prettier --write"]},"_nodeVersion":"16.15.1","dependencies":{"lit":"^2.0.2","zod":"^3.14.4","nanoid":"^3.3.3","filesize":"^8.0.7"},"_hasShrinkwrap":false,"customElements":"custom-elements.json","devDependencies":{"vite":"^2.9.0","husky":"^7.0.4","tslib":"^2.3.1","eslint":"^8.12.0","rimraf":"^3.0.2","rollup":"^2.70.1","vitest":"^0.8.2","esbuild":"^0.14.30","prettier":"^2.6.1","happy-dom":"^2.55.0","tiny-glob":"^0.2.9","@vitest/ui":"^0.8.2","playwright":"^1.20.2","typescript":"^4.5.4","@babel/core":">=7.11.0","lint-staged":"^12.3.7","@web-types/lit":"^2.0.0-3","axe-playwright":"^1.1.11","playwright-core":">1.0.0","@playwright/test":"^1.20.2","@babel/eslint-parser":">=7.11.0","@babel/eslint-plugin":"^7.6.0","rollup-plugin-terser":"^7.0.2","rollup-plugin-summary":"^1.4.0","@open-wc/eslint-config":"^7.0.0","esbuild-node-externals":"^1.4.1","eslint-config-prettier":"^8.5.0","@web/rollup-plugin-copy":"^0.3.0","@web/rollup-plugin-html":"^1.10.2","@typescript-eslint/parser":"^5.17.0","@rollup/plugin-node-resolve":"^13.1.3","@typescript-eslint/eslint-plugin":"^5.20.0","@custom-elements-manifest/analyzer":"^0.5.7","rollup-plugin-minify-html-literals":"^1.2.6"},"_npmOperationalInternal":{"tmp":"tmp/kondonizer_0.1.0_1654176099132_0.2563946677617419","host":"s3://npm-registry-packages"},"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."}},"time":{"created":"2022-06-02T13:21:39.039Z","modified":"2026-02-27T15:25:25.705Z","0.1.0":"2022-06-02T13:21:39.475Z"},"bugs":{"url":"https://github.com/ecohead/kondonizer/issues"},"author":{"url":"https://github.com/aureldvx","name":"Aurélien Devaux","email":"oss@aureldvx.fr"},"license":"MIT","homepage":"https://kondonizer.aureldvx.fr/","keywords":["Media Library","Custom Elements","HTML","Component"],"repository":{"url":"git+https://github.com/ecohead/kondonizer.git","type":"git"},"description":"🗂 A universal media library web component based on the Custom Elements standard.","maintainers":[{"name":"aurel_dvx","email":"oss@aureldvx.fr"},{"name":"aureldvx_","email":"npmjs@aureldvx.net"}],"readme":"![Kondonizer : Universal Media Library as a Web Component.](https://static.aureldvx.fr/ecohead/kondonizer/kondonizer-banner.jpg)\n\n![Open Source Love svg1](https://badges.frapsoft.com/os/v1/open-source.svg?v=103)\n![Awesome Badges](https://img.shields.io/badge/badges-awesome-green.svg)\n![TypeScript](https://badgen.net/badge/icon/typescript?icon=typescript&label)\n[![Npm](https://badgen.net/badge/icon/npm?icon=npm&label)](https://https://npmjs.com/package/@ecohead/kondonizer)\n[![Twitter](https://badgen.net/badge/icon/twitter?icon=twitter&label)](https://twitter.com/aureldvx)\n[![Support Server](https://img.shields.io/discord/980898930869031002.svg?label=Discord&logo=Discord&colorB=7289da&style=flat)](https://discord.gg/gPFM7ffu5B)\n\n![npm](https://img.shields.io/npm/v/@ecohead/kondonizer?style=for-the-badge)\n![NPM](https://img.shields.io/npm/l/@ecohead/kondonizer?style=for-the-badge)\n![npm bundle size](https://img.shields.io/bundlephobia/minzip/@ecohead/kondonizer?style=for-the-badge)\n\n![Maintenance](https://img.shields.io/badge/Maintained%3F-yes-green.svg?style=for-the-badge)\n![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=for-the-badge)\n\n[![Support Server](https://img.shields.io/discord/980898930869031002.svg?label=Discord&logo=Discord&colorB=7289da&style=for-the-badge)](https://discord.gg/gPFM7ffu5B)\n\n# Kondonizer\n\nKondonizer is a custom element (a native HTML tag) that can be integrated in any frontend code. It displays a media library based on a Media model, like WordPress does internally. You can select, upload, edit and delete one or multiple files, all based on a configuration object highly customizable.\n\nThis web component needs between 2 and 5 API endpoints to be fully working. More info in the [documentation](https://aureldvx.fr/ecohead/kondonizer/specify-api-endpoints).\n\n\n## Documentation\n\nThe full documentation is accessible in a [dedicated website](https://aureldvx.fr/ecohead/kondonizer).\n\n\n## Installation\n\nYou can use your preferred package manager.\n\n[npm](https://www.npmjs.com/)\n```bash\nnpm install @ecohead/kondonizer --save\n```\n[yarn](https://yarnpkg.com/)\n```bash\nyarn add @ecohead/kondonizer --save\n```\n[pnpm](https://pnpm.io/)\n```bash\npnpm install @ecohead/kondonizer --save\n```\n\n## Configuration\n\n### Add the custom-element to your page\n\nThe first step is to place the HTML tag where you need it in your template :\n\n```html\n<!doctype html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\">\n  <title></title>\n</head>\n<body>\n  <!-- Calls the custom-element -->\n  <eco-kondonizer></eco-kondonizer>\n</body>\n</html>\n```\n\nAt this point, you will see any changes, because you need to create an instance of kondonizer to actually display the component UI.\n\n### Create a new instance of the component\n\nThe `eco-kondonizer` custom element provide a method to create a new instance with some options. To display the component UI, you need to create a new instance as follows :\n\n```js\n  // At the top of the file\n  import { EcoKondonizer, defineConfig } from \"@ecohead/kondonizer\";\n\n  // Anywhere in the same file\n  const kondonizer = document.querySelector('eco-kondonizer');\n\n  if (!kondonizer) return;\n\n  kondonizer.createInstance({\n    // Create default options, but necessary to be customized\n    config: defineConfig(),\n    // Pass [] to no existing selection, or an array of ids (e.g. [12,28,46])\n    selectedMedias: [],\n    // Defaults to 'en-US'\n    defaultLang: 'fr-FR'\n  });\n```\n\n> **Note**\n> All the options available are listed [here](https://aureldvx.fr/ecohead/kondonizer/configuration-options).\n\n> **Warning**\n> Some config options are required (e.g. **server endpoints**), so you need to pass a correct config to view the component UI.\n\n### Listen to selection confirmation\n\nA [CustomEvent](https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent) is emitted each time the user clicks on the confirm button in the modal.\nSo, to get the user selection, you have to listen to this event as follows :\n\n```js\n  kondonizer.addEventListener('kondoupdate', (e) => {\n    console.log(e.detail)\n  });\n\n  /**\n   * Outputs :\n   * {\n   *    identifier: 'some-uuid', // Unique identifier of the instance\n   *    selection: [12,24] // All media ids selected in the modal\n   * }\n   */\n```\n\n### Et voilà !\n\nYou now have a fully functional web component that you can integrate in any of your templates.\n\nIf you need more details in the integration in the most popular front-end frameworks and libraries, see [Integrate with front-end frameworks](ttps://aureldvx.fr/ecohead/kondonizer/integrate-with-frameworks).\n\n## Preview\n\nYou can also have a working demo on the documentation website.\n\n  ![Kondonizer preview image](https://static.aureldvx.fr/ecohead/kondonizer/kondonizer-preview.png)\n\n## Credits\n- [Bootstrap Icons](https://icons.getbootstrap.com/) for all icons\n- [Tailwind CSS](https://tailwindcss.com/) for default color palette\n- [Unsplash](https://unsplash.com/) for all demo images\n- [Adonis](https://adonisjs.com/) for demo API\n- [Docusaurus](https://docusaurus.io/) for documentation website\n\n## License\nThis library is MIT licensed.\n","readmeFilename":"README.md"}