{"_id":"@cw-mnodson/ninja-splitter","_rev":"3-faedc8d63b8dfffd6d2eb9886389638f","name":"@cw-mnodson/ninja-splitter","description":"Convenient and easy to use splitter component for Angular 16","dist-tags":{"latest":"16.0.4"},"versions":{"16.0.0":{"name":"@cw-mnodson/ninja-splitter","version":"16.0.0","keywords":["Angular","Splitter","Split","Split pane","Split view","Split frame"],"author":{"name":"Igor Serganov","email":"caesarandroidru@gmail.com"},"license":"MIT","_id":"@cw-mnodson/ninja-splitter@16.0.0","homepage":"https://github.com/iSerganov/ninja-splitter/#readme","bugs":{"url":"https://github.com/iSerganov/ninja-splitter/issues"},"dist":{"shasum":"dddf2a9eb199718119a6924226fb5878d9798c30","tarball":"https://registry.npmjs.org/@cw-mnodson/ninja-splitter/-/ninja-splitter-16.0.0.tgz","fileCount":21,"integrity":"sha512-y5i6omr614D9HXVjNV/V5T+hjGhdOAbrgNu0Q7sRl0nteItZejvK98nlogAk3F0x7lprsWXxlP0sVMlQi+vRRQ==","signatures":[{"sig":"MEUCIQC8USinN/FI7016WsiE/aoGTV/3LJqck9dw1c43sSPvPgIgOABVEIlVH6j12fd82ElKkbTq/z64ULeL2oShSG3ChQA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":126764},"module":"fesm2022/cw-mnodson-ninja-splitter.mjs","exports":{".":{"esm":"./esm2022/cw-mnodson-ninja-splitter.mjs","types":"./index.d.ts","default":"./fesm2022/cw-mnodson-ninja-splitter.mjs","esm2022":"./esm2022/cw-mnodson-ninja-splitter.mjs"},"./package.json":{"default":"./package.json"}},"gitHead":"2b7be1081fa7150e922bc1edea17b2cb666866f3","typings":"index.d.ts","_npmUser":{"name":"cw-mnodson","email":"m.nodson@craneware.com"},"repository":{"url":"git+https://github.com/iSerganov/ninja-splitter.git","type":"git"},"_npmVersion":"9.5.0","description":"Convenient and easy to use splitter component for Angular 16","directories":{},"sideEffects":false,"_nodeVersion":"18.15.0","dependencies":{"tslib":"^2.3.0"},"_hasShrinkwrap":false,"peerDependencies":{"zone.js":"^0.11.4","typescript":"^4.1.5","@types/node":"^14.14.16","@angular/core":"^16.2.14","@angular/forms":"^16.2.14","@angular/common":"^16.2.14","@angular/compiler":"^16.2.14","@angular/animations":"^16.2.14","@angular/compiler-cli":"^16.2.14","@angular/platform-server":"^16.2.14","@angular/platform-browser":"^16.2.14","@angular/platform-browser-dynamic":"^16.2.14"},"_npmOperationalInternal":{"tmp":"tmp/ninja-splitter_16.0.0_1718958887592_0.1106696378321137","host":"s3://npm-registry-packages"}},"16.0.2":{"name":"@cw-mnodson/ninja-splitter","version":"16.0.2","keywords":["Angular","Splitter","Split","Split pane","Split view","Split frame"],"author":{"name":"Igor Serganov","email":"caesarandroidru@gmail.com"},"license":"MIT","_id":"@cw-mnodson/ninja-splitter@16.0.2","homepage":"https://github.com/iSerganov/ninja-splitter/#readme","bugs":{"url":"https://github.com/iSerganov/ninja-splitter/issues"},"dist":{"shasum":"67afd3f2c3333118ce448fd96944858e3e6c14d5","tarball":"https://registry.npmjs.org/@cw-mnodson/ninja-splitter/-/ninja-splitter-16.0.2.tgz","fileCount":21,"integrity":"sha512-pSlc7i8C3exJIGLhD8HGSzDjFGskS3OTPxDbyEpiTqp93OLR/asztowgqCBL38lvND7wqEbXRep3AnDGxTY2QQ==","signatures":[{"sig":"MEUCIQCh0eBa71iUYD4epn1P86vV+KIHk8rmfmLqPA5aMZPrXAIgCU7mQtGRipCU8YaeKIiyobkhiYtiHd7+KNsFi3Bu5bg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":126764},"module":"fesm2022/cw-mnodson-ninja-splitter.mjs","exports":{".":{"esm":"./esm2022/cw-mnodson-ninja-splitter.mjs","types":"./index.d.ts","default":"./fesm2022/cw-mnodson-ninja-splitter.mjs","esm2022":"./esm2022/cw-mnodson-ninja-splitter.mjs"},"./package.json":{"default":"./package.json"}},"gitHead":"2b7be1081fa7150e922bc1edea17b2cb666866f3","typings":"index.d.ts","_npmUser":{"name":"cw-mnodson","email":"m.nodson@craneware.com"},"repository":{"url":"git+https://github.com/iSerganov/ninja-splitter.git","type":"git"},"_npmVersion":"9.5.0","description":"Convenient and easy to use splitter component for Angular 16","directories":{},"sideEffects":false,"_nodeVersion":"18.15.0","dependencies":{"tslib":"^2.3.0"},"_hasShrinkwrap":false,"peerDependencies":{"zone.js":"^0.11.4","typescript":"^4.1.5","@types/node":"^14.14.16","@angular/core":"^16.2.14","@angular/forms":"^16.2.14","@angular/common":"^16.2.14","@angular/compiler":"^16.2.14","@angular/animations":"^16.2.14","@angular/compiler-cli":"^16.2.14","@angular/platform-server":"^16.2.14","@angular/platform-browser":"^16.2.14","@angular/platform-browser-dynamic":"^16.2.14"},"_npmOperationalInternal":{"tmp":"tmp/ninja-splitter_16.0.2_1718958986889_0.4085349770325928","host":"s3://npm-registry-packages"}},"16.0.3":{"name":"@cw-mnodson/ninja-splitter","version":"16.0.3","keywords":["Angular","Splitter","Split","Split pane","Split view","Split frame"],"author":{"name":"Igor Serganov","email":"caesarandroidru@gmail.com"},"license":"MIT","_id":"@cw-mnodson/ninja-splitter@16.0.3","homepage":"https://github.com/iSerganov/ninja-splitter/#readme","bugs":{"url":"https://github.com/iSerganov/ninja-splitter/issues"},"dist":{"shasum":"3df580bfa823a34e2a2466a076333e8415dfb2ac","tarball":"https://registry.npmjs.org/@cw-mnodson/ninja-splitter/-/ninja-splitter-16.0.3.tgz","fileCount":21,"integrity":"sha512-QS2l9SIu6m7/uuqA3ZHfBLIkA3chYVUmfzIccxoXXX618K9Stuqh/7UK/O6oSOwQdFYgB0JXl2ZGb0BgNoMCmQ==","signatures":[{"sig":"MEQCID51gBBG95I0c5V3rvFqBDn8IEnydcjt5BBkNOk1BtJhAiBiY+lKQr/TO/TKZcpY6xxZDpy4Xy0Dda/WvFGwdQTMsg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":126764},"module":"fesm2022/cw-mnodson-ninja-splitter.mjs","exports":{".":{"esm":"./esm2022/cw-mnodson-ninja-splitter.mjs","types":"./index.d.ts","default":"./fesm2022/cw-mnodson-ninja-splitter.mjs","esm2022":"./esm2022/cw-mnodson-ninja-splitter.mjs"},"./package.json":{"default":"./package.json"}},"gitHead":"2b7be1081fa7150e922bc1edea17b2cb666866f3","typings":"index.d.ts","_npmUser":{"name":"cw-mnodson","email":"m.nodson@craneware.com"},"repository":{"url":"git+https://github.com/iSerganov/ninja-splitter.git","type":"git"},"_npmVersion":"9.5.0","description":"Convenient and easy to use splitter component for Angular 16","directories":{},"sideEffects":false,"_nodeVersion":"18.15.0","dependencies":{"tslib":"^2.3.0"},"_hasShrinkwrap":false,"peerDependencies":{"zone.js":"^0.13.0","typescript":"^5.1.6","@types/node":"^14.14.16","@angular/core":"^16.2.14","@angular/forms":"^16.2.14","@angular/common":"^16.2.14","@angular/compiler":"^16.2.14","@angular/animations":"^16.2.14","@angular/compiler-cli":"^16.2.14","@angular/platform-server":"^16.2.14","@angular/platform-browser":"^16.2.14","@angular/platform-browser-dynamic":"^16.2.14"},"_npmOperationalInternal":{"tmp":"tmp/ninja-splitter_16.0.3_1718959419626_0.9726903263612059","host":"s3://npm-registry-packages"}},"16.0.4":{"name":"@cw-mnodson/ninja-splitter","version":"16.0.4","description":"Convenient and easy to use splitter component for Angular 16","repository":{"type":"git","url":"git+https://github.com/iSerganov/ninja-splitter.git"},"keywords":["Angular","Splitter","Split","Split pane","Split view","Split frame"],"author":{"name":"Igor Serganov","email":"caesarandroidru@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/iSerganov/ninja-splitter/issues"},"homepage":"https://github.com/iSerganov/ninja-splitter/#readme","peerDependencies":{"typescript":"^5.1.6","@angular/animations":"^16.2.12","@angular/common":"^16.2.12","@angular/compiler":"^16.2.12","@angular/compiler-cli":"^16.2.12","@angular/core":"^16.2.12","@angular/forms":"^16.2.12","@angular/platform-browser":"^16.2.12","@angular/platform-browser-dynamic":"^16.2.12","@angular/platform-server":"^16.2.12","@types/node":"^14.14.16","zone.js":"^0.13.0"},"module":"fesm2022/cw-mnodson-ninja-splitter.mjs","typings":"index.d.ts","exports":{"./package.json":{"default":"./package.json"},".":{"types":"./index.d.ts","esm2022":"./esm2022/cw-mnodson-ninja-splitter.mjs","esm":"./esm2022/cw-mnodson-ninja-splitter.mjs","default":"./fesm2022/cw-mnodson-ninja-splitter.mjs"}},"sideEffects":false,"dependencies":{"tslib":"^2.3.0"},"gitHead":"2b7be1081fa7150e922bc1edea17b2cb666866f3","_id":"@cw-mnodson/ninja-splitter@16.0.4","_nodeVersion":"18.15.0","_npmVersion":"9.5.0","dist":{"integrity":"sha512-L/2IE2HZRiCy3t0iuZjHjS6uOtAuetq4mJOGByuzk/UoiipdQlt+icTvx1QxSOumxcm+hDgJWwt2g5oJg0mQrQ==","shasum":"56c175bb16256e5f7ca20180ce834ffdec25f2a8","tarball":"https://registry.npmjs.org/@cw-mnodson/ninja-splitter/-/ninja-splitter-16.0.4.tgz","fileCount":21,"unpackedSize":126764,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD1FxpfMKl0CvvlywoOAg13HSx66ImTVlNYa7gNTSmwiAIhAO9Fnkbyc7Y8klI5a+wb5dSoFmzsaCsaL/xG5ugscZ4D"}]},"_npmUser":{"name":"cw-mnodson","email":"m.nodson@craneware.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ninja-splitter_16.0.4_1718959645578_0.2505714420140004"},"_hasShrinkwrap":false}},"time":{"created":"2024-06-21T08:34:47.486Z","modified":"2024-06-21T08:47:25.991Z","16.0.0":"2024-06-21T08:34:47.739Z","16.0.2":"2024-06-21T08:36:27.082Z","16.0.3":"2024-06-21T08:43:39.794Z","16.0.4":"2024-06-21T08:47:25.818Z"},"maintainers":[{"name":"cw-mnodson","email":"m.nodson@craneware.com"}],"author":{"name":"Igor Serganov","email":"caesarandroidru@gmail.com"},"repository":{"type":"git","url":"git+https://github.com/iSerganov/ninja-splitter.git"},"keywords":["Angular","Splitter","Split","Split pane","Split view","Split frame"],"license":"MIT","homepage":"https://github.com/iSerganov/ninja-splitter/#readme","bugs":{"url":"https://github.com/iSerganov/ninja-splitter/issues"},"readme":"# ninja-splitter\n\nSplitter component for Angular 16\n\n\nInspired by https://github.com/wannabegeek/ng2-split-pane. (Can be used up to Angular 8)\n\nThere are 2 types of split panes: `horizontal-ninja` and `vertical-ninja`\n\n## Install\n-------\nYou can either [download](https://github.com/iSerganov/ninja-splitter/archive/master.zip)\nthe whole project or install it via NPM:\n\n```bash\n$ npm install ninja-splitter\n```\n-------\n\nThe following configuration properties are available to client code:\n\nKey | Range | Does\n--- | --- | ---\n`primary-minsize` | value in pixels | Minimal allowed size for primary pane\n`secondary-minsize` | value in pixels | Minimal allowed size for secondary pane\n`separator-width-px` | value in pixels (5 by default) | The thickness of the separator between the primary and secondary components\n`primary-component-toggle` | boolean `true` or `false` (false by default) | Hide the primary component and the separator\n`secondary-component-toggle` | boolean `true` or `false` (false by default) | Hide the secondary component and the separator\n`primary-component-initialratio` | initial value in a ratio of primary/secondary (range 0-1) | The initial size to create the primary pane (secondary will fill the remaining), this value will be over-ridden if a value is found in the local storage.\n`local-storage-key` | string value used as the local storage key key  | If this value is present the current splitter position will be stored in local storage\n\n\n## Styling\n-------\nYou can define the following css variables to override default styling:\n\nCSS-variable | Responsible for | Default\n--- | --- | ---\n`--ninja-separator-background-color` | Background color of the separator HTML element | #fff\n`--ninja-separator-hover-background-color` | Hover background color of the separator HTML element | #fafafa\n`--ninja-separator-hcursor` | Horizontal separator cursor | ns-resize\n`--ninja-separator-vcursor` | Vertical separator cursor | ew-resize\n\n## Example\n-------\n```javascript\n<horizontal-ninja\n    primary-minsize=\"50\"\n    secondary-minsize=\"100\"\n    [primary-component-toggle]=\"false\"\n    [secondary-component-toggle]=\"condition\"\n    local-storage-key=\"ninja\"\n    primary-component-initialratio=\"0.8\">\n\n    <div class=\"ninja-content-primary\">\n        <span>\n            Upper pane\n        </span>\n    </div>\n\n    <div class=\"ninja-content-secondary\">\n        <span>\n            Lower pane\n        </span>\n    </div>\n\n</horizontal-ninja>\n\n```\n**Import**\n```typescript\n// Please note the module is not in the root\nimport { NinjaSplitterModule } from 'ninja-splitter';\n\n@NgModule({\n    declarations: [\n        AppComponent\n    ],\n    imports: [\n        NinjaSplitterModule\n    ],\n    bootstrap: [AppComponent]\n})\nexport class AppModule { }\n```\n\n## Events\n\n`(on-change)` - emitted on resizing\n\n`(on-begin-resizing)` - emitted when the user begins dragging the separator\n\n`(on-ended-resizing)` - emitted when the user releases the separator after dragging\n","readmeFilename":"README.md"}