{"_id":"@dustinpoissant/device-frame","_rev":"4-788078a0702311b4de2c2273d98522f2","name":"@dustinpoissant/device-frame","dist-tags":{"latest":"1.0.3"},"versions":{"1.0.0":{"name":"@dustinpoissant/device-frame","version":"1.0.0","keywords":["web-component","device-frame","mobile","iframe","responsive-design","device-emulation"],"author":{"name":"Dustin Poissant"},"license":"MIT","_id":"@dustinpoissant/device-frame@1.0.0","maintainers":[{"name":"dustinpoissant","email":"dustinpoissant@gmail.com"}],"homepage":"https://dustinpoissant.github.io/device-frame/","bugs":{"url":"https://github.com/dustinpoissant/device-frame/issues"},"dist":{"shasum":"9fe6412bf0037a27009219e5c906364c34614801","tarball":"https://registry.npmjs.org/@dustinpoissant/device-frame/-/device-frame-1.0.0.tgz","fileCount":3,"integrity":"sha512-Tnvqjlkg2T6ZTdGHsZ326GzCWKLelNfHGj/8MkPVo2j2SG+YP3hChjBzOGXZ0gpgl/2geAXxGqm2hyaEuTfWHQ==","signatures":[{"sig":"MEUCIQC+Es8wfVOQTzG/7RPkTaBXvLM2LT8vmjTPiEZufMWP1wIgdpsJGyRfLXRcLE5xNxr3/OuIIZuwoMNPndmJmcB5fXE=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":17565},"main":"DeviceFrame.js","type":"module","gitHead":"2dba9194ad4bb34901a1b675db698b2d813d3c01","_npmUser":{"name":"dustinpoissant","email":"dustinpoissant@gmail.com"},"repository":{"url":"git+https://github.com/dustinpoissant/device-frame.git","type":"git"},"_npmVersion":"10.9.2","description":"A customizable web component that renders an iframe inside a mobile device frame","directories":{},"_nodeVersion":"22.17.1","_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/device-frame_1.0.0_1761449731606_0.5261108069606408","host":"s3://npm-registry-packages-npm-production"}},"1.0.1":{"name":"@dustinpoissant/device-frame","version":"1.0.1","keywords":["web-component","device-frame","mobile","iframe","responsive-design","device-emulation"],"author":{"name":"Dustin Poissant"},"license":"MIT","_id":"@dustinpoissant/device-frame@1.0.1","maintainers":[{"name":"dustinpoissant","email":"dustinpoissant@gmail.com"}],"homepage":"https://dustinpoissant.github.io/device-frame/","bugs":{"url":"https://github.com/dustinpoissant/device-frame/issues"},"dist":{"shasum":"22cc44330ab7d5d29228305a38faa17506598a2f","tarball":"https://registry.npmjs.org/@dustinpoissant/device-frame/-/device-frame-1.0.1.tgz","fileCount":3,"integrity":"sha512-77AbgVkpf150YkyBkS51sp93JlhCq09QO/mxvQnw3LJXDGrYv87QLJogAumHvIK6XoMKeFKuqhz9OhTBMiKiMQ==","signatures":[{"sig":"MEYCIQDMv7G5aenr/2It2XL1uAfKg1Hm/mhvEbJSZeWhxsU6QwIhAIZG3yVOEIworDx8BBZK28YcG9//RqZhWjuXxusCY08W","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@dustinpoissant%2fdevice-frame@1.0.1","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"unpackedSize":16941},"main":"DeviceFrame.js","type":"module","gitHead":"c3d9daebf10f574a0a9d798a5584a985d4ac67b3","_npmUser":{"name":"dustinpoissant","email":"dustinpoissant@gmail.com"},"repository":{"url":"git+https://github.com/dustinpoissant/device-frame.git","type":"git"},"_npmVersion":"10.8.2","description":"A customizable web component that renders an iframe inside a mobile device frame","directories":{},"_nodeVersion":"20.19.5","_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/device-frame_1.0.1_1761450007168_0.33929347145529687","host":"s3://npm-registry-packages-npm-production"}},"1.0.2":{"name":"@dustinpoissant/device-frame","version":"1.0.2","keywords":["web-component","device-frame","mobile","iframe","responsive-design","device-emulation"],"author":{"name":"Dustin Poissant"},"license":"MIT","_id":"@dustinpoissant/device-frame@1.0.2","maintainers":[{"name":"dustinpoissant","email":"dustinpoissant@gmail.com"}],"homepage":"https://dustinpoissant.github.io/device-frame/","bugs":{"url":"https://github.com/dustinpoissant/device-frame/issues"},"dist":{"shasum":"93d03bb2265e7cf767ba56c73ab3f6557fede047","tarball":"https://registry.npmjs.org/@dustinpoissant/device-frame/-/device-frame-1.0.2.tgz","fileCount":3,"integrity":"sha512-QNzE4c4ypg250Nzfn8BLKA1dtfLAcQ4NydQXgkuW8b5h226zTrCWCkZWI1Wj8emh5nquKvMyCiJfvdCCJD/eCQ==","signatures":[{"sig":"MEYCIQDsH0R5oU6bkoY+qOOLDrvJvAQ8L6omRbX31VhJTYL89AIhAIkz/WE/5mOgeIcb+YQ5V+jKCKWJCqGKoXiNDfODOJ6/","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@dustinpoissant%2fdevice-frame@1.0.2","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"unpackedSize":17072},"main":"DeviceFrame.js","type":"module","gitHead":"fd94eba49aab6dd6a41769c5cdeed0ff4d4fe5e2","scripts":{"build":"terser DeviceFrame.js -o DeviceFrame.min.js"},"_npmUser":{"name":"dustinpoissant","email":"dustinpoissant@gmail.com"},"repository":{"url":"git+https://github.com/dustinpoissant/device-frame.git","type":"git"},"_npmVersion":"10.8.2","description":"A customizable web component that renders an iframe inside a mobile device frame","directories":{},"_nodeVersion":"20.19.5","_hasShrinkwrap":false,"devDependencies":{"terser":"^5.31.0"},"_npmOperationalInternal":{"tmp":"tmp/device-frame_1.0.2_1761453812932_0.9973449002677459","host":"s3://npm-registry-packages-npm-production"}},"1.0.3":{"name":"@dustinpoissant/device-frame","version":"1.0.3","description":"A customizable web component that renders an iframe inside a mobile device frame","main":"DeviceFrame.js","type":"module","keywords":["web-component","device-frame","mobile","iframe","responsive-design","device-emulation"],"author":{"name":"Dustin Poissant"},"license":"MIT","devDependencies":{"terser":"^5.31.0"},"scripts":{"build":"terser DeviceFrame.js -o DeviceFrame.min.js"},"repository":{"type":"git","url":"git+https://github.com/dustinpoissant/device-frame.git"},"homepage":"https://dustinpoissant.github.io/device-frame/","bugs":{"url":"https://github.com/dustinpoissant/device-frame/issues"},"_id":"@dustinpoissant/device-frame@1.0.3","gitHead":"7fda646b7ac1323a2b45a407ee7eeb787316d8d3","_nodeVersion":"20.19.5","_npmVersion":"10.8.2","dist":{"integrity":"sha512-uWTMLQ5fzTZeQtBhpKPr0fKXLqAyXBKZ9uecXlFmrfdjx1AYv/88cyV5zRiDQwlgyzkCTZ8crlbvmIhDkkDfYQ==","shasum":"1c92d07e1f7eec007219d209818cec4925f2766a","tarball":"https://registry.npmjs.org/@dustinpoissant/device-frame/-/device-frame-1.0.3.tgz","fileCount":3,"unpackedSize":17499,"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@dustinpoissant%2fdevice-frame@1.0.3","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQC8RhENJR07TL4DgvLipfxhSBD2JDweDuE9RtotHVQ1DwIhAKIQnor4iihCLMTDvfPqBvsRPt3v9iHqN5HAarkNi7DT"}]},"_npmUser":{"name":"dustinpoissant","email":"dustinpoissant@gmail.com"},"directories":{},"maintainers":[{"name":"dustinpoissant","email":"dustinpoissant@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/device-frame_1.0.3_1761527717755_0.7333591549000882"},"_hasShrinkwrap":false}},"time":{"created":"2025-10-26T03:35:31.506Z","modified":"2025-10-27T01:15:18.389Z","1.0.0":"2025-10-26T03:35:31.835Z","1.0.1":"2025-10-26T03:40:07.381Z","1.0.2":"2025-10-26T04:43:33.119Z","1.0.3":"2025-10-27T01:15:17.949Z"},"bugs":{"url":"https://github.com/dustinpoissant/device-frame/issues"},"author":{"name":"Dustin Poissant"},"license":"MIT","homepage":"https://dustinpoissant.github.io/device-frame/","keywords":["web-component","device-frame","mobile","iframe","responsive-design","device-emulation"],"repository":{"type":"git","url":"git+https://github.com/dustinpoissant/device-frame.git"},"description":"A customizable web component that renders an iframe inside a mobile device frame","maintainers":[{"name":"dustinpoissant","email":"dustinpoissant@gmail.com"}],"readme":"# Device Frame Web Component\n\nA customizable web component that renders an iframe inside a mobile device frame, with options for device selection, orientation, folding, and scaling.\n\n**[Repository](https://github.com/dustinpoissant/device-frame)** | **[Full Documentation](https://dustinpoissant.github.io/device-frame/)**\n\n## Installation\n\nYou can install the Device Frame component via NPM or download it manually.\n\n#### NPM Installation\n\nInstall the package using NPM:\n\n```bash\nnpm install @dustinpoissant/device-frame\n```\n\nThen include the minified script in your HTML:\n\n```html\n\n```\n\n#### Manual Download\n\nDownload `DeviceFrame.min.js` directly from the [repository](https://github.com/dustinpoissant/device-frame) and include it in your project:\n\n```html\n\n```\n\n## Attributes\n\n| Attribute | Description | Default |\n|-----------|-------------|---------|\n| `src` | The URL to load in the iframe | `false` |\n| `device` | Device type (e.g., iphone15promax, galaxys22ultra) | `\"iphone15\"` |\n| `controls` | Comma-separated list of controls to show (device, orientation, fold, scaled) | `\"\"` |\n| `orientation` | Device orientation (portrait/landscape) | `\"portrait\"` |\n| `scaled` | Scales device to fit 80% of viewport | `false` |\n| `devices` | Comma-separated list of device keys to show in device picker (leave empty to show all) | `\"\"` |\n\n## Available Devices\n\n- iPhone 15 Pro Max, iPhone 15 Pro, iPhone 15, iPhone SE\n- Galaxy S22 Ultra, Galaxy S22+, Galaxy S22\n- Galaxy Tab S9, Galaxy Tab A8\n- Pixel 8, Pixel Fold, Galaxy Z Fold5, Pixel Tablet\n- iPad Pro 12.9\", iPad Pro 10.5\", iPad Air 4, iPad 10.2\"\n\n## Basic Usage\n\n### Simple Device Frame\n```html\n\n```\n\n\n\n### Device Picker\n```html\n\n```\n\n\n\n### All Controls\n```html\n\n```\n\n\n\n## JavaScript API\n\n### Importing and Creating Instances\n\n```javascript\nimport DeviceFrame from './DeviceFrame.js';\n\n// Create with constructor\nconst frame = new DeviceFrame({\n src: 'https://example.com',\n device: 'iphone15',\n controls: 'device,orientation'\n});\ndocument.body.appendChild(frame);\n\n// Or create with document.createElement\nconst frame2 = document.createElement('device-frame');\nframe2.src = 'https://example.com';\nframe2.device = 'iphone15';\ndocument.body.appendChild(frame2);\n\n// Control existing elements\nconst existingFrame = document.querySelector('device-frame');\nexistingFrame.src = 'https://new-url.com';\nexistingFrame.device = 'galaxys22ultra';\nexistingFrame.devices = 'iphone15,galaxys22ultra,ipadpro12'; // Limit options\nexistingFrame.orientation = 'landscape';\nexistingFrame.controls = 'device,orientation';\n```\n\n### Adding Custom Devices\n\n```javascript\nimport DeviceFrame from './DeviceFrame.js';\n\nDeviceFrame.devices['customphone'] = {\n name: 'Custom Phone',\n resolution: [400, 800],\n topFrameSize: 20,\n bottomFrameSize: 20,\n sideFrameSize: 15,\n innerRadius: 10,\n outerRadius: 15\n};\n```\n\n### Event Handling\n\n```javascript\nconst frame = document.querySelector('device-frame');\n\nframe.addEventListener('devicechange', (event) => {\n console.log('Device changed to:', event.detail.device);\n});\n\nframe.addEventListener('orientationchange', (event) => {\n console.log('Orientation changed to:', event.detail.orientation);\n});\n\nframe.addEventListener('load', (event) => {\n console.log('Iframe loaded:', event.detail.src);\n // Access iframe for message passing\n const iframe = frame.iframe;\n iframe.contentWindow.postMessage('Hello!', '*');\n});\n```","readmeFilename":"README.md"}