{"_id":"@coffeekraken/dialog-webcomponent","_rev":"2-75036fb98924a01bcb1b69d81f8efb7a","name":"@coffeekraken/dialog-webcomponent","dist-tags":{"latest":"1.0.0"},"versions":{"1.0.0":{"name":"@coffeekraken/dialog-webcomponent","version":"1.0.0","description":"Powerful, fully featured and easy to use dialog component","homepage":"http://coffeekraken.io","main":"js/index.js","repository":{"type":"git","url":"https://github.com/coffeekraken/coffeekraken/tree/master/webcomponent/dialog-webcomponent"},"scripts":{"postinstall":"node ./scripts/postinstall.js"},"keywords":["dialog","modal","webcomponent","component","html","sugar","coffee","kraken","coffeekraken"],"author":{"name":"Coffeekraken","email":"hello@coffeekraken.io"},"contributors":[{"name":"Olivier Bossel","email":"olivier.bossel@gmail.com","url":"http://olivierbossel.com"}],"license":"MIT","dependencies":{"@coffeekraken/sugar":"^1.0.5"},"devDependencies":{"@coffeekraken/button-style":"^1.0.0","@coffeekraken/typography-style":"0.0.1","fs-extra":"^8.1.0"},"_id":"@coffeekraken/dialog-webcomponent@1.0.0","_nodeVersion":"12.13.1","_npmVersion":"6.13.1","dist":{"integrity":"sha512-6fyKefwxfSG1lO1fTk6Nd/gYEnB3yuogzY8XcKM9Ak+oIzp7O8TRqSBIZIAqPcPiTmgRISYWsWpEjRoSKMnGmA==","shasum":"c31d9827573fc7212eddadded89406aae7e4e638","tarball":"https://registry.npmjs.org/@coffeekraken/dialog-webcomponent/-/dialog-webcomponent-1.0.0.tgz","fileCount":24,"unpackedSize":1175704,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+Kz3CRA9TVsSAnZWagAAu2EP/Ra8AR8TjrvP/xVBPBK+\n1z3RBGWZo5yo3UiJinDnOuSKh5k2fV6OvYZXyOnmji6DWGwcyJZAy8FF6SPj\n+8HCgopLCJ3Mgd+KL9ZPcZr/oO2rH7vg3mohPSpnsWjyh3BXBlaB/UEcIUp5\nFrPjBcPVwmTD7CGRQBwe1Y7Xtd4upydm7l58Yj39RkgZxT3oMVM3p4YoJRaJ\npT/pVEUo5+7B/kw60eTN0QuhuVr7BpnYyjbgQt5HBhM0CDnt96/91M+tE/H/\nYs+WpSoZ4Iqb5NfAh2M6RXq5NeZylezfCfOJvJ5VOggmj2q6PD7IpELXCeSy\n1xjAzjJUuDY/MmaL3TzOus7cg+vu6RiGXAYbld2ShZZh55f1k2rxNJdTVIU7\nP4Um6yGpyTN7cGkwu9tvfcdVRBqm86ZY8NjVQtj9SCVzPiUymtcZd9WjgVSA\nPdpIa29bjILVlNmG11HGC90uv5xA2W5XcfJb4sWOixv/D/iZR3yyaHkOZZNb\nyYIeg8XPAIwlVCtqzH0mMkS/TZei0CVRgFxno3M7XqnaevoXIFJrjME7VTRP\nNdS4BFwC3ZReJmz8h54WoyPIeRcPP+QhVLqLUD+ZPZ95eeYKoyrQNtUj1uVu\nI3ZwqMW5fY3/lHZ3OpzY7KWnnD5mne1SE7o0Fk5+o8v54Cu+fK34pJENM990\nimez\r\n=4Gc4\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIE7rVGgOhBgOfyUFjpRj/A3aleE4Yt6dk8au2fBh7bGlAiEAzdsvuv1Nw32rhTWDEslj0GzFJim28mNBXXTOApIZH5Q="}]},"maintainers":[{"name":"olivierbossel","email":"olivier.bossel@gmail.com"}],"_npmUser":{"name":"olivierbossel","email":"olivier.bossel@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/dialog-webcomponent_1.0.0_1576578294492_0.22733012494924254"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."}},"time":{"created":"2019-12-17T10:24:54.256Z","1.0.0":"2019-12-17T10:24:54.772Z","modified":"2022-07-27T14:28:35.267Z"},"maintainers":[{"name":"olivierbossel","email":"olivier.bossel@gmail.com"}],"description":"Powerful, fully featured and easy to use dialog component","homepage":"http://coffeekraken.io","keywords":["dialog","modal","webcomponent","component","html","sugar","coffee","kraken","coffeekraken"],"repository":{"type":"git","url":"https://github.com/coffeekraken/coffeekraken/tree/master/webcomponent/dialog-webcomponent"},"contributors":[{"name":"Olivier Bossel","email":"olivier.bossel@gmail.com","url":"http://olivierbossel.com"}],"author":{"name":"Coffeekraken","email":"hello@coffeekraken.io"},"license":"MIT","readme":"# Coffeekraken dialog webcomponent <img src=\".resources/coffeekraken-logo.jpg\" height=\"25px\" />\n\n![npm](https://img.shields.io/npm/l/@coffeekraken/dialog-webcomponent?style=flat-square)\n![npm](https://img.shields.io/npm/v/@coffeekraken/dialog-webcomponent?style=flat-square)\n![npm](https://img.shields.io/npm/dw/@coffeekraken/dialog-webcomponent?style=flat-square)\n\nPowerful, fully featured and easy to use dialog component\n\n## Features\n\n1. Fully customizable\n2. Support multiple content source (inline content / DOM element / Ajax request)\n3. Support modal option\n4. And more...\n\n## Table of content\n\n1. [Install](#readme-install)\n2. [Get Started](#readme-get-started)\n3. [Dialog types](#readme-dialog-types)\n4. [Javascript API](doc/src/js)\n5. [Styling classes](doc/classes.md)\n6. [Coffeekraken](readme-coffeekraken)\n\n<a name=\"readme-install\"></a>\n## Install\n\n```\nnpm install @coffeekraken/dialog-webcomponent --save\n```\n\n<a name=\"readme-get-started\"></a>\n## Get Started\n\nFirst, import the component into your javascript file like so:\n\n```js\nimport DialogWebcomponent from '@coffeekraken/dialog-webcomponent'\n```\n\nThen simply use it inside your html like so:\n\n```html\n<!-- inline content -->\n<ck-dialog id=\"my-cool-dialog\">\n\t<template><!-- optional template tag -->\n\t\t<h1>Hello World</h1>\n\t\t<p>Phasellus nec dictum arcu, finibus semper tellus. Aliquam mattis dictum.</p>\n\t</template>\n</ck-dialog>\n<a href=\"#my-cool-dialog\">Click to open the dialog</a>\n\n<!-- automatically opened dialog -->\n<ck-dialog opened content=\"data/my-cool-dialog.html\"></ck-dialog>\n```\n\n<a id=\"readme-dialog-types\"></a>\n\n## Dialog types\n\nThis webcomponent offers you multiple way to instanciate a dialog. Here's the list:\n\n### Dom component\n\nOpen a dialog using a dom component present in the page.\nThis dom element can be a `template` tag too.\n\n```html\n<a href=\"#my-cool-dialog\" class=\"btn btn--primary\">Open dialog</a>\n<div class=\"hidden\">\n    <ck-dialog id=\"my-cool-dialog\">\n        <h1 class=\"h1 m-b\">\n            My cool dialog\n        </h1>\n        <p class=\"p\">\n            Vivamus vestibulum ultrices eros nec bibendum. In sit amet ultrices mi. Etiam nunc ante, efficitur ac aliquam eget, iaculis quis massa. Duis quis molestie orci. Sed ultricies sem ante, in.\n        </p>\n    </ck-dialog>\n</div>\n```\n\n### Iframe\n\nOpen a content inside an iframe. Usefull to load for example youtube/vimeo/etc... content\n\n```html\n<ck-dialog iframe>\n    <a class=\"btn btn--primary\" href=\"/data/iframe-demo.html\">\n        Open my content in an iframe dialog\n    </a>\n</ck-dialog>\n\n```\n\n### Modal\n\nOpen a dialog in modal mode. This mean that the user cannot close the dialog by clicking outside or by the escape key and your in full control of it's state\n\n```html\n<a href=\"#my-cool-dialog\" class=\"btn btn--primary\">Open dialog</a>\n<div class=\"hidden\">\n    <ck-dialog id=\"my-cool-dialog\" modal>\n        <h1 class=\"h1 m-b\">\n            Hello world\n        </h1>\n        <p class=\"p m-b\">\n            Vivamus vestibulum ultrices eros nec bibendum. In sit amet ultrices mi. Etiam nunc ante, efficitur ac aliquam eget, iaculis quis massa. Duis quis molestie orci. Sed ultricies sem ante, in.\n        </p>\n        <a class=\"btn btn--secondary\" ck-dialog-ok>\n            Close dialog\n        </a>\n    </ck-dialog>\n</div>\n\n```\n\n### Ajax content\n\nOpen a dialog and load his content through an ajax request\n\n```html\n<ck-dialog>\n    <a href=\"/data/ajax-demo.html\" class=\"btn btn--primary\">Open ajax dialog</a>\n</ck-dialog>\n```\n\n### Programatical dialog\n\nOpen a dialog fully programatically\n\n```js\nimport strToHtml from '@coffeekraken/sugar/js/string/strToHtml'\nimport DialogWebcomponent from '@coffeekraken/dialog-webcomponent'\nconst myDialog = DialogWebcomponent.open(strToHtml('<p>Hello World</p>'), {\n\tmodal: true\n})\nsetTimeout(() => {\n\tmyDialog.close()\n}, 5000)\n\n```\n\n<a name=\"readme-coffeekraken\"></a>\n\n# Coffeekraken\n\nWe are a young collective of front-end creative developers with one goal in mind. Build tools to make every team working day life better. This is our first and only concern. All our tools are build around that purpose.\nAll what we provide are some cool tools that you can use the way you want. These tools features cover a large scope of the front-end workflow (styleguide generation, colors/fonts management, etc...). You can use only the parts that you need and let the rest aside...\n\n[![Coffeekraken](.resources/coffeekraken-logo.jpg)](https://coffeekraken.io)\n","readmeFilename":"README.md"}