{"_id":"v-accordionjs","_rev":"1-7c4df407dd53c20cc6bfb089330ce0a2","name":"v-accordionjs","dist-tags":{"latest":"1.6.1"},"versions":{"1.6.1":{"name":"v-accordionjs","description":"vAccordionjs - AngularJS multi-level accordion component","version":"1.6.1","author":{"name":"Łukasz Wątroba","email":"l@lukaszwatroba.com"},"license":"MIT","keywords":["angular","accordion","multi-level","component","directive","module"],"repository":{"type":"git","url":"git+https://github.com/thiagoteles/v-accordion.git"},"main":"index.js","bugs":{"url":"https://github.com/thiagoteles/v-accordion/issues"},"homepage":"https://github.com/thiagoteles/v-accordion","devDependencies":{"chai":"^1.9.1","chai-jquery":"^1.2.3","gulp":"^3.8.11","gulp-autoprefixer":"^2.0.0","gulp-concat":"^2.3.4","gulp-header":"^1.2.2","gulp-jshint":"^1.9.0","gulp-minify-css":"^0.3.11","gulp-rename":"^1.2.0","gulp-sass":"^2.3.1","gulp-uglify":"^0.3.2","jshint-stylish":"^1.0.0","karma":"^0.12.22","karma-chai":"^0.1.0","karma-chai-jquery":"^1.0.0","karma-chrome-launcher":"^0.1.4","karma-jasmine":"^0.1.5","karma-jquery":"^0.1.0","karma-mocha":"^0.1.8","karma-phantomjs-launcher":"^0.1.4","karma-sinon-chai":"^0.2.0","mocha":"^1.21.4","sinon":"^1.10.3","sinon-chai":"^2.5.0"},"engines":{"node":">=0.8.0"},"gitHead":"cb04728c7c76b31a5e78b49a4b15c5333e475ead","_id":"v-accordionjs@1.6.1","_npmVersion":"6.4.1","_nodeVersion":"8.11.3","_npmUser":{"name":"thiagor","email":"thiagor@gmail.com"},"dist":{"integrity":"sha512-WszGVA5yVGOg+oPJGcitRwvS9Fc8D4hbez+MkWYzDHVsYR5jJDuFAaiQ5qFhtI7ZfEPefYGISMncMuc+N9956g==","shasum":"0db5b93c1b59c31d47dafd6fdcd2af39e34397c7","tarball":"https://registry.npmjs.org/v-accordionjs/-/v-accordionjs-1.6.1.tgz","fileCount":35,"unpackedSize":101905,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJclQYECRA9TVsSAnZWagAAkXoP/2vWYToSQkQeHKO6Q5M4\nZ+sgrBI3jWTJYN0Myuy/Nd6pmkwQsMMZLaPbTS/AICfn9hdfJqXvBp/3DQEI\n6p3z2i1iMh7Omkvc0W1b2fDLO+o8YtKSQP9nj4CDjXFiQHw/FIyMCSoMOEUq\nYqJz33pWTOHslGI1Hez38vBu3GOXiBS0zFU68BYuQHk5CVN7cONZfECy1Z1w\nYiIUr4FjjdNqYNWtx8QY1T5pDlWwDf6BxzZcLXMM1vY4zcB50BjuyISUWEDR\nYx5YxmaEDdrQEQQ+QI9euWuNeNSQs0qhrVof5/bWI+yEtl9/24GVXrIB0glv\n/z80qfaFCfUBWhT1uAhcAu336EFThSE1nsdthVhtSzhN0eZmi1YjEWaz08ob\ngLv1Qn4L4SKpxh3xpnrzOkyWIqJPL8z3NyKjPATbhs2jTRAN+4vhz7Rxs4PP\nxRQPwe03vd3Co3+d63UQdFmOzt9qrpP9jWs0qEgakIkDxZFgS3tMlbLXKX/X\naB5CLW2j3ISxZPr1gXOi7A7OPXxwlwf1NbdqumdFXWK0GR5eyeYdJnF4U/Ul\nh7h0xYehCgtYlL3yeWyBNNVWhOGtkIKCRE6NSTlhKkgJVzqBiVs94l27hJ/U\nAjWhELtxUAiKV9NDuGWNLzk9MGbjoEdHAqqUogjuU6gySJj8XlPXIPSpcVpY\nVrLh\r\n=GZaY\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFYV5C5j8HfmcOYwsmIgoBSGSXZ/gO6K4WUcY0Yfqfx7AiAvE0B3qu1+odcvek1fdaLpsEdII19z8ozGwcHbliuhbA=="}]},"maintainers":[{"name":"thiagor","email":"thiagor@gmail.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/v-accordionjs_1.6.1_1553270275222_0.7871682478549153"},"_hasShrinkwrap":false}},"time":{"created":"2019-03-22T15:57:55.221Z","1.6.1":"2019-03-22T15:57:55.391Z","modified":"2022-05-23T01:06:39.224Z"},"maintainers":[{"name":"thiagor","email":"thiagor@gmail.com"}],"description":"vAccordionjs - AngularJS multi-level accordion component","homepage":"https://github.com/thiagoteles/v-accordion","keywords":["angular","accordion","multi-level","component","directive","module"],"repository":{"type":"git","url":"git+https://github.com/thiagoteles/v-accordion.git"},"author":{"name":"Łukasz Wątroba","email":"l@lukaszwatroba.com"},"bugs":{"url":"https://github.com/thiagoteles/v-accordion/issues"},"license":"MIT","readme":"\r\n# AngularJS multi-level accordion\r\n\r\n  - Allows for a nested structure\r\n  - Works with (or without) `ng-repeat`\r\n  - Allows multiple sections to be open at once\r\n\r\n\r\n## Examples\r\n\r\n  - [GitHub](http://lukaszwatroba.github.io/v-accordion)\r\n  - [CodePen](http://codepen.io/LukaszWatroba/pen/MwdaLo)\r\n  - [Linksfridge](https://linksfridge.com/help)\r\n\r\n\r\n## Usage\r\n\r\n  - If you use [bower](http://bower.io/) or [npm](https://www.npmjs.com/), just `bower/npm install v-accordion`. If not, download files [from the github repo](./dist).\r\n\r\n  - Include `angular.js`, `angular-animate.js`, `v-accordion.js`, and `v-accordion.css`:\r\n  ```html\r\n  <link href=\"v-accordion.css\" rel=\"stylesheet\" />\r\n\r\n  <script src=\"angular.js\"></script>\r\n  <script src=\"angular-animate.js\"></script>\r\n\r\n  <script src=\"v-accordion.js\"></script>\r\n  ```\r\n\r\n  - Add `vAccordion` and `ngAnimate` as dependencies to your application module:\r\n  ```js\r\n  angular.module('myApp', ['vAccordion', 'ngAnimate']);\r\n  ```\r\n\r\n  - Put the following markup in your template:\r\n  ```html\r\n  <!-- add `multiple` attribute to allow multiple sections to open at once -->\r\n  <v-accordion class=\"vAccordion--default\" multiple>\r\n\r\n    <!-- add expanded attribute to open the section -->\r\n    <v-pane expanded>\r\n      <v-pane-header>\r\n        Pane header #1\r\n      </v-pane-header>\r\n\r\n      <v-pane-content>\r\n        Pane content #1\r\n      </v-pane-content>\r\n    </v-pane>\r\n\r\n    <v-pane disabled>\r\n      <v-pane-header>\r\n        Pane header #2\r\n      </v-pane-header>\r\n\r\n      <v-pane-content>\r\n        Pane content #2\r\n      </v-pane-content>\r\n    </v-pane>\r\n\r\n  </v-accordion>\r\n  ```\r\n\r\n  - You can also use `v-accordion` with `ng-repeat`:\r\n  ```html\r\n  <v-accordion class=\"vAccordion--default\">\r\n\r\n    <v-pane ng-repeat=\"pane in panes\" expanded=\"pane.isExpanded\">\r\n      <v-pane-header>\r\n        {{ ::pane.header }}\r\n      </v-pane-header>\r\n\r\n      <v-pane-content>\r\n        {{ ::pane.content }}\r\n\r\n        <!-- accordions can be nested :) -->\r\n        <v-accordion ng-if=\"pane.subpanes\">\r\n          <v-pane ng-repeat=\"subpane in pane.subpanes\" ng-disabled=\"subpane.isDisabled\">\r\n            <v-pane-header>\r\n              {{ ::subpane.header }}\r\n            </v-pane-header>\r\n            <v-pane-content>\r\n              {{ ::subpane.content }}\r\n            </v-pane-content>\r\n          </v-pane>\r\n        </v-accordion>\r\n      </v-pane-content>\r\n    </v-pane>\r\n\r\n  </v-accordion>\r\n  ```\r\n\r\n\r\n## API\r\n\r\n#### Control\r\n\r\nAdd `control` attribute and use the following methods to control vAccordion from it's parent scope:\r\n\r\n  - `toggle(indexOrId)`\r\n  - `expand(indexOrId)`\r\n  - `collapse(indexOrId)`\r\n  - `expandAll()`\r\n  - `collapseAll()`\r\n  - `hasExpandedPane()`\r\n\r\n```html\r\n<v-accordion id=\"my-accordion\" multiple control=\"accordion\">\r\n\r\n  <v-pane id=\"{{ pane.id }}\" ng-repeat=\"pane in panes\">\r\n    <v-pane-header>\r\n      {{ ::pane.header }}\r\n    </v-pane-header>\r\n\r\n    <v-pane-content>\r\n      {{ ::pane.content }}\r\n    </v-pane-content>\r\n  </v-pane>\r\n\r\n</v-accordion>\r\n\r\n<button ng-click=\"accordion.toggle(0)\">Toggle first pane</button>\r\n<button ng-click=\"accordion.expandAll()\">Expand all</button>\r\n<button ng-click=\"accordion.collapseAll()\">Collapse all</button>\r\n```\r\n\r\n```js\r\n$scope.$on('my-accordion:onReady', function () {\r\n  var firstPane = $scope.panes[0];\r\n  $scope.accordion.toggle(firstPane.id);\r\n});\r\n```\r\n\r\n#### Scope\r\n\r\n`$accordion` and `$pane` properties allows you to control the directive from it's transcluded scope.\r\n\r\n##### $accordion\r\n\r\n  - `toggle(indexOrId)`\r\n  - `expand(indexOrId)`\r\n  - `collapse(indexOrId)`\r\n  - `expandAll()`\r\n  - `collapseAll()`\r\n  - `hasExpandedPane()`\r\n  - `id`\r\n\r\n##### $pane\r\n\r\n  - `toggle()`\r\n  - `expand()`\r\n  - `collapse()`\r\n  - `isExpanded()`\r\n  - `id`\r\n\r\n```html\r\n<v-accordion multiple>\r\n\r\n  <v-pane ng-repeat=\"pane in panes\">\r\n    <!-- here's how you can create a custom toggle button -->\r\n    <v-pane-header inactive>\r\n      {{ ::pane.header }}\r\n      <button ng-click=\"$pane.toggle()\">Toggle me</button>\r\n    </v-pane-header>\r\n\r\n    <v-pane-content>\r\n      {{ ::pane.content }}\r\n    </v-pane-content>\r\n  </v-pane>\r\n\r\n  <button ng-click=\"$accordion.expandAll()\">Expand all</button>\r\n\r\n</v-accordion>\r\n```\r\n\r\n\r\n#### Events\r\n\r\nThe directive emits the following events:\r\n\r\n  - `vAccordion:onReady` or `yourAccordionId:onReady`\r\n  - `vAccordion:onExpand` or `yourAccordionId:onExpand`\r\n  - `vAccordion:onExpandAnimationEnd` or `yourAccordionId:onExpandAnimationEnd`\r\n  - `vAccordion:onCollapse` or `yourAccordionId:onCollapse`\r\n  - `vAccordion:onCollapseAnimationEnd` or `yourAccordionId:onCollapseAnimationEnd`\r\n\r\n\r\n## Callbacks\r\n\r\nUse these callbacks to get the expanded/collapsed pane index and id:\r\n\r\n```html\r\n<v-accordion onexpand=\"expandCallback(index, id)\" oncollapse=\"collapseCallback(index, id)\">\r\n\r\n  <v-pane id=\"{{ ::pane.id }}\" ng-repeat=\"pane in panes\">\r\n    <v-pane-header>\r\n      {{ ::pane.header }}\r\n    </v-pane-header>\r\n\r\n    <v-pane-content>\r\n      {{ ::pane.content }}\r\n    </v-pane-content>\r\n  </v-pane>\r\n\r\n</v-accordion>\r\n```\r\n\r\n```js\r\n$scope.expandCallback = function (index, id) {\r\n  console.log('expanded pane:', index, id);\r\n};\r\n\r\n$scope.collapseCallback = function (index, id) {\r\n  console.log('collapsed pane:', index, id);\r\n};\r\n```\r\n\r\n\r\n## Configuration\r\n\r\n#### Module\r\nTo change the default animation duration, inject `accordionConfig` provider in your app config:\r\n\r\n```javascript\r\nangular\r\n  .module('myApp', ['vAccordion'])\r\n  .config(function (accordionConfig) {\r\n    accordionConfig.expandAnimationDuration = 0.5;\r\n  });\r\n```\r\n\r\n#### SCSS\r\nIf you are using SASS, you can import vAccordion.scss file and override the following variables:\r\n\r\n```scss\r\n$v-accordion-default-theme:         true !default;\r\n\r\n$v-accordion-spacing:               20px !default;\r\n\r\n$v-pane-border-color:               #D8D8D8 !default;\r\n$v-pane-expanded-border-color:      #2196F3 !default;\r\n$v-pane-icon-color:                 #2196F3 !default;\r\n$v-pane-hover-color:                #2196F3 !default;\r\n\r\n$v-pane-disabled-opacity:           0.6   !default;\r\n\r\n$v-pane-expand-animation-duration:  0.5s  !default;\r\n$v-pane-hover-animation-duration:   0.25s !default;\r\n```\r\n\r\n\r\n## Accessibility\r\nvAccordion manages keyboard focus and adds some common aria-* attributes. BUT you should additionally place the `aria-controls` and `aria-labelledby` as follows:\r\n\r\n```html\r\n<v-accordion>\r\n\r\n  <v-pane ng-repeat=\"pane in panes\">\r\n    <v-pane-header id=\"{{ ::pane.id }}-header\" aria-controls=\"{{ ::pane.id }}-content\">\r\n      {{ ::pane.header }}\r\n    </v-pane-header>\r\n\r\n    <v-pane-content id=\"{{ ::pane.id }}-content\" aria-labelledby=\"{{ ::pane.id }}-header\">\r\n      {{ ::pane.content }}\r\n    </v-pane-content>\r\n  </v-pane>\r\n\r\n</v-accordion>\r\n```\r\n","readmeFilename":"README.md"}