{"id":13403343,"url":"https://github.com/nextapps-de/winbox","last_synced_at":"2025-04-25T14:48:35.313Z","repository":{"id":37751665,"uuid":"357272600","full_name":"nextapps-de/winbox","owner":"nextapps-de","description":"WinBox is a modern HTML5 window manager for the web: lightweight, outstanding performance, no dependencies, fully customizable, open source!","archived":false,"fork":false,"pushed_at":"2024-08-15T08:08:46.000Z","size":536,"stargazers_count":6300,"open_issues_count":24,"forks_count":207,"subscribers_count":69,"default_branch":"master","last_synced_at":"2025-04-24T08:53:17.533Z","etag":null,"topics":["box","desktop","desktop-app","desktop-widget","frame","popup","winbox","window","window-manager","windowmanager","windows"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/nextapps-de.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":["ts-thomas"],"open_collective":"winboxjs","liberapay":"ts-thomas","patreon":"user?u=96245532","custom":["https://www.paypal.com/donate/?hosted_button_id=GEVR88FC9BWRW","https://salt.bountysource.com/teams/ts-thomas"]}},"created_at":"2021-04-12T16:55:39.000Z","updated_at":"2025-04-24T08:39:49.000Z","dependencies_parsed_at":"2024-11-06T12:37:36.694Z","dependency_job_id":"d801d53d-9271-4932-8b89-0e4bcddb4f11","html_url":"https://github.com/nextapps-de/winbox","commit_stats":{"total_commits":136,"total_committers":10,"mean_commits":13.6,"dds":"0.19852941176470584","last_synced_commit":"bbb453aca2c3c5122c06ae0c6446eea1730d9142"},"previous_names":[],"tags_count":28,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nextapps-de%2Fwinbox","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nextapps-de%2Fwinbox/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nextapps-de%2Fwinbox/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nextapps-de%2Fwinbox/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/nextapps-de","download_url":"https://codeload.github.com/nextapps-de/winbox/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250815151,"owners_count":21491710,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["box","desktop","desktop-app","desktop-widget","frame","popup","winbox","window","window-manager","windowmanager","windows"],"created_at":"2024-07-30T19:01:28.718Z","updated_at":"2025-04-25T14:48:35.277Z","avatar_url":"https://github.com/nextapps-de.png","language":"JavaScript","readme":"\u003ch1\u003e\n    \u003cimg src=\"https://cdn.jsdelivr.net/gh/nextapps-de/winbox@master/demo/winbox-gradient.svg\" alt=\"WinBox.js: A modern HTML5 window manager for the web.\" width=\"100%\"\u003e\n\u003c/h1\u003e\n\u003ch3\u003eModern window manager for the web: lightweight, outstanding performance, no dependencies, fully customizable, open source!\u003c/h3\u003e\n\n\u003ca target=\"_blank\" href=\"https://www.npmjs.com/package/winbox\"\u003e\u003cimg src=\"https://img.shields.io/npm/v/winbox.svg\"\u003e\u003c/a\u003e\u003c!--\u003ca target=\"_blank\" href=\"https://github.com/nextapps-de/winbox/issues\"\u003e\u003cimg src=\"https://img.shields.io/github/issues/nextapps-de/winbox.svg\"\u003e\u003c/a\u003e--\u003e\n\u003ca target=\"_blank\" href=\"https://github.com/nextapps-de/winbox/blob/master/LICENSE.md\"\u003e\u003cimg src=\"https://img.shields.io/npm/l/winbox.svg\"\u003e\u003c/a\u003e\n\n\u003ca href=\"https://nextapps-de.github.io/winbox/\"\u003eDemo\u003c/a\u003e \u0026ensp;\u0026bull;\u0026ensp; \u003ca href=\"#started\"\u003eGetting Started\u003c/a\u003e \u0026ensp;\u0026bull;\u0026ensp; \u003ca href=\"#options\"\u003eOptions\u003c/a\u003e \u0026ensp;\u0026bull;\u0026ensp; \u003ca href=\"#api\"\u003eAPI\u003c/a\u003e \u0026ensp;\u0026bull;\u0026ensp; \u003ca href=\"#themes\"\u003eThemes\u003c/a\u003e \u0026ensp;\u0026bull;\u0026ensp; \u003ca href=\"#customize\"\u003eCustomize\u003c/a\u003e \u0026ensp;\u0026bull;\u0026ensp; \u003ca href=\"CHANGELOG.md\"\u003eChangelog\u003c/a\u003e\n\n\u003ca name=\"demo\"\u003e\u003c/a\u003e\n### Live Demo and Code Examples\n\n\u003ca href=\"https://nextapps-de.github.io/winbox/\"\u003ehttps://nextapps-de.github.io/winbox/ \u003c/a\u003e\n\n## Support this Project\n\nHello my name is Thomas, also known as ts-thomas. This is a personal project which I fully made in my free time. It is hosted by the Github account from the company Nextapps where I work to give it more exposure.\nI have never received any financial support for this project from the company Nextapps as some of you might have guessed, since it is a free and open source project.\nI'm really happy that WinBox.js is getting so much positive feedback and also feature requests. Please feel free to support me by making a personal donation which helps me a lot to keep this project alive and also to providing all the contribution to keep WinBox.js on a professional top-end level.\n\n\u003ca href=\"https://opencollective.com/winboxjs/donate\" target=\"_blank\" style=\"margin-right: 10px\"\u003e\n    \u003cimg src=\"https://opencollective.com/webpack/donate/button@2x.png?color=blue\" height=\"32\" alt=\"Donate using Open Collective\"\u003e\n\u003c/a\u003e\n\u003ca href=\"https://github.com/sponsors/ts-thomas/\" target=\"_blank\" style=\"margin-right: 10px\"\u003e\n    \u003cimg src=\"https://camo.githubusercontent.com/b932f45963b659dfeb86b77ff29a9eaebe25a734d63a17a176aa82bf34845cf2/68747470733a2f2f696d672e736869656c64732e696f2f7374617469632f76313f6c6162656c3d53706f6e736f72266d6573736167653d254532253944254134266c6f676f3d47697448756226636f6c6f723d253233666538653836\" height=\"32\" alt=\"Donate using Github Sponsors\"\u003e\n\u003c/a\u003e\n\u003ca href=\"https://liberapay.com/ts-thomas/donate\" target=\"_blank\" style=\"margin-right: 10px\"\u003e\n    \u003cimg src=\"https://liberapay.com/assets/widgets/donate.svg\" height=\"32\" alt=\"Donate using Liberapay\"\u003e\n\u003c/a\u003e\n\u003ca href=\"https://www.patreon.com/user?u=96245532\" target=\"_blank\" style=\"margin-right: 10px\"\u003e\n    \u003cimg src=\"https://s3-us-west-1.amazonaws.com/widget-images/become-patron-widget-medium%402x.png\" height=\"32\" alt=\"Donate using Patreon\"\u003e\n\u003c/a\u003e\n\u003ca href=\"https://salt.bountysource.com/teams/ts-thomas\" target=\"_blank\" style=\"margin-right: 10px\"\u003e\n    \u003cimg src=\"https://d2bbtvgnhux6eq.cloudfront.net/assets/logos/alternate-7868987b01474c95f47678727f6657882f6565a36396eb4b637ea53cc5944ff8.svg\" height=\"32\" alt=\"Donate using Bountysource\"\u003e\n\u003c/a\u003e\n\u003ca href=\"https://www.paypal.com/donate/?hosted_button_id=GEVR88FC9BWRW\" target=\"_blank\"\u003e\n    \u003cimg src=\"https://www.paypalobjects.com/webstatic/de_DE/i/de-pp-logo-200px.png\" height=\"32\" alt=\"Donate using PayPal\"\u003e\n\u003c/a\u003e\n\u003c!-- [![](https://img.shields.io/static/v1?label=Sponsor\u0026message=%E2%9D%A4\u0026logo=GitHub\u0026color=%23fe8e86)](https://github.com/sponsors/ts-thomas/) --\u003e\n\u003cbr\u003e\u003cbr\u003e\nThanks a lot,\nThomas (ts-thomas)\n\n\u003ca name=\"addon\"\u003e\u003c/a\u003e\n### Plugins / Add-ons / Extensions\nVue 2 and 3 (a wrapper component that adds the ability to mount Vue components in WinBox.js):\u003cbr\u003e\n\u003ca href=\"https://github.com/wobsoriano/vue-winbox\"\u003ehttps://github.com/wobsoriano/vue-winbox\u003c/a\u003e\n\nA React controlled component for WinBox.js, with full Reactful props and state.:\u003cbr\u003e\n\u003ca href=\"https://github.com/rickonono3/react-winbox\"\u003ehttps://github.com/rickonono3/react-winbox\u003c/a\u003e\n\n\u003ca name=\"started\"\u003e\u003c/a\u003e\n## Getting Started\n\n__Get Latest Stable Build (Recommended):__\n\n\u003ctable\u003e\n    \u003ctr\u003e\n        \u003ctd colspan=3\"\u003e\n            \u003cb\u003e\u003cu\u003eBundle:\u003c/u\u003e\u003c/b\u003e (all assets bundled into one single file: js + css + html + icons)\n        \u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003ewinbox.bundle.min.js\u003c/td\u003e\n        \u003ctd\u003e\u003ca href=\"https://github.com/nextapps-de/winbox/raw/0.2.82/dist/winbox.bundle.min.js\" target=\"_blank\"\u003eDownload\u003c/a\u003e\u003c/td\u003e\n        \u003ctd\u003e\u003ca href=\"https://rawcdn.githack.com/nextapps-de/winbox/0.2.82/dist/winbox.bundle.min.js\" target=\"_blank\"\u003ehttps://rawcdn.githack.com/nextapps-de/winbox/0.2.82/dist/winbox.bundle.min.js\u003c/a\u003e\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd colspan=3\"\u003e\n            \u003cbr\u003e\u003cb\u003e\u003cu\u003eNon-Bundled:\u003c/u\u003e\u003c/b\u003e (js and css are separated, css includes icons as base64)\n        \u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003ewinbox.min.js\u003c/td\u003e\n        \u003ctd\u003e\u003ca href=\"https://github.com/nextapps-de/winbox/raw/0.2.82/dist/js/winbox.min.js\" target=\"_blank\"\u003eDownload\u003c/a\u003e\u003c/td\u003e\n        \u003ctd\u003e\u003ca href=\"https://rawcdn.githack.com/nextapps-de/winbox/0.2.82/dist/js/winbox.min.js\" target=\"_blank\"\u003ehttps://rawcdn.githack.com/nextapps-de/winbox/0.2.82/dist/js/winbox.min.js\u003c/a\u003e\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003ewinbox.min.css\u003c/td\u003e\n        \u003ctd\u003e\u003ca href=\"https://github.com/nextapps-de/winbox/raw/0.2.82/dist/css/winbox.min.css\" target=\"_blank\"\u003eDownload\u003c/a\u003e\u003c/td\u003e\n        \u003ctd\u003e\u003ca href=\"https://rawcdn.githack.com/nextapps-de/winbox/0.2.82/dist/css/winbox.min.css\" target=\"_blank\"\u003ehttps://rawcdn.githack.com/nextapps-de/winbox/0.2.82/dist/css/winbox.min.css\u003c/a\u003e\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd colspan=3\"\u003e\n            \u003cbr\u003e\u003cb\u003e\u003cu\u003eSources:\u003c/u\u003e\u003c/b\u003e (not bundled at all, images as url to original resources)\n        \u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003eES6 Modules\u003c/td\u003e\n        \u003ctd\u003e\u003ca href=\"https://minhaskamal.github.io/DownGit/#/home?url=https://github.com/nextapps-de/winbox/tree/0.2.82/src/js\" target=\"_blank\"\u003eDownload\u003c/a\u003e\u003c/td\u003e\n        \u003ctd\u003eThe \u003ci\u003e/src/js\u003c/i\u003e folder of this Github repository\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003eLESS Files (source)\u003c/td\u003e\n        \u003ctd\u003e\u003ca href=\"https://minhaskamal.github.io/DownGit/#/home?url=https://github.com/nextapps-de/winbox/tree/0.2.82/src/css\" target=\"_blank\"\u003eDownload\u003c/a\u003e\u003c/td\u003e\n        \u003ctd\u003eThe \u003ci\u003e/src/css\u003c/i\u003e folder of this Github repository\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003ewinbox.css (compiled)\u003c/td\u003e\n        \u003ctd\u003e\u003ca href=\"https://github.com/nextapps-de/winbox/raw/0.2.82/src/css/winbox.css\" target=\"_blank\"\u003eDownload\u003c/a\u003e\u003c/td\u003e\n        \u003ctd\u003e\u003ca href=\"https://rawcdn.githack.com/nextapps-de/winbox/0.2.82/src/css/winbox.css\" target=\"_blank\"\u003ehttps://rawcdn.githack.com/nextapps-de/winbox/0.2.82/src/css/winbox.css\u003c/a\u003e\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003esrc.zip\u003c/td\u003e\n        \u003ctd\u003e\u003ca href=\"https://minhaskamal.github.io/DownGit/#/home?url=https://github.com/nextapps-de/winbox/tree/0.2.82/dist\" target=\"_blank\"\u003eDownload\u003c/a\u003e\u003c/td\u003e\n        \u003ctd\u003eDownload all source files including image original resources.\u003c/td\u003e\n    \u003c/tr\u003e\n\u003c/table\u003e\n\n__Get Latest (NPM):__\n\n```cmd\nnpm install winbox\n```\n\n### Use Bundled Version (Recommended)\n\n\u003e The bundled version includes all assets like js, css, html and icon images as base64.\n\nA best practice is to load the library as async and use some modern preloading mechanism:\n\n```html\n\u003chtml\u003e\n\u003chead\u003e\n    \u003clink rel=\"preload\" href=\"winbox.bundle.min.js\" as=\"script\"\u003e\n\u003c/head\u003e\n\u003cbody\u003e\n    \u003c!--\n    \n    HTML CONTENT\n    \n    --\u003e\n    \u003c!-- BOTTOM OF BODY --\u003e\n    \u003cscript src=\"winbox.bundle.min.js\" async\u003e\u003c/script\u003e\n    \u003c!-- YOUR SCRIPT --\u003e\n    \u003cscript src=\"my-script.js\" defer\u003e\u003c/script\u003e\n\u003c/body\u003e\n\u003c/html\u003e\n```\n\nWhen you get troubles with unavailable references then remove the `async` or `defer` from this example and invest some minutes later to find out how you can properly load js assets asynchronously today.\n\n### Use Non-Bundled Version\n\nThe non-bundled version needs to load js and css separately (css already includes icons as base64).\n\n```html\n\u003chtml\u003e\n\u003chead\u003e\n    \u003clink rel=\"stylesheet\" href=\"winbox.min.css\"\u003e\n    \u003cscript src=\"winbox.min.js\"\u003e\u003c/script\u003e\n\u003c/head\u003e\n\u003cbody\u003e\u003c/body\u003e\n\u003c/html\u003e\n```\n\nYou can also load the non-bundled version in the same way.\n\n### ES6 Modules\n\nThe ES6 modules are located in `src/js/`. But you need to load the stylesheet file explicitly since this is just automatically loaded by the bundled version.\n\n```html\n\u003chead\u003e\n    \u003clink rel=\"stylesheet\" href=\"dist/css/winbox.min.css\"\u003e\n\u003c/head\u003e\n```\n\n```html\n\u003cscript type=\"module\"\u003e\n  import WinBox from \"./src/js/winbox.js\";\n\u003c/script\u003e\n```\n\nYou can also load modules via CDN, e.g.:\n\n```html\n\u003cscript type=\"module\"\u003e\n  import WinBox from \"https://unpkg.com/winbox@0.2.82/src/js/winbox.js\";\n\u003c/script\u003e\n```\n\nThe ES6 modules are not minified. Please use your favored bundler or build tool for this purpose.\n\n\u003ca name=\"api\"\u003e\u003c/a\u003e\n## Overview\n\nConstructor:\n\n- new \u003ca href=\"#winbox.new\"\u003e**WinBox**(title, options\\\u003ckey: value\\\u003e)\u003c/a\u003e : winbox\n\nGlobal methods:\n\n- \u003ca href=\"#winbox.new\"\u003eWinBox.**new**(title, options\\\u003ckey: value\\\u003e)\u003c/a\u003e : winbox\n- \u003ca href=\"#winbox.stack\"\u003eWinBox.**stack**()\u003c/a\u003e : Array\\\u003cwinbox\\\u003e\n\nInstance member methods:\n\n- \u003ca href=\"#winbox.mount\"\u003ewinbox.**mount**(src)\u003c/a\u003e\n- \u003ca href=\"#winbox.unmount\"\u003ewinbox.**unmount**(dest)\u003c/a\u003e\n- \u003ca href=\"#winbox.setUrl\"\u003ewinbox.**setUrl**(string)\u003c/a\u003e\n- \u003ca href=\"#winbox.setTitle\"\u003ewinbox.**setTitle**(string)\u003c/a\u003e\n- \u003ca href=\"#winbox.setIcon\"\u003ewinbox.**setIcon**(url)\u003c/a\u003e\n- \u003ca href=\"#winbox.move\"\u003ewinbox.**move**(x, y)\u003c/a\u003e\n- \u003ca href=\"#winbox.resize\"\u003ewinbox.**resize**(width, height)\u003c/a\u003e\n- \u003ca href=\"#winbox.close\"\u003ewinbox.**close**(boolean)\u003c/a\u003e\n- \u003ca href=\"#winbox.focus\"\u003ewinbox.**focus**(state)\u003c/a\u003e\n- \u003ca href=\"#winbox.blur\"\u003ewinbox.**blur**(state)\u003c/a\u003e\n- \u003ca href=\"#winbox.hide\"\u003ewinbox.**hide**(state)\u003c/a\u003e\n- \u003ca href=\"#winbox.show\"\u003ewinbox.**show**(state)\u003c/a\u003e\n- \u003ca href=\"#winbox.minimize\"\u003ewinbox.**minimize**(state)\u003c/a\u003e\n- \u003ca href=\"#winbox.maximize\"\u003ewinbox.**maximize**(state)\u003c/a\u003e\n- \u003ca href=\"#winbox.fullscreen\"\u003ewinbox.**fullscreen**(state)\u003c/a\u003e\n- \u003ca href=\"#winbox.restore\"\u003ewinbox.**restore**(state)\u003c/a\u003e\n- \u003ca href=\"#winbox.setBackground\"\u003ewinbox.**setBackground**(string)\u003c/a\u003e\n- \u003ca href=\"#winbox.addClass\"\u003ewinbox.**addClass**(name)\u003c/a\u003e\n- \u003ca href=\"#winbox.removeClass\"\u003ewinbox.**removeClass**(name)\u003c/a\u003e\n- \u003ca href=\"#winbox.hasClass\"\u003ewinbox.**hasClass**(name)\u003c/a\u003e\n- \u003ca href=\"#winbox.toggleClass\"\u003ewinbox.**toggleClass**(name)\u003c/a\u003e\n- \u003ca href=\"#winbox.addControl\"\u003ewinbox.**addControl**(options)\u003c/a\u003e\n- \u003ca href=\"#winbox.removeControl\"\u003ewinbox.**removeControl**(name)\u003c/a\u003e\n\nInstance properties (readonly):\n\n- \u003ca href=\"#winbox.id\"\u003ewinbox.**id**\u003c/a\u003e\n- \u003ca href=\"#winbox.index\"\u003ewinbox.**index**\u003c/a\u003e\n- \u003ca href=\"#winbox.window\"\u003ewinbox.**window**\u003c/a\u003e\n- \u003ca href=\"#winbox.body\"\u003ewinbox.**body**\u003c/a\u003e\n\nInstance properties (writable):\n\n- \u003ca href=\"#winbox.x\"\u003ewinbox.**x**\u003c/a\u003e\n- \u003ca href=\"#winbox.y\"\u003ewinbox.**y**\u003c/a\u003e\n- \u003ca href=\"#winbox.width\"\u003ewinbox.**width**\u003c/a\u003e\n- \u003ca href=\"#winbox.height\"\u003ewinbox.**height**\u003c/a\u003e\n- \u003ca href=\"#winbox.top\"\u003ewinbox.**top**\u003c/a\u003e\n- \u003ca href=\"#winbox.right\"\u003ewinbox.**right**\u003c/a\u003e\n- \u003ca href=\"#winbox.bottom\"\u003ewinbox.**bottom**\u003c/a\u003e\n- \u003ca href=\"#winbox.left\"\u003ewinbox.**left**\u003c/a\u003e\n- \u003ca href=\"#winbox.minwidth\"\u003ewinbox.**minwidth**\u003c/a\u003e\n- \u003ca href=\"#winbox.minheight\"\u003ewinbox.**minheight**\u003c/a\u003e\n- \u003ca href=\"#winbox.maxwidth\"\u003ewinbox.**maxwidth**\u003c/a\u003e\n- \u003ca href=\"#winbox.maxheight\"\u003ewinbox.**maxheight**\u003c/a\u003e\n\nInstance state boolean properties (readonly):\n\n- \u003ca href=\"#winbox.min\"\u003ewinbox.**min**\u003c/a\u003e\n- \u003ca href=\"#winbox.max\"\u003ewinbox.**max**\u003c/a\u003e\n- \u003ca href=\"#winbox.full\"\u003ewinbox.**full**\u003c/a\u003e\n- \u003ca href=\"#winbox.hidden\"\u003ewinbox.**hidden**\u003c/a\u003e\n- \u003ca href=\"#winbox.focused\"\u003ewinbox.**focused**\u003c/a\u003e\n\nCallback methods:\n\n- \u003ca href=\"#winbox.oncreate\"\u003ewinbox.**oncreate**\u003c/a\u003e\n- \u003ca href=\"#winbox.onshow\"\u003ewinbox.**onshow**\u003c/a\u003e\n- \u003ca href=\"#winbox.onhide\"\u003ewinbox.**onhide**\u003c/a\u003e\n- \u003ca href=\"#winbox.onclose\"\u003ewinbox.**onclose**\u003c/a\u003e\n- \u003ca href=\"#winbox.onfocus\"\u003ewinbox.**onfocus**\u003c/a\u003e\n- \u003ca href=\"#winbox.onblur\"\u003ewinbox.**onblur**\u003c/a\u003e\n- \u003ca href=\"#winbox.onmove\"\u003ewinbox.**onmove**\u003c/a\u003e\n- \u003ca href=\"#winbox.onresize\"\u003ewinbox.**onresize**\u003c/a\u003e\n- \u003ca href=\"#winbox.onfullscreen\"\u003ewinbox.**onfullscreen**\u003c/a\u003e\n- \u003ca href=\"#winbox.onmaximize\"\u003ewinbox.**onmaximize**\u003c/a\u003e\n- \u003ca href=\"#winbox.onminimize\"\u003ewinbox.**onminimize**\u003c/a\u003e\n- \u003ca href=\"#winbox.onrestore\"\u003ewinbox.**onrestore**\u003c/a\u003e\n\n\u003ca name=\"options\" id=\"options\"\u003e\u003c/a\u003e\n## Options\n\n\u003ctable\u003e\n    \u003ctr\u003e\u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003eOption\u003c/td\u003e\n        \u003ctd\u003eValues\u003c/td\u003e\n        \u003ctd\u003eDescription\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003eid\u003c/td\u003e\n        \u003ctd\u003enumber | string\u003c/td\u003e\n        \u003ctd\u003eSet a unique id to the window. Used to define custom styles in css, query elements by context or just to identify the corresponding window instance. If no ID was set it will automatically create one for you.\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003eindex\u003c/td\u003e\n        \u003ctd\u003enumber\u003c/td\u003e\n        \u003ctd\u003eSet the initial \u003ccode\u003ez-index\u003c/code\u003e of the window to this value (will be increased automatically when unfocused/focused).\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003etitle\u003c/td\u003e\n        \u003ctd\u003estring\u003c/td\u003e\n        \u003ctd\u003eThe window title.\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003emount\u003c/td\u003e\n        \u003ctd\u003eHTMLElement\u003c/td\u003e\n        \u003ctd\u003eMount an element (widget, template, etc.) to the window body.\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003ehtml\u003c/td\u003e\n        \u003ctd\u003estring\u003c/td\u003e\n        \u003ctd\u003eSet the \u003ccode\u003einnerHTML\u003c/code\u003e of the window body.\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003eurl\u003c/td\u003e\n        \u003ctd\u003estring\u003c/td\u003e\n        \u003ctd\u003eOpen URL inside the window (loaded via iframe).\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003ewidth\u003cbr\u003eheight\u003c/td\u003e\n        \u003ctd\u003enumber | string\u003c/td\u003e\n        \u003ctd\u003eSet the initial width/height of the window (supports units \"px\" and \"%\").\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003eminwidth\u003cbr\u003eminheight\u003c/td\u003e\n        \u003ctd\u003enumber | string\u003c/td\u003e\n        \u003ctd\u003eSet the minimal width/height of the window (supports units \"px\" and \"%\"). Should be at least the height of the window header title bar.\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003emaxwidth\u003cbr\u003emaxheight\u003c/td\u003e\n        \u003ctd\u003enumber | string\u003c/td\u003e\n        \u003ctd\u003eSet the maximum width/height of the window (supports units \"px\" and \"%\").\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003eautosize\u003c/td\u003e\n        \u003ctd\u003eboolean\u003c/td\u003e\n        \u003ctd\u003eAutomatically size the window to fit the window contents.\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003eoverflow\u003c/td\u003e\n        \u003ctd\u003eboolean\u003c/td\u003e\n        \u003ctd\u003eAllow the window to move outside the viewport.\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003ex\u003cbr\u003ey\u003c/td\u003e\n        \u003ctd\u003enumber | string\u003c/td\u003e\n        \u003ctd\u003eSet the initial position of the window (supports: \"right\" for x-axis, \"bottom\" for y-axis, \"center\" for both, units \"px\" and \"%\" for both).\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003emax\u003c/td\u003e\n        \u003ctd\u003eboolean\u003c/td\u003e\n        \u003ctd\u003eAutomatically toggles the window into maximized state when created.\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003emin\u003c/td\u003e\n        \u003ctd\u003eboolean\u003c/td\u003e\n        \u003ctd\u003eAutomatically toggles the window into minimized state when created.\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003ehidden\u003c/td\u003e\n        \u003ctd\u003eboolean\u003c/td\u003e\n        \u003ctd\u003eAutomatically toggles the window into hidden state when created.\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003emodal\u003c/td\u003e\n        \u003ctd\u003eboolean\u003c/td\u003e\n        \u003ctd\u003eShows the window as modal.\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003etop\u003cbr\u003eright\u003cbr\u003ebottom\u003cbr\u003eleft\u003c/td\u003e\n        \u003ctd\u003enumber | string\u003c/td\u003e\n        \u003ctd\u003eSet or limit the viewport of the window's available area (supports units \"px\" and \"%\"). Also used for custom splitscreen configurations.\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003ebackground\u003c/td\u003e\n        \u003ctd\u003estring\u003c/td\u003e\n        \u003ctd\u003eSet the background of the window (supports all CSS styles which are also supported by the style-attribute \"background\", e.g. colors, transparent colors, hsl, gradients, background images)\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003eborder\u003c/td\u003e\n        \u003ctd\u003enumber\u003c/td\u003e\n        \u003ctd\u003eSet the border width of the window (supports all the browsers css units).\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003eicon\u003c/td\u003e\n        \u003ctd\u003estring\u003c/td\u003e\n        \u003ctd\u003eMake the titlebar icon visible and set the image source to this url.\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003eclass\u003c/td\u003e\n        \u003ctd\u003estring\u003c/td\u003e\n        \u003ctd\u003eAdd one or more classnames to the window (multiple classnames as array or separated with whitespaces e.g. \"class-a class-b\"). Used to define custom styles in css, query elements by context (also within CSS) or just to tag the corresponding window instance.\u003cbr\u003e\u003cbr\u003eWinBox provides you some useful \u003ca href=\"#control-classes\"\u003eBuilt-in Control Classes\u003c/a\u003e to easily setup a custom configuration.\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003eoncreate\u003c/td\u003e\n        \u003ctd\u003efunction(options)\u003c/td\u003e\n        \u003ctd\u003eCallback triggered when the winbox element is being created. You can modify all these winbox options from this table passed as first parameter.\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003eonmove\u003c/td\u003e\n        \u003ctd\u003efunction(x, y)\u003c/td\u003e\n        \u003ctd\u003eCallback triggered when the window moves.\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003eonresize\u003c/td\u003e\n        \u003ctd\u003efunction(width,\u0026nbsp;height)\u003c/td\u003e\n        \u003ctd\u003eCallback triggered when the window resizes.\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003eonfullscreen\u003c/td\u003e\n        \u003ctd\u003efunction()\u003c/td\u003e\n        \u003ctd\u003eCallback triggered when the window enters fullscreen.\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003eonminimize\u003c/td\u003e\n        \u003ctd\u003efunction()\u003c/td\u003e\n        \u003ctd\u003eCallback triggered when the window enters minimized mode.\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003eonmaximize\u003c/td\u003e\n        \u003ctd\u003efunction()\u003c/td\u003e\n        \u003ctd\u003eCallback triggered when the window enters maximize mode.\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003eonrestore\u003c/td\u003e\n        \u003ctd\u003efunction()\u003c/td\u003e\n        \u003ctd\u003eCallback triggered when the window returns to a windowed state from a Fullscreen, Minimized or Maximized state.\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003eonhide\u003c/td\u003e\n        \u003ctd\u003efunction()\u003c/td\u003e\n        \u003ctd\u003eCallback triggered when the window is hidden with win.hide()\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003eonshow\u003c/td\u003e\n        \u003ctd\u003efunction()\u003c/td\u003e\n        \u003ctd\u003eCallback triggered when the window is shown with win.show()\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003eonclose\u003c/td\u003e\n        \u003ctd\u003efunction(force)\u003c/td\u003e\n        \u003ctd\u003eCallbacks triggered when the window is closing. The keyword \u003ccode\u003ethis\u003c/code\u003e inside the callback function refers to the corresponding WinBox instance. Note: the event 'onclose' will be triggered right before closing and stops closing when a callback was applied and returns a truthy value.\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003eonfocus\u003c/td\u003e\n        \u003ctd\u003efunction()\u003c/td\u003e\n        \u003ctd\u003eCallback triggered when a window goes into focused state.\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003eonblur\u003c/td\u003e\n        \u003ctd\u003efunction()\u003c/td\u003e\n        \u003ctd\u003eCallback triggered when a window lost the focused state.\u003c/td\u003e\n    \u003c/tr\u003e\n\u003c/table\u003e\n\n## Create and Setup Window\n\n\u003ca name=\"winbox.new\"\u003e\u003c/a\u003e\n#### Basic Window\n\n\u003e When no `root` was specified the window will append to the `document.body`.\n\n```js\nnew WinBox(\"Window Title\");\n```\n\nAlternatively:\n```js\nWinBox.new(\"Window Title\");\n```\n\nAlternatively:\n```js\nnew WinBox({ title: \"Window Title\" });\n```\n\nAlternatively:\n\u003ca name=\"winbox.setTitle\"\u003e\u003c/a\u003e\n```js\nvar winbox = WinBox();\nwinbox.setTitle(\"Window Title\");\n```\n\n#### Custom Root\n\n\u003e The root is the unique element in a document where the window will append to. In most cases that is usually the `document.body` which is the default root. Multiple roots at the same time are just partially supported (they share the same viewport actually).\n\n```js\nnew WinBox(\"Window Title\", {\n    root: document.body\n});\n```\n\n#### Custom Color\n\n\u003e Supports all CSS styles which are also supported by the style-attribute \"background\", e.g. colors, rgba, hsl, gradients, background images.\n\n```js\nnew WinBox(\"Custom Color\", {\n    background: \"#ff005d\"\n});\n```\n\nAlternatively:\n\u003ca name=\"winbox.setBackground\"\u003e\u003c/a\u003e\n```js\nvar winbox = new WinBox(\"Custom Color\");\nwinbox.setBackground(\"#ff005d\");\n```\n\n#### Custom Border\n\n\u003e Supports all units.\n\n```js\nnew WinBox({\n    title: \"Custom Border\",\n    border: \"1em\"\n});\n```\n\nYou can also define multiple border values (the order is: top, right, bottom, left):\n```js\nnew WinBox({\n    title: \"Custom Border\",\n    border: \"0 1em 15px 1em\"\n});\n```\n\n#### Custom Titlebar Icon\n\n\u003e Supports all datatypes which are also supported by the style-attribute \"background-image\", e.g. URL, base64 encoded data. The default icon size is 20 x 20 pixels.\n\n```js\nnew WinBox({\n    title: \"Custom Icon\",\n    icon: \"img/icon.svg\"\n});\n```\n\nAlternatively:\n\u003ca name=\"winbox.setIcon\"\u003e\u003c/a\u003e\n```js\nvar winbox = new WinBox(\"Custom Icon\");\nwinbox.setIcon(\"img/icon.svg\");\n```\n\nSee below in the style section to find out how to easily customize the titlebar icon style via css.\n\n####  Custom Viewport\n\n\u003e Define the available area (relative to the document) in which the window can move or could be resized (supports units \"px\" and \"%\").\n\n```js\nnew WinBox(\"Custom Viewport\", {\n    top: \"50px\",\n    right: \"5%\",\n    bottom: 50,\n    left: \"5%\"\n});\n```\n\nAlternatively (but just support numbers!):\n```js\nvar winbox = new WinBox(\"Custom Viewport\");\n\nwinbox.top = 50;\nwinbox.right = 200;\nwinbox.bottom = 0;\nwinbox.left = 200\n```\n\n\u003ca name=\"winbox.move\"\u003e\u003c/a\u003e\u003ca name=\"winbox.resize\"\u003e\u003c/a\u003e\n#### Custom Position / Size\n\n\u003e Supports keywords `\"right\"` for x-axis, `\"bottom\"` for y-axis, `\"center\"` for both, units `px` and `%` also for both.\n\n```js\nnew WinBox(\"Custom Viewport\", {\n    x: \"center\",\n    y: \"center\",\n    width: \"50%\",\n    height: \"50%\"\n});\n```\n\n```js\nnew WinBox(\"Custom Viewport\", {\n    x: \"right\",\n    y: \"bottom\",\n    width: \"200px\",\n    height: \"200px\"\n});\n```\n\nAlternatively (also supports same units and keywords as above):\n```js\nvar winbox = new WinBox(\"Custom Viewport\");\n\nwinbox.resize(\"50%\", \"50%\")\n      .move(\"center\", \"center\");\n```\n\nAlternatively (just support numeric values as `px` when directly assigned!):\n```js\nvar winbox = new WinBox(\"Custom Viewport\");\n\nwinbox.width = 200;\nwinbox.height = 200;\nwinbox.resize();\n\nwinbox.x = 100;\nwinbox.y = 100;\nwinbox.move();\n```\n\n\u003e In some cases you need to execute `.resize()` before `.move()` to properly apply relative positions which is taking the windows size into account.\n\n\u003ca name=\"winbox.overflow\"\u003e\u003c/a\u003e\n#### Overflow Window\n\nAllow the window to move outside the viewport borders on left, right and bottom (default is \"false\").\n\n```js\nnew WinBox({\n    title: \"Overflow Window\",\n    overflow: true\n});\n```\n\n\u003ca name=\"winbox.modal\"\u003e\u003c/a\u003e\n#### Modal Window\n\n```js\nnew WinBox({\n    title: \"Modal Window\",\n    modal: true\n});\n```\n\n\u003ca name=\"winbox.stack\"\u003e\u003c/a\u003e\n#### Window Stack\n\nThe window stack gets you an ordered list of every created window which wasn't already closed. The last focused windows is placed as last entry in the Array.\n\n```js\nconst a = new WinBox(\"A\"); // window A gets focused\nconst b = new WinBox(\"B\"); // window B gets focused\nconst c = new WinBox(\"C\"); // window C gets focused\na.focus(); // window A gets focused\n\n// get window stack ordered by focus history\nconst stack = WinBox.stack(); // [B, C, A]\n```\n\n\u003ca name=\"themes\"\u003e\u003c/a\u003e\n#### Themes\n\n\u003e Feel free to create your own themes and share them with us.\n\nYou will find all themes \u003ca href=\"https://github.com/nextapps-de/winbox/tree/master/dist/css/themes\"\u003ehere\u003c/a\u003e.\n\nLoad the corresponding css files (or use a bundler), e.g.:\n\n```html\n\u003chead\u003e\n    \u003clink rel=\"stylesheet\" href=\"dist/css/winbox.min.css\"\u003e\n    \u003clink rel=\"stylesheet\" href=\"dist/css/themes/modern.min.css\"\u003e\n    \u003cscript src=\"dist/js/winbox.min.js\"\u003e\u003c/script\u003e\n\u003c/head\u003e\n```\n\nJust add the name of the theme via `class`:\n\n```js\nvar winbox = new WinBox({\n    title: \"Theme: Modern\",\n    class: \"modern\"\n});\n```\n\nAlternatively:\n\n```js\nvar winbox = new WinBox(\"Theme: Modern\");\nwinbox.addClass(\"modern\");\n```\n\nYou can change themes during the lifetime of the window.\n\n## Manage Window Content\n\n#### Set innerHTML\n\n\u003e Do not forget to sanitize any user inputs which is part of the __html__ as this can lead to unintended XSS!\n\n```js\nnew WinBox(\"Set innerHTML\", {\n    html: \"\u003ch1\u003eLorem Ipsum\u003c/h1\u003e\"\n});\n```\n\nAlternatively:\n```js\nvar winbox = new WinBox(\"Set innerHTML\");\nwinbox.body.innerHTML = \"\u003ch1\u003eLorem Ipsum\u003c/h1\u003e\";\n```\n\n\u003ca name=\"winbox.mount\"\u003e\u003c/a\u003e\n#### Mount DOM (Cloned)\n\n\u003e When cloning you can easily create multiple window instances of the same content in parallel.\n\n```html\n\u003cdiv id=\"content\"\u003e\n    \u003ch1\u003eLorem Ipsum\u003c/h1\u003e\n    \u003cp\u003eLorem ipsum [...]\u003c/p\u003e\n\u003c/div\u003e\n```\n\n```js\nvar node = document.getElementById(\"content\");\n\nnew WinBox(\"Mount DOM\", {\n    mount: node.cloneNode(true)\n});\n```\n\nAlternatively:\n```js\nvar node = document.getElementById(\"content\");\nvar winbox = new WinBox(\"Mount DOM\");\n\nwinbox.mount(node.cloneNode(true));\n```\n\n#### Mount DOM (Singleton) + Auto-Unmount\n\n\u003e A singleton is a unique fragment which can move inside the document. When creating multiple windows and mounting the same fragment to it, the fragment will leave the old window (see the method above for cloning).\n\n\u003e This workaround is also compatible if you are using server-side rendering.\n\nYou can simply use a hidden backstore to hold contents, as well you can use any other strategy like a templating engine etc.\n\n```html\n\u003cdiv id=\"backstore\" style=\"display: none\"\u003e\n    \u003cdiv id=\"content\"\u003e\n        \u003ch1\u003eLorem Ipsum\u003c/h1\u003e\n        \u003cp\u003eLorem ipsum [...]\u003c/p\u003e\n    \u003c/div\u003e\n\u003c/div\u003e\n```\n\n```js\nvar node = document.getElementById(\"content\");\n\nnew WinBox(\"Mount DOM\", {\n    mount: node\n});\n```\n\n\u003e Auto-Unmount is a helpful feature which automatically moves back the fragment to the backstore source when closing the window.\n\nAlternatively:\n```js\nvar node = document.getElementById(\"content\");\nvar winbox = new WinBox(\"Mount DOM\");\n\nwinbox.mount(node);\n```\n\n\u003ca name=\"winbox.unmount\"\u003e\u003c/a\u003e\n#### Explicit Unmount\n\n```html\n\u003cdiv id=\"backstore\" style=\"display: none\"\u003e\n    \u003cdiv id=\"content\"\u003e\n        \u003ch1\u003eLorem Ipsum\u003c/h1\u003e\n        \u003cp\u003eLorem ipsum [...]\u003c/p\u003e\n    \u003c/div\u003e\n\u003c/div\u003e\n\u003cdiv id=\"backstore-2\" style=\"display: none\"\u003e\u003c/div\u003e\n```\n\n```js\nvar node = document.getElementById(\"content\");\nvar winbox = new WinBox(\"Mount DOM\");\n```\n\nMove fragment from hidden backstore to the window body:\n\n```js\nwinbox.mount(node);\n```\n\nMove fragment back to the hidden backstore source:\n\n```js\nwinbox.unmount();\n```\n\nOr move fragment to another destination:\n\n```js\nwinbox.unmount(document.getElementById(\"backstore-2\"));\n```\n\nOr just auto-unmount as default when closing:\n\n```js\nwinbox.close();\n```\n\nOverride default auto-unmount behavior when closing the window:\n\n```js\nnew WinBox(\"Mount DOM\", {\n    mount: node,\n    onclose: function(){\n        this.unmount(document.getElementById(\"backstore-2\"));\n    }\n});\n```\n\n#### Manual Mount Contents\n\nFeel free to use the `winbox.body` directly:\n```js\nvar node = document.getElementById(\"content\");\nvar winbox = new WinBox(\"Mount DOM\");\n\nwinbox.body.appendChild(node);\n```\n\nOr delegate it as a root to your templating engine, e.g.:\n```js\nMikado(template).mount(winbox.body).render(data);\n```\n\n#### Open URI / URL\n\n\u003e Do not forget to sanitize any user inputs when it is part of the __url__ as this can lead to unintended XSS!\n\nThe onload callback is optionally.\n```js\nnew WinBox(\"Open URL\", {\n    url: \"https://wikipedia.com\",\n    onload: function(){ /* extern page loaded */}\n});\n```\n\n\u003e You can use every URI scheme which is supported by `src` attribute, e.g. URL, image or video, base64 encoded data.\n\nAlternatively:\n\u003ca name=\"winbox.setUrl\"\u003e\u003c/a\u003e\n```js\nvar winbox = new WinBox(\"Open URL\");\nwinbox.setUrl(\"https://wikipedia.com\", function(){ \n    /* extern page loaded */\n});\n```\n\n## The WinBox Window Instance\n\n\u003ca name=\"winbox.id\"\u003e\u003c/a\u003e\u003ca name=\"winbox.max\"\u003e\u003c/a\u003e\u003ca name=\"winbox.min\"\u003e\u003c/a\u003e\u003ca name=\"winbox.full\"\u003e\u003c/a\u003e\u003ca name=\"winbox.hidden\"\u003e\u003c/a\u003e\u003ca name=\"winbox.focused\"\u003e\u003c/a\u003e\nWindow States / Information:\n```js\nvar winbox = new WinBox();\n\nconsole.log(\"Window ID:\", winbox.id);\nconsole.log(\"Window Index:\", winbox.index);\nconsole.log(\"Current Maximize State:\", winbox.max);\nconsole.log(\"Current Minimize State:\", winbox.min);\nconsole.log(\"Current Fullscreen State:\", winbox.full);\nconsole.log(\"Current Hidden State:\", winbox.hidden);\nconsole.log(\"Current Focused State:\", winbox.focused);\n```\n\n\u003ca name=\"winbox.width\"\u003e\u003c/a\u003e\u003ca name=\"winbox.height\"\u003e\u003c/a\u003e\u003ca name=\"winbox.resize\"\u003e\u003c/a\u003e\nWindow Size:\n```js\nvar winbox = new WinBox();\n\nwinbox.width = 200;\nwinbox.height = 200;\nwinbox.resize();\n\nconsole.log(\"Current Width:\", winbox.width);\nconsole.log(\"Current Height:\", winbox.height);\n```\n\n\u003ca name=\"winbox.x\"\u003e\u003c/a\u003e\u003ca name=\"winbox.y\"\u003e\u003c/a\u003e\u003ca name=\"winbox.move\"\u003e\u003c/a\u003e\nWindow Position:\n```js\nvar winbox = new WinBox();\n\nwinbox.x = 100;\nwinbox.y = 100;\nwinbox.move();\n\nconsole.log(\"Current Position X:\", winbox.x);\nconsole.log(\"Current Position Y:\", winbox.y);\n```\n\n\u003ca name=\"winbox.top\"\u003e\u003c/a\u003e\u003ca name=\"winbox.right\"\u003e\u003c/a\u003e\u003ca name=\"winbox.bottom\"\u003e\u003c/a\u003e\u003ca name=\"winbox.left\"\u003e\u003c/a\u003e\nWindow Viewport:\n```js\nvar winbox = new WinBox();\n\nwinbox.top = 50;\nwinbox.right = 50;\nwinbox.bottom = 50;\nwinbox.left = 50;\n\n// update window if needed:\nwinbox.resize().move();\n\nconsole.log(\"Current Viewport Top:\", winbox.top);\nconsole.log(\"Current Viewport Right:\", winbox.right);\nconsole.log(\"Current Viewport Bottom:\", winbox.bottom);\nconsole.log(\"Current Viewport Left:\", winbox.left);\n```\n\n\u003ca name=\"winbox.body\"\u003e\u003c/a\u003e\nThe window body acts like the `document.body` and has a scroll pane:\n```js\nvar winbox = new WinBox();\nwinbox.body.innerHTML = \"\u003ch1\u003eLorem Ipsum\u003c/h1\u003e\";\n```\n\n\u003ca name=\"winbox.window\"\u003e\u003c/a\u003e\nGet the DOM element from the window outer frame:\n```js\nvar winbox = new WinBox();\nvar root = winbox.window;\n```\n\nYou also can get the window element by DOM id:\n```js\nvar winbox = new WinBox();\nvar root = document.getElementById(winbox.id);\n```\n\n\u003e The window element points to the window most outer root element which also holds the window control and state classes:\n\nYou can access and modify the window DOM element directly:\n\n```js\nconst root = winbox.window;\nconst hidden = root.classList.contains(\"hide\");\nconst focused = root.classList.contains(\"focus\");\nroot.classList.remove(\"modal\");\nroot.classList.add(\"my-theme\");\nroot.classList.toggle(\"my-toggle\");\n```\n\nOr as an equivalent to the example above by using the WinBox built-in methods respectively:\n\n```js\nconst hidden = winbox.hasClass(\"hide\");\nconst focused = winbox.hasClass(\"focus\");\nwinbox.removeClass(\"modal\");\nwinbox.addClass(\"my-theme\");\nwinbox.toggleClass(\"my-toggle\");\n```\n\nYou can grab the `winbox` instance from the window outer frame DOM element:\n```js\nvar winbox = new WinBox();\n// assume you have a DOM reference to the winbox window:\nvar window_element = document.getElementById(winbox.id);\n// grab corresponding instance from window element:\nwinbox = window_element.winbox;\n```\n\n#### Controls\n\n```js\nvar winbox = new WinBox();\n```\n\n\u003ca name=\"winbox.focus\"\u003e\u003c/a\u003e\nFocus a window (bring up to front):\n```js\nwinbox.focus();\nwinbox.focus(true);\nwinbox.blur(false);\n```\n\n\u003ca name=\"winbox.blur\"\u003e\u003c/a\u003e\nBlur a focused window:\n```js\nwinbox.blur();\nwinbox.blur(true);\nwinbox.focus(false);\n```\n\n\u003ca name=\"winbox.minimize\"\u003e\u003c/a\u003e\nSet the minimized state of a window:\n```js\nwinbox.minimize();\nwinbox.minimize(true);\nwinbox.minimize(false);\n```\n\n\u003ca name=\"winbox.maximize\"\u003e\u003c/a\u003e\nSet the maximized state of a window:\n```js\nwinbox.maximize();\nwinbox.maximize(true);\nwinbox.maximize(false);\n```\n\n\u003ca name=\"winbox.fullscreen\"\u003e\u003c/a\u003e\nSet the fullscreen state of a window:\n```js\nwinbox.fullscreen();\nwinbox.fullscreen(true);\nwinbox.fullscreen(false);\n```\n\n\u003ca name=\"winbox.restore\"\u003e\u003c/a\u003e\nRestore the state of a window:\n```js\nwinbox.restore();\n```\n\n\u003ca name=\"winbox.hide\"\u003e\u003c/a\u003e\nHide a specific window:\n```js\nwinbox.hide();\nwinbox.hide(true);\nwinbox.show(false);\n```\n\n\u003ca name=\"winbox.show\"\u003e\u003c/a\u003e\nShow a specific hidden window:\n```js\nwinbox.show();\nwinbox.show(true);\nwinbox.hide(false);\n```\n\n\u003ca name=\"winbox.close\"\u003e\u003c/a\u003e\nClose and destroy a window:\n```js\nwinbox.close();\n```\n\n\u003ca name=\"winbox.close\"\u003e\u003c/a\u003e\nClose and destroy a window depending on custom conditional (e.g. by a confirmation status):\n```js\nwinbox.close(false || true);\n```\n\n#### Chaining Methods\n\n```js\nvar winbox = WinBox();\n\nwinbox.setTitle(\"Title\")\n      .setBackground(\"#fff\")\n      .resize(\"50%\", \"50%\")\n      .move(\"center\", \"center\")\n      .mount(document.getElementById(\"content\"));\n```\n\n\u003e When using \"center\" as position you need to call `.resize()` before `.move()`.\n\n#### Callbacks\n\nYou can assign callbacks via the option payload when creating a window.\n\n\u003e The keyword `this` in your callback function refers to the corresponding WinBox Instance.\n\n```js\nvar winbox = WinBox({\n    oncreate: function(options){\n        options.autosize = true;\n    },\n    onfocus: function(){\n        this.setBackground(\"#fff\");\n    },\n    onblur: function(){\n        this.setBackground(\"#999\");\n    },\n    onresize: function(width, height){\n        console.log(\"width:\", width, \"height:\", height);\n    },\n    onfullscreen: function(){\n        this.setBackground(\"#666\");\n    },\n    onminimize: function(){\n        this.setBackground(\"#999\");\n    },\n    onmaximize: function(){\n        this.setBackground(\"#AAA\");\n    },\n    onrestore: function(){\n        this.setBackground(\"#DDD\");\n    },    \n    onmove: function(x, y){\n        console.log(\"x:\", x, \"y:\", y);\n    },\n    onclose: function(force){\n        // return \"true\" to skip the closing\n        // return \"false\" to allow closing\n        // use delegated force parameter optionally\n        return !confirm(\"Close window?\");\n    }\n});\n```\n\n#### The \"onclose\" callback\n\n\u003e The event `onclose` will be triggered right before closing and __stops__ closing when a callback was applied and returns a __truthy value__.\n\nWithin your callback function just return `true` to stops the closing or return `false` to perform closing as default.\n```js\nnew WinBox({ \n    onclose: function(){\n        // return \"true\" to skip the closing\n        // return \"false\" to allow closing\n        if(do_some_checks()){\n            return true;\n        }\n    } \n});\n```\n\nThe `force` parameter from the `winbox.close(boolean)` will be delegated to your callback function as the first parameter. You need to handle the \"force\" state in your callback function.\n\n```js\nvar winbox = WinBox({ \n    onclose: function onclose(force){\n        // use delegated force parameter optionally\n        return !force \u0026\u0026 !confirm(\"Close window?\");\n    } \n});\n```\n\nClose the window and execute callback as default (will show the prompt from example above):\n```js\nwinbox.close();\n```\n\nForce closing the window (does not show the prompt from example above):\n```js\nwinbox.close(true);\n```\n\n\u003ca name=\"control-classes\" id=\"control-classes\"\u003e\u003c/a\u003e\n#### Use Control Classes\n\nWinBox provides you some built-in control classes you can pass when creating a window instance. \n\n\u003e All control classes from this list could be added or removed during lifetime of the window (after creation). State classes like `max`, `min`, `full`, `hidden` and `focus` could not be changed manually! For this purpose use the WinBox member methods accordingly e.g. `maximize()`, `minimize()`, `hide()`.\n\n\u003ctable\u003e\n    \u003ctr\u003e\u003c/tr\u003e\n    \u003ctr\u003e\n        \u003cth\u003eClassname\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u003c/th\u003e\n        \u003cth align=\"left\"\u003eDescription\u003c/th\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003eno-animation\u003c/td\u003e\n        \u003ctd\u003eDisables the windows transition animation\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003eno-shadow\u003c/td\u003e\n        \u003ctd\u003eDisables the windows drop shadow\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003eno-header\u003c/td\u003e\n        \u003ctd\u003eHide the window header incl. title and toolbar\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003eno-min\u003c/td\u003e\n        \u003ctd\u003eHide the minimize icon\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003eno-max\u003c/td\u003e\n        \u003ctd\u003eHide the maximize icon\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003eno-full\u003c/td\u003e\n        \u003ctd\u003eHide the fullscreen icon\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003eno-close\u003c/td\u003e\n        \u003ctd\u003eHide the close icon\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003eno-resize\u003c/td\u003e\n        \u003ctd\u003eDisables the window resizing capability\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003eno-move\u003c/td\u003e\n        \u003ctd\u003eDisables the window moving capability\u003c/td\u003e\n    \u003c/tr\u003e\n\u003c/table\u003e\n\n\u003e Without the header the user isn't able to move the window frame. It may be useful for creating fixed popups.\n\nPass in classnames when creating the window to apply behaviour:\n```js\nconst winbox = WinBox({\n    class: [ \"no-min\", \"no-max\", \"no-full\", \"no-resize\", \"no-move\" ]\n});\n```\n\n\u003e The example above is a good start to create classical popups.\n\nAlternatively you can use a whitespace separated string:\n```js\nconst winbox = WinBox({\n    class: \"no-min no-max no-full no-resize no-move\"\n});\n```\n\n\u003ca name=\"winbox.addClass\"\u003e\u003c/a\u003e\u003ca name=\"winbox.removeClass\"\u003e\u003c/a\u003e\nYou can add or remove all control classes from above along the window's lifetime:\n\n```js\nconst winbox = WinBox();\n\nwinbox.addClass(\"no-resize\")\n      .addClass(\"no-move\");\n```\n```js\nwinbox.removeClass(\"no-resize\")\n      .removeClass(\"no-move\");\n```\n```js\nwinbox.toggleClass(\"no-resize\")\n      .toggleClass(\"no-move\");\n```\n```js\nconst state = winbox.hasClass(\"no-resize\") \u0026\u0026\n              winbox.hasClass(\"no-move\");\n```\n\n## Custom Splitscreen\n\nUse the viewport limit to define your own splitscreen areas, e.g. for a simple vertical split:\n\n```js\nnew WinBox(\"Split Left\", {\n    right: \"50%\"\n});\n\nnew WinBox(\"Split Right\", {\n    left: \"50%\"\n});\n```\n\nSame way you can also define custom sizes and positions for each split as well as complex grids, e.g.:\n\n```js\nnew WinBox(\"Split Top-Left\", { right: \"66%\", bottom: \"50%\", max: true });\nnew WinBox(\"Split Bottom-Left\", { right: \"66%\", top: \"50%\", max: true });\n\nnew WinBox(\"Split Middle\", { left: \"34%\", right: \"34%\", max: true });\n\nnew WinBox(\"Split Top-Right\", { left: \"66%\", bottom: \"50%\", max: true });\nnew WinBox(\"Split Bottom-Right\", { left: \"66%\", top: \"50%\", max: true });\n```\n\nThe splitscreen from above will look like this grid:\n\n```\n---------------------------------------------\n|             |              |              |\n|             |              |              |\n|  Top Left   |              |  Top Right   |\n|             |              |              |\n|             |              |              |\n---------------    Middle    ----------------\n|             |              |              |\n|             |              |              |\n| Bottom Left |              | Bottom Right |\n|             |              |              |\n|             |              |              |\n---------------------------------------------\n```\n\nYou can set the values for the viewport dynamically, doing this makes it possible to size the grid dynamically and also change the grid schema.\n\n\u003ca name=\"winbox.addControl\"\u003e\u003c/a\u003e\n## Custom Controls\n\nThis example will add a custom control button `.wb-like` to the window heading toolbar along some CSS for icon styling:\n```css\n.wb-like {\n    background-size: 20px auto;\n}\n.wb-like.active {\n    background-image: url(demo/heart-filled.svg) !important;\n}\n```\n\nAttach a control to the window toolbar:\n```js\nwinbox.addControl({\n    // the position index\n    index: 1,\n    // classname to apply styling\n    class: \"wb-like\",\n    // icon url when not specified via classname\n    image: \"demo/heart.svg\",\n    // click listener\n    click: function(event, winbox){\n        // the winbox instance will be passed as 2nd parameter\n        console.log(winbox.id);\n        // \"this\" refers to the button which was clicked:\n        this.classList.toggle(\"active\");\n    }\n});\n```\n\n\u003ca name=\"winbox.removeControl\"\u003e\u003c/a\u003e\nRemove a control from the window toolbar:\n```js\nwinbox.removeControl(\"wb-like\")\n      .removeControl(\"wb-min\");\n```\n\n\u003ca name=\"template\"\u003e\u003c/a\u003e\n## Custom Template (Layout)\n\nYou can fully customize the WinBox window layout by providing a custom `template` via the config during creation. This way you can add new elements to the window or re-arrange them.\n\nThis example will add a control button `.wb-custom` to the window toolbar by using a custom template along some CSS:\n```css\n.wb-custom {\n    background-image: url(demo/icon-github.svg);\n    background-size: 17px auto;\n}\n```\n\nCreate by using a custom template:\n```js\nconst template = document.createElement(\"div\");\ntemplate.innerHTML = `\n    \u003cdiv class=wb-header\u003e\n        \u003cdiv class=wb-control\u003e\n            \u003cspan class=wb-custom\u003e\u003c/span\u003e\n            \u003cspan class=wb-close\u003e\u003c/span\u003e\n        \u003c/div\u003e\n        \u003cdiv class=wb-drag\u003e\u003c/div\u003e\n    \u003c/div\u003e\n    \u003cdiv class=wb-body\u003e\u003c/div\u003e\n`;\n\nnew WinBox(\"Custom Template\", { template });\n```\n\n\u003e The `.wb-drag` element needs to be existing when the user should be able to move the window by dragging the heading toolbar.\n\n\u003ca name=\"customize\"\u003e\u003c/a\u003e\n## Customize Window\n\n\u003e Additionally, take a look into the \u003ca href=\"https://github.com/nextapps-de/winbox/tree/master/src/css/themes\"\u003ethemes folder\u003c/a\u003e to get some ideas how to customize the window.\n\nThe window boilerplate:\n\n\u003cimg src=\"https://cdn.jsdelivr.net/gh/nextapps-de/winbox@master/demo/boilerplate.svg?v=4\" width=\"100%\" alt=\"WinBox Boilerplate\"\u003e\n\nHide or disable specific icons:\n```css\n.wb-min   { display: none }\n.wb-full  { display: none }\n.wb-max   { display: none }\n.wb-close { display: none }\n```\n\nModify a specific icon:\n```css\n.wb-max {\n    background-image: url(src/img/max.png);\n    background-position: center;\n    background-size: 15px auto;\n}\n```\n\nUse black standard icons (useful for bright backgrounds):\n```css\n.wb-control { filter: invert(1) }\n```\n\nModify or disable resizing areas on the window borders:\n```css\n/* north */\n.wb-n  { display: none }\n\n/* east */\n.wb-e  { display: none }\n\n/* south */\n.wb-s  { display: none }\n\n/* west */\n.wb-w  { display: none }\n\n/* north-west */\n.wb-nw { display: none }\n\n/* north-east */\n.wb-ne { display: none }\n\n/* south-west */\n.wb-sw { display: none }\n\n/* south-east */\n.wb-se { display: none }\n```\n\nModify or disable the window drop shadow:\n```css\n.winbox { box-shadow: none }\n```\n\nStyle the header title:\n```css\n.wb-title { font-size: 12px }\n```\n\nStyle the titlebar icon:\n```css\n.wb-icon {\n    width: 35px;\n    background-size: 35px 35px;\n}\n```\n\nStyle the window background (frame):\n```css\n.winbox {\n    background: linear-gradient(90deg, #ff00f0, #0050ff);\n    border-radius: 12px 12px 0 0;\n}\n```\n\nStyle the body of a window element and set the frame border:\n```css\n.wb-body {\n    /* the width of window frame border: */\n    margin: 4px;\n    color: #fff;\n    background: #131820;\n}\n```\n\n\u003e The margin of `.wb-body` corresponds to the width of the window border.\n\nApply styles when window is in \"minimized\" state:\n```css\n.winbox {\n    border-radius: 10px;\n}\n.winbox.min {\n    border-radius: 0;\n}\n.winbox.min .windbox-title {\n    font-size: 12px;\n}\n```\n\nApply styles when window is NOT in \"minimized\" state:\n```css\n.winbox:not(.min) {\n    /* apply styles */\n}\n```\n\nApply styles when window is in \"maximized\" state:\n```css\n.winbox {\n    border-radius: 10px;\n}\n.winbox.max {\n    border-radius: 0;\n}\n.winbox.max .wb-max {\n    opacity: 0.5;\n}\n```\n\nApply styles when window is NOT in \"maximized\" state:\n```css\n.winbox:not(.max) {\n    /* apply styles */\n}\n```\n\nApply styles when window is in \"fullscreen\" state:\n```css\n.wb-body:fullscreen {\n    /* apply styles */\n}\n```\n\nApply styles when window is in \"focus\" state:\n```css\n.winbox {\n    background: #999;\n}\n.winbox.focus {\n    background: #0050ff; \n}\n.winbox .wb-control {\n    display: none;\n}\n.winbox.focus .wb-control {\n    display: block;\n}\n```\n\nApply styles when window is NOT in \"focus\" state (the same logic from example above, but shorter):\n```css\n.winbox:not(.focus) {\n    background: #999;\n}\n.winbox:not(.focus) .wb-control {\n    display: none;\n}\n```\n\nApply styles when window is in \"modal\" state:\n```css\n.winbox.modal .wb-close { display: none }\n```\n\nCustomize the modal background overlay:\n```css\n.winbox.modal:after {\n    background: #0d1117;\n    opacity: 0.5;\n    animation: none;\n}\n```\n\n#### Style Scrollbars\n\n```css\n.wb-body::-webkit-scrollbar {\n    width: 12px;\n}\n.wb-body::-webkit-scrollbar-track {\n    background: transparent;\n}\n.wb-body::-webkit-scrollbar-thumb {\n    border-radius: 10px;\n    background: #263040;\n}\n.wb-body::-webkit-scrollbar-thumb:window-inactive {\n    background: #181f2a;\n}\n.wb-body::-webkit-scrollbar-corner {\n    background: transparent;\n}\n```\n\n## Useful Hints\n\nOften you need to hide specific content parts when it was mounted to a window or hiding when NOT inside a window:\n\nNow you can add the two classes `\"wb-hide\"` and `\"wb-show\"` to any element to control visibility between the two states \"inside\" and \"outside\" a window:\n\n```html\n\u003cbody\u003e\n    \u003cmain id=\"content\"\u003e\n        \u003cheader class=\"wb-hide\"\u003eHide this header when in windowed mode\u003c/header\u003e\n        \u003csection\u003e\n            \u003c!-- page contents --\u003e\n        \u003c/section\u003e\n        \u003cfooter class=\"wb-show\"\u003eHide this footer when NOT in windowed mode\u003c/footer\u003e\n    \u003c/main\u003e\n\u003c/body\u003e\n```\n\nThe `display` property when using `\"wb-show\"` might not fit your needs. Please change this css class definition to your desired display-state accordingly.\n\n```js\nnew WinBox({\n    mount: document.getElementById(\"content\")\n});\n```\n\n#### Best Practices\n\n- Use a non-scrolling body element to get the best user experience on mobile devices.\n- Or provide an alternative view strategy for mobile devices, e.g. when the device is a touch device then open a classical app view. If a mouse pointer is available, then mount this view to the WinBox window. Also, you can place a switch button in your application where the user can also toggle between these two modes.\n\n## WinBox on Angular application\n\nStep 1: Install WinBox library\n\n```\nnpm i winbox\n```\n\nStep 2: Install WinBox types\n\n```\nnpm i @types/winbox --save-dev\n```\n\nStep 3: Import WinBox in a component\n\n```ts\nimport { Component } from '@angular/core';\nimport 'winbox';\ndeclare const WinBox: WinBox.WinBoxConstructor;\n\n@Component({\n  selector: 'my-app',\n  template: '\u003cbutton (click)=\"openWindow()\"\u003eOpen Window\u003c/button\u003e'\n})\nexport class AppComponent {\n  openWindow() {\n    WinBox.new();\n  }\n}\n```\n\n## WinBox on Vue application\n\nhttps://github.com/wobsoriano/vue-winbox\n\nIt uses the native [teleport](https://v3.vuejs.org/api/built-in-components.html#teleport) component in Vue 3 and recommends https://github.com/LinusBorg/vue-simple-portal for Vue 2 users.\n\n\n## WinBox on React application\n\nhttps://github.com/rickonono3/react-winbox\n\nA React controlled component for WinBox.js, with full Reactful props and state. Includes all configurations of WinBox.js by using React component props.\n\n## Custom Builds\n\nGo to the root directory of WinBox and run:\n```cmd\nnpm install\n```\n\nPerform a build:\n```cmd\nnpm run build\n```\n\nThe final build is located in the `dist/` folder.\n\n---\n\nCopyright 2021-2023 Thomas Wilkerling, Hosted by Nextapps GmbH\u003cbr\u003e\nReleased under the \u003ca href=\"http://www.apache.org/licenses/LICENSE-2.0.html\" target=\"_blank\"\u003eApache 2.0 License\u003c/a\u003e\u003cbr\u003e\n","funding_links":["https://github.com/sponsors/ts-thomas","https://opencollective.com/winboxjs","https://liberapay.com/ts-thomas","https://patreon.com/user?u=96245532","https://www.paypal.com/donate/?hosted_button_id=GEVR88FC9BWRW","https://salt.bountysource.com/teams/ts-thomas","https://opencollective.com/winboxjs/donate","https://github.com/sponsors/ts-thomas/","https://liberapay.com/ts-thomas/donate","https://www.patreon.com/user?u=96245532"],"categories":["JavaScript","Uncategorized","windows"],"sub_categories":["Uncategorized"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnextapps-de%2Fwinbox","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnextapps-de%2Fwinbox","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnextapps-de%2Fwinbox/lists"}