{"_id":"@terminus/ui-expansion-panel","_rev":"51-4cc734a176384b0d7db23bcf0670e0f9","name":"@terminus/ui-expansion-panel","dist-tags":{"latest":"2.0.0","next":"2.0.1"},"versions":{"0.0.1":{"name":"@terminus/ui-expansion-panel","version":"0.0.1","license":"MIT","author":{"name":"@terminus"},"private":false,"homepage":"https://github.com/GetTerminus/terminus-oss","repository":{"type":"git","url":"git+https://github.com/GetTerminus/terminus-oss.git"},"bugs":{"url":"https://github.com/GetTerminus/terminus-oss/issues"},"peerDependencies":{"@angular/cdk":"^9.1.0","@angular/common":"^9.1.0","@angular/core":"^9.1.0","@angular/platform-browser":"^9.1.0","@angular/animations":"^9.1.0","@terminus/design-tokens":"^1.0.10","@terminus/ngx-tools":"^8.0.5","rxjs":"^6.5.0"},"main":"bundles/terminus-ui-expansion-panel.umd.js","module":"fesm5/terminus-ui-expansion-panel.js","es2015":"fesm2015/terminus-ui-expansion-panel.js","esm5":"esm5/terminus-ui-expansion-panel.js","esm2015":"esm2015/terminus-ui-expansion-panel.js","fesm5":"fesm5/terminus-ui-expansion-panel.js","fesm2015":"fesm2015/terminus-ui-expansion-panel.js","typings":"terminus-ui-expansion-panel.d.ts","metadata":"terminus-ui-expansion-panel.metadata.json","sideEffects":false,"dependencies":{"tslib":"^1.10.0"},"description":"

Expansion Panel

","_id":"@terminus/ui-expansion-panel@0.0.1","_nodeVersion":"12.10.0","_npmVersion":"6.10.3","dist":{"integrity":"sha512-dugNjPhFj4bTzTw2BwaiI2EHq0jWmgkE39dGKERGuiiKe+ZASi+arQqokcFaiydKpEyGYIqgVEVlEWCzLjPQYg==","shasum":"5b01ab57976de6507d242bcbe7e004c4dfdce46d","tarball":"https://registry.npmjs.org/@terminus/ui-expansion-panel/-/ui-expansion-panel-0.0.1.tgz","fileCount":111,"unpackedSize":762439,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe1eM+CRA9TVsSAnZWagAAGO8QAJ1TZmES0BXI8dCPDqPX\ni+Z/2hir6zhjB9sblDJdZjn8k+C6QC4cg3t1hgcQikvNQcvvIK9773z3Tjh4\n382AOmNVSPgpWC7wSgClsct788dIbeTP7CC9tMSEllW5ZEbXXXm8lubJBIUM\n2EyP5Nja149jmRqDySRFyRA9/ZkFG8PhEo7XhYkaOTbsXes64RsZjSUq64S6\nKFGBcrd4Dow556xyYDxuymLIvL9TTP2f5/C8u5kta+D2yObEK0Mr4KKj/ybc\niF0nXW8BbuZ2aiT61PVnPFLFv23EQGcuCzZMgSFZT+u3z7uErvS5BEMvOjBO\nZHPBW/5hsQKAhVZjAo9GkL/+5JsgK1qbjJGrtqaVz9SUBSzEfplMl2ANqahA\nW3m5+vmFGf10idg495u+H8ZL0icVuyGAiBM4F3jLMo98yy0J4tDdd1NlFIUf\nIlorxbFNxi/vw+UaEkaWvyly7P6jV6zcFywZOt+OwsmyJn+2grIO5UYUkz1a\nxsPEctttiVJq/ae/4rqkfnhRDg6rM6TMcYogIpqSbsNYvuPUqCtSnIa/8uvf\n9hQLMCa6se6VaeULyGRK1H9baQiYqdta4inggdnM65lIx/Cl/xs/LP8XcW62\n5lUrwXI3w/Q6trRl4KihVF1Vx1zBOnoj42J6lUb9jRG7TwEQ8V2ooOqSbKq+\ngz36\r\n=o6tN\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCID42HnX6pv5pIINadomAn6w+ofVAKbPpLypucOM6YjLRAiEA4z2a71JEF2oZbX162Z+m3bZxon9egEG69WBRBNJAWTE="}]},"maintainers":[{"name":"terminus_devops","email":"devops@terminus.com"},{"name":"atlwendy","email":"atlwendy@gmail.com"},{"name":"bmalinconico-terminus","email":"brian.malinconico@terminus.com"},{"name":"benjamincharity","email":"ben@benjamincharity.com"}],"_npmUser":{"name":"benjamincharity","email":"ben@benjamincharity.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ui-expansion-panel_0.0.1_1591075645710_0.7965126686178259"},"_hasShrinkwrap":false},"1.0.0":{"name":"@terminus/ui-expansion-panel","version":"1.0.0","license":"MIT","author":{"name":"@terminus"},"private":false,"homepage":"https://github.com/GetTerminus/terminus-oss","repository":{"type":"git","url":"git+https://github.com/GetTerminus/terminus-oss.git"},"bugs":{"url":"https://github.com/GetTerminus/terminus-oss/issues"},"publishConfig":{"access":"public","tag":"next"},"peerDependencies":{"@angular/cdk":"^9.1.0","@angular/common":"^9.1.0","@angular/core":"^9.1.0","@angular/platform-browser":"^9.1.0","@angular/animations":"^9.1.0","@terminus/design-tokens":"^1.0.10","@terminus/ngx-tools":"^8.0.5","rxjs":"^6.5.0","tslib":"^1.10.0"},"readme":"

Expansion Panel

\n\n[![CI/CD Status][github-action-badge]][github-action-link] [![Codecov][codecov-badge]][codecov-project] [![MIT License][license-image]][license-url] \n[![NPM version][npm-version-image]][npm-package] [![Github release][gh-release-badge]][gh-releases] [![Library size][file-size-badge]][raw-distribution-js]\n\nExpansion panel & accordion components.\n\n\n\n**Table of Contents**\n\n- [Usage](#usage)\n - [Panel](#panel)\n - [Title and description](#title-and-description)\n - [Disable a panel](#disable-a-panel)\n - [Default a panel open](#default-a-panel-open)\n - [Lazy loaded content](#lazy-loaded-content)\n - [Transparent mode](#transparent-mode)\n - [Panel events](#panel-events)\n - [Custom trigger heights](#custom-trigger-heights)\n - [Manual control](#manual-control)\n - [Accordion](#accordion)\n - [Allow multiple panels to be open](#allow-multiple-panels-to-be-open)\n - [Accordion events](#accordion-events)\n - [Accordion as a stepper](#accordion-as-a-stepper)\n - [Hide toggle](#hide-toggle)\n - [Action row](#action-row)\n - [Open or close all panels](#open-or-close-all-panels)\n- [Test Helpers](#test-helpers)\n\n\n\n\n## Usage\n\n### Panel\n\nThe most basic usage is a single panel with a trigger:\n\n```html\n\n \n Here is my trigger!\n \n\n

And here is my standard panel content.

\n\n```\n\n> NOTE: Without a trigger, the panel will not be visible.\n\n\n#### Title and description\n\nTrigger text can be split into `title` and `description` using the `TsExpansionPanelTitleComponent` and\n`TsExpansionPanelDescriptionComponent` respectively.\n\n```html\n\n\n Here is my trigger!\n\n\n\n\n\n \n My title\n \n\n \n My description\n \n\n```\n\n\n#### Disable a panel\n\nThe `isDisabled` flag will disable a panel and it's trigger:\n\n```html\n\n \n Here is my trigger!\n \n\n

I will never be seen.

\n\n```\n\n\n#### Default a panel open\n\nThe `isExpanded` flag will change the state of a panel. This can be used to default to a specific state or to dynamically change the state.\n\n```html\n\n \n Here is my trigger!\n \n\n

I'll be visible by default!

\n\n```\n\n\n#### Lazy loaded content\n\nPanel content can be lazily loaded by using a template with the `tsExpansionPanelContent` directive. The template will not be loaded until\nthe panel is opened for the first time. The content will remain in the DOM until the panel is destroyed.\n\n```html\n\n \n Here is my trigger!\n \n\n \n Here is my deferred template!\n \n\n```\n\n#### Transparent mode\nExpansion panel with transparent mode on has no box shadow and padding on the side. It's default to `false`.\n\n```html\n\n \n Here is my trigger!\n \n\n \n Here is my deferred template!\n \n\n```\n\n\n#### Panel events\n\n| Event | Description | Payload |\n|:-----------------|:---------------------------------------------------|:----------|\n| `opened` | Fired when the panel is opened | `void` |\n| `afterExpand` | Fired after the panel expansion animation finishes | `void` |\n| `closed` | Fired when the panel is closed | `void` |\n| `afterCollapse` | Fired after the panel collapse animation finishes | `void` |\n| `expandedChange` | Fired when the panel state changes | `boolean` |\n| `destroyed` | Fired when the panel is destroyed | `void` |\n\n```html\n...\n```\n\n\n#### Custom trigger heights\n\nCustom heights can be set for a trigger's collapsed and/or expanded state.\n\n```html\n\n \n Panel Trigger (100px -> 200px)\n\n And here is my standard panel content.\n\n```\n\n#### Manual control\n\nPanels can be programmatically opened, closed or toggled through a reference to the instance:\n\n```typescript\n@ViewChild(TsExpansionPanelComponent, {static: false})\npublic panel: TsExpansionPanelComponent;\n\n...\n\npanel.open();\npanel.close();\npanel.toggle();\n```\n\n> NOTE: Disabled panels cannot be controlled with these methods. Disabled panels can _only_ be controlled via the `isExpanded` input.\n\n\n### Accordion\n\nAn accordion is created by wrapping two or more `TsExpansionPanelComponent`s inside a `TsAccordionComponent`.\n\n```html\n\n ...\n ...\n\n```\n\n\n#### Allow multiple panels to be open\n\nBy default an accordion can only have a single panel open at a time. This functionality can be change with the `multi` input.\n\n```html\n\n ...\n ...\n\n```\n\n\n#### Accordion events\n\n| Event | Description | Payload |\n|:------------|:--------------------------------------|:--------|\n| `destroyed` | Fired when the accordion is destroyed | `void` |\n\n```html\n...\n```\n\n#### Accordion as a stepper\n\nAn accordion can function as a stepper which can be useful for guided flows. To facilitate this we can use a combination of `hideToggle` and\nthe `ts-expansion-panel-action-row`.\n\n```html\n\n\n \n \n Step 1\n\n And here is my standard panel content.\n\n \n Next\n \n \n\n \n \n Step 2\n\n And here is my standard panel content.\n\n \n Previous\n Next\n \n \n\n \n \n Step 3\n\n And here is my standard panel content.\n\n \n Previous\n End\n \n \n\n```\n\n#### Hide toggle\n\nWhen an accordion is controlled programmatically, the toggle icon can be hidden to avoid confusion for the user. Setting `hideToggle` on the\naccordion will hide the toggle icon for *all panels within*.\n\n> NOTE: This should _only_ be used in cases when the accordion is functioning as a stepper.\n\n```html\n\n ...\n ...\n\n```\n\n\n#### Action row\n\nThe action row is useful when an accordion is functioning as a stepper. Controls added within the action row will be right aligned as panel\ncontrols.\n\n> NOTE: See [Accordion as a stepper](https://github.com/GetTerminus/terminus-ui/blob/master/projects/library/expansion-panel/src/expansion-panel.component.md#accordion-as-a-stepper) for a complete example.\n\n```html\n\n \n Step 1\n \n\n And here is my standard panel content.\n\n \n \n \n\n```\n\n\n#### Open or close all panels\n\nAn accordion can programmatically open or close all panels at once.\n\n```typescript\n@ViewChild(TsAccordionComponent, {static: false})\npublic accordion: TsAccordionComponent;\n\n...\n\naccordion.openAll();\naccordion.closeAll();\n```\n\n> NOTE: These methods will *not* change the state of disabled panels.\n\n\n## Test Helpers\n\nSome helpers are exposed to assist with testing. These are imported from `@terminus/ui-expansion-panel/testing`;\n\n[[source]][test-helpers-src]\n\n| Function |\n|--------------------------------|\n| `getAllPanelDebugElements` |\n| `getAllPanelInstances` |\n| `getPanelDebugElement` |\n| `getPanelInstance` |\n| `getPanelElement` |\n| `getPanelBodyElement` |\n| `getPanelBodyContentElement` |\n| `getAllAccordionDebugElements` |\n| `getAllAccordionInstances` |\n| `getAccordionInstance` |\n| `getAccordionDebugElement` |\n| `getAccordionElement` |\n| `getTriggerDebugElement` |\n| `getTriggerInstance` |\n| `getTriggerElement` |\n| `getTriggerTitleElement` |\n| `getTriggerDescriptionElement` |\n| `getPanelActionRow` |\n| `togglePanel` |\n\n\n\n[test-helpers-src]: testing/src/test-helpers.ts\n[license-url]: https://github.com/GetTerminus/terminus-oss/blob/master/LICENSE\n[license-image]: http://img.shields.io/badge/license-MIT-blue.svg\n[codecov-project]: https://codecov.io/gh/GetTerminus/terminus-oss\n[codecov-badge]: https://codecov.io/gh/GetTerminus/terminus-oss/branch/master/graph/badge.svg\n[npm-version-image]: http://img.shields.io/npm/v/@terminus/ui-button.svg\n[npm-package]: https://www.npmjs.com/package/@terminus/ui-button\n[gh-release-badge]: https://img.shields.io/github/release/GetTerminus/terminus-oss.svg\n[gh-releases]: https://github.com/GetTerminus/terminus-ui/releases/\n[github-action-badge]: https://github.com/GetTerminus/terminus-oss/workflows/CI%20Release/badge.svg\n[github-action-link]: https://github.com/GetTerminus/terminus-oss/actions?query=workflow%3A%22CI+Release%22\n[file-size-badge]: http://img.badgesize.io/https://unpkg.com/@terminus/ui-button/bundles/terminus-ui-button.umd.min.js?compression=gzip\n[raw-distribution-js]: https://unpkg.com/@terminus/ui-button/bundles/terminus-ui-button.umd.js\n","readmeFilename":"README.md","description":"

Expansion Panel

","_id":"@terminus/ui-expansion-panel@1.0.0","_nodeVersion":"12.16.3","_npmVersion":"6.14.5","dist":{"integrity":"sha512-eacYMVzxBoxdLX5Fye2oqo4myZyMC1LPNCNvXG/EiW6ZJ+VPLGpBOQhJ7FA7NON9ZQRg8NopdYTIFGfI4IIYXQ==","shasum":"fa636c50719642c51f90c397781af2dc6b654889","tarball":"https://registry.npmjs.org/@terminus/ui-expansion-panel/-/ui-expansion-panel-1.0.0.tgz","fileCount":32,"unpackedSize":82342,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe2Tw7CRA9TVsSAnZWagAAwkcP/00p7tZ3/fsIkoPYDtLi\nGFO3Ap5+cE935eIEQ6k4g1N8x6wM4uFK3gU2ksw8+65X8loyA7ye8DOmowzi\nuODf7adkSCEA6eWcdJ8ELRC/4EnpDoeYACV5zK3BYHNznXDEyYTNzV3YUPEc\no7KuummvnxjpxgX7wFdj+DWEEZrwgCSvZIzhxbBEl/fG2J6b3A+xszCyID4z\nunCkwnZJp0r27tlXJET4NaX6JMHXO00BjmLJ1Yrv1pB/xGNJq565XthiUuPF\nmINL4SfL+rzBTc2b71J6mSJhMaBu6F683cF5ggrunKBbplfu2pOkRK6SYdKh\nMre98mXrSdHgspjJXIkqrgp4qaYb6kfXBHJ+uVFEDoBzD1QbIvk0AiL4s/6e\nnE9Ov6J09lQJIFMghwF9PixI5hDH/v7ezX8I/mypwfxs63VqM1kE0NbnxPFQ\nsZEbOA0jDcq1Ap7ZUT9FpwiwerDKpdu9zhWojY8rAbyM1WBYxX7kVa6o60k7\nmYMt0UZ2zFlvnEnrTf1FRWhfbZUSdKu8rm8OJP4zjaWjReRyGPWnZHxKq0Uk\nah2BYDYg6VH+wPUYS6aBdYcqOMMfkA9DqTWmkiA829SXk+quL5GhqKNRhezc\n6wmL2ajeO+2+A92Xqc9TIcgdF70ub9xJxRhC91gv1uUiGnxEFjsQLfKBBBXb\nF7k+\r\n=4mhn\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDgK1bnpEpH0mOeUGXCcpfNjR3AkzaqmJKGywywsbvSkAiAco4cbi7FX7maSjAoQWCmI5wv5V9xgnfAbXgphpcq0gw=="}]},"maintainers":[{"name":"atlwendy","email":"atlwendy@gmail.com"},{"name":"benjamincharity","email":"ben@benjamincharity.com"},{"name":"bmalinconico-terminus","email":"brian.malinconico@terminus.com"},{"name":"terminus_devops","email":"devops@terminus.com"}],"_npmUser":{"name":"terminus_devops","email":"devops@terminus.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ui-expansion-panel_1.0.0_1591295035054_0.6662786169770474"},"_hasShrinkwrap":false},"1.0.1":{"name":"@terminus/ui-expansion-panel","version":"1.0.1","license":"MIT","author":{"name":"@terminus"},"private":false,"homepage":"https://github.com/GetTerminus/terminus-oss","repository":{"type":"git","url":"git+https://github.com/GetTerminus/terminus-oss.git"},"bugs":{"url":"https://github.com/GetTerminus/terminus-oss/issues"},"publishConfig":{"access":"public","tag":"next"},"peerDependencies":{"@angular/cdk":"^9.1.0","@angular/common":"^9.1.0","@angular/core":"^9.1.0","@angular/platform-browser":"^9.1.0","@angular/animations":"^9.1.0","@terminus/design-tokens":"^1.0.10","@terminus/ngx-tools":"^8.0.5","rxjs":"^6.5.0","tslib":"^1.10.0"},"description":"

Expansion Panel

","_id":"@terminus/ui-expansion-panel@1.0.1","_nodeVersion":"12.16.3","_npmVersion":"6.14.5","dist":{"integrity":"sha512-FVX2Pez6JdHnRSt/4a/pOZHJDBBs7bI8OeZWcVO+GVWY3KGa6SscGs3yVoMeA+HRW1fO24cF6mkrQMBVjk05jQ==","shasum":"12aea471928caa9c1a9cb1d84aae79cf3804ff1d","tarball":"https://registry.npmjs.org/@terminus/ui-expansion-panel/-/ui-expansion-panel-1.0.1.tgz","fileCount":33,"unpackedSize":82396,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe2asECRA9TVsSAnZWagAAYuoP/07HrTXoYsuT70UgTChY\nUW7q6CKlG+GcdLXcuI52n0+BigPbntbfFx9bfrUserPzjM2S6dNh31UN9rMi\ne0Nqev2j5h9d6hyXSFQpC99rcioVhbbffA2YXr9qOdkjtxF2Nbr7dN30QjKR\n3P/cEseMLbaN+1FzG3TOsVQAM0ZFzF+Q6fPi9FEjBU9rZBsNLgNJy29qOhlg\nkvu5ZX6wDtvyw910resGUnkxKBJdfuv9OVfIxL62qiIOoUo22LyMSL8BWdEf\nlZpl8SfNp5BGlhdynU3amAKtbImV+xI4R39KFVA0rmKw4fOPV1pmXXOv6B/J\ngrpwuthmyF1OuiN9cfl77vNU4Mj1n1YsT3kfCF+jRHE8zg47KezSFD0qJlah\nUWJ6dxoZqabVj0txYb7V/sko78xgViiRjUGluPWeyugvIyXUkxRB5fTtGyKp\nIjWPHzs71NFe77gEnkjZnv5L2RZgyhP9e/8CZJUSs7xyFGRAxUeQBnLyJy44\nTr1qVsyIGDUfKPpC5HEaCe9I1hfqtBDXYn9KVp6mAd+4ir7TBgOGW9azhIVR\nCj8Zuo0MHMbdzyHcNGHNJRp6lg0PIAGwBoXhMjqssYfOySm+mqrCG0lG0ssD\nQ5MpWveuWwAEtayzwe++bgHI3PDZBcm8CUmewW1BRwYvVkdYwxjMLZNp/UuS\n7t3W\r\n=+fC/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHUpWFOCJTk37s8geZxLoscNam+N8fwn+rb8HT/Vz3h/AiBbMJgDtMwqmVo0LPNZXOOZYpDpF7uuNfSJ73lFHkLw2A=="}]},"maintainers":[{"name":"atlwendy","email":"atlwendy@gmail.com"},{"name":"benjamincharity","email":"ben@benjamincharity.com"},{"name":"bmalinconico-terminus","email":"brian.malinconico@terminus.com"},{"name":"terminus_devops","email":"devops@terminus.com"}],"_npmUser":{"name":"terminus_devops","email":"devops@terminus.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ui-expansion-panel_1.0.1_1591323396009_0.8511916915243865"},"_hasShrinkwrap":false},"1.0.2":{"name":"@terminus/ui-expansion-panel","version":"1.0.2","license":"MIT","author":{"name":"@terminus"},"private":false,"homepage":"https://github.com/GetTerminus/terminus-oss","repository":{"type":"git","url":"git+https://github.com/GetTerminus/terminus-oss.git"},"bugs":{"url":"https://github.com/GetTerminus/terminus-oss/issues"},"publishConfig":{"access":"public","tag":"next","directory":"../../../dist/libs/ui/expansion-panel"},"peerDependencies":{"@angular/animations":"^9.1.0","@angular/cdk":"^9.1.0","@angular/common":"^9.1.0","@angular/core":"^9.1.0","@angular/platform-browser":"^9.1.0","@terminus/design-tokens":"^2.0.2","@terminus/ngx-tools":"^8.0.5","rxjs":"^6.5.0"},"main":"bundles/terminus-ui-expansion-panel.umd.js","module":"fesm5/terminus-ui-expansion-panel.js","es2015":"fesm2015/terminus-ui-expansion-panel.js","esm5":"esm5/terminus-ui-expansion-panel.js","esm2015":"esm2015/terminus-ui-expansion-panel.js","fesm5":"fesm5/terminus-ui-expansion-panel.js","fesm2015":"fesm2015/terminus-ui-expansion-panel.js","typings":"terminus-ui-expansion-panel.d.ts","metadata":"terminus-ui-expansion-panel.metadata.json","sideEffects":false,"dependencies":{"tslib":"^1.10.0"},"readme":"

Expansion Panel

\n\n[![CI/CD Status][github-action-badge]][github-action-link] [![Codecov][codecov-badge]][codecov-project] [![MIT License][license-image]][license-url] \n[![NPM version][npm-version-image]][npm-package] [![Github release][gh-release-badge]][gh-releases] [![Library size][file-size-badge]][raw-distribution-js]\n\nExpansion panel & accordion components.\n\n\n\n**Table of Contents**\n\n- [Usage](#usage)\n - [Panel](#panel)\n - [Title and description](#title-and-description)\n - [Disable a panel](#disable-a-panel)\n - [Default a panel open](#default-a-panel-open)\n - [Lazy loaded content](#lazy-loaded-content)\n - [Transparent mode](#transparent-mode)\n - [Panel events](#panel-events)\n - [Custom trigger heights](#custom-trigger-heights)\n - [Manual control](#manual-control)\n - [Accordion](#accordion)\n - [Allow multiple panels to be open](#allow-multiple-panels-to-be-open)\n - [Accordion events](#accordion-events)\n - [Accordion as a stepper](#accordion-as-a-stepper)\n - [Hide toggle](#hide-toggle)\n - [Action row](#action-row)\n - [Open or close all panels](#open-or-close-all-panels)\n- [Test Helpers](#test-helpers)\n\n\n\n\n## Usage\n\n### Panel\n\nThe most basic usage is a single panel with a trigger:\n\n```html\n\n \n Here is my trigger!\n \n\n

And here is my standard panel content.

\n\n```\n\n> NOTE: Without a trigger, the panel will not be visible.\n\n\n#### Title and description\n\nTrigger text can be split into `title` and `description` using the `TsExpansionPanelTitleComponent` and\n`TsExpansionPanelDescriptionComponent` respectively.\n\n```html\n\n\n Here is my trigger!\n\n\n\n\n\n \n My title\n \n\n \n My description\n \n\n```\n\n\n#### Disable a panel\n\nThe `isDisabled` flag will disable a panel and it's trigger:\n\n```html\n\n \n Here is my trigger!\n \n\n

I will never be seen.

\n\n```\n\n\n#### Default a panel open\n\nThe `isExpanded` flag will change the state of a panel. This can be used to default to a specific state or to dynamically change the state.\n\n```html\n\n \n Here is my trigger!\n \n\n

I'll be visible by default!

\n\n```\n\n\n#### Lazy loaded content\n\nPanel content can be lazily loaded by using a template with the `tsExpansionPanelContent` directive. The template will not be loaded until\nthe panel is opened for the first time. The content will remain in the DOM until the panel is destroyed.\n\n```html\n\n \n Here is my trigger!\n \n\n \n Here is my deferred template!\n \n\n```\n\n#### Transparent mode\nExpansion panel with transparent mode on has no box shadow and padding on the side. It's default to `false`.\n\n```html\n\n \n Here is my trigger!\n \n\n \n Here is my deferred template!\n \n\n```\n\n\n#### Panel events\n\n| Event | Description | Payload |\n|:-----------------|:---------------------------------------------------|:----------|\n| `opened` | Fired when the panel is opened | `void` |\n| `afterExpand` | Fired after the panel expansion animation finishes | `void` |\n| `closed` | Fired when the panel is closed | `void` |\n| `afterCollapse` | Fired after the panel collapse animation finishes | `void` |\n| `expandedChange` | Fired when the panel state changes | `boolean` |\n| `destroyed` | Fired when the panel is destroyed | `void` |\n\n```html\n...\n```\n\n\n#### Custom trigger heights\n\nCustom heights can be set for a trigger's collapsed and/or expanded state.\n\n```html\n\n \n Panel Trigger (100px -> 200px)\n\n And here is my standard panel content.\n\n```\n\n#### Manual control\n\nPanels can be programmatically opened, closed or toggled through a reference to the instance:\n\n```typescript\n@ViewChild(TsExpansionPanelComponent, {static: false})\npublic panel: TsExpansionPanelComponent;\n\n...\n\npanel.open();\npanel.close();\npanel.toggle();\n```\n\n> NOTE: Disabled panels cannot be controlled with these methods. Disabled panels can _only_ be controlled via the `isExpanded` input.\n\n\n### Accordion\n\nAn accordion is created by wrapping two or more `TsExpansionPanelComponent`s inside a `TsAccordionComponent`.\n\n```html\n\n ...\n ...\n\n```\n\n\n#### Allow multiple panels to be open\n\nBy default an accordion can only have a single panel open at a time. This functionality can be change with the `multi` input.\n\n```html\n\n ...\n ...\n\n```\n\n\n#### Accordion events\n\n| Event | Description | Payload |\n|:------------|:--------------------------------------|:--------|\n| `destroyed` | Fired when the accordion is destroyed | `void` |\n\n```html\n...\n```\n\n#### Accordion as a stepper\n\nAn accordion can function as a stepper which can be useful for guided flows. To facilitate this we can use a combination of `hideToggle` and\nthe `ts-expansion-panel-action-row`.\n\n```html\n\n\n \n \n Step 1\n\n And here is my standard panel content.\n\n \n Next\n \n \n\n \n \n Step 2\n\n And here is my standard panel content.\n\n \n Previous\n Next\n \n \n\n \n \n Step 3\n\n And here is my standard panel content.\n\n \n Previous\n End\n \n \n\n```\n\n#### Hide toggle\n\nWhen an accordion is controlled programmatically, the toggle icon can be hidden to avoid confusion for the user. Setting `hideToggle` on the\naccordion will hide the toggle icon for *all panels within*.\n\n> NOTE: This should _only_ be used in cases when the accordion is functioning as a stepper.\n\n```html\n\n ...\n ...\n\n```\n\n\n#### Action row\n\nThe action row is useful when an accordion is functioning as a stepper. Controls added within the action row will be right aligned as panel\ncontrols.\n\n> NOTE: See [Accordion as a stepper](https://github.com/GetTerminus/terminus-ui/blob/master/projects/library/expansion-panel/src/expansion-panel.component.md#accordion-as-a-stepper) for a complete example.\n\n```html\n\n \n Step 1\n \n\n And here is my standard panel content.\n\n \n \n \n\n```\n\n\n#### Open or close all panels\n\nAn accordion can programmatically open or close all panels at once.\n\n```typescript\n@ViewChild(TsAccordionComponent, {static: false})\npublic accordion: TsAccordionComponent;\n\n...\n\naccordion.openAll();\naccordion.closeAll();\n```\n\n> NOTE: These methods will *not* change the state of disabled panels.\n\n\n## Test Helpers\n\nSome helpers are exposed to assist with testing. These are imported from `@terminus/ui-expansion-panel/testing`;\n\n[[source]][test-helpers-src]\n\n| Function |\n|--------------------------------|\n| `getAllPanelDebugElements` |\n| `getAllPanelInstances` |\n| `getPanelDebugElement` |\n| `getPanelInstance` |\n| `getPanelElement` |\n| `getPanelBodyElement` |\n| `getPanelBodyContentElement` |\n| `getAllAccordionDebugElements` |\n| `getAllAccordionInstances` |\n| `getAccordionInstance` |\n| `getAccordionDebugElement` |\n| `getAccordionElement` |\n| `getTriggerDebugElement` |\n| `getTriggerInstance` |\n| `getTriggerElement` |\n| `getTriggerTitleElement` |\n| `getTriggerDescriptionElement` |\n| `getPanelActionRow` |\n| `togglePanel` |\n\n\n\n[test-helpers-src]: testing/src/test-helpers.ts\n[license-url]: https://github.com/GetTerminus/terminus-oss/blob/master/LICENSE\n[license-image]: http://img.shields.io/badge/license-MIT-blue.svg\n[codecov-project]: https://codecov.io/gh/GetTerminus/terminus-oss\n[codecov-badge]: https://codecov.io/gh/GetTerminus/terminus-oss/branch/master/graph/badge.svg\n[npm-version-image]: http://img.shields.io/npm/v/@terminus/ui-button.svg\n[npm-package]: https://www.npmjs.com/package/@terminus/ui-button\n[gh-release-badge]: https://img.shields.io/github/release/GetTerminus/terminus-oss.svg\n[gh-releases]: https://github.com/GetTerminus/terminus-ui/releases/\n[github-action-badge]: https://github.com/GetTerminus/terminus-oss/workflows/Release%20CI/badge.svg\n[github-action-link]: https://github.com/GetTerminus/terminus-oss/actions?query=workflow%3A%22CI+Release%22\n[file-size-badge]: http://img.badgesize.io/https://unpkg.com/@terminus/ui-button/bundles/terminus-ui-button.umd.min.js?compression=gzip\n[raw-distribution-js]: https://unpkg.com/@terminus/ui-button/bundles/terminus-ui-button.umd.js\n","readmeFilename":"README.md","description":"

Expansion Panel

","_id":"@terminus/ui-expansion-panel@1.0.2","_nodeVersion":"12.10.0","_npmVersion":"6.10.3","dist":{"integrity":"sha512-MF1nrTdePXUb+sSJGxuv1I12VYl6azhoy5RFWM3841DZiv4KP11Q6n5NSQFk7O8zZGaF9SbVRRzeIKwXpEcvig==","shasum":"e58ead592ccae5e86a6b0308492694af89b61840","tarball":"https://registry.npmjs.org/@terminus/ui-expansion-panel/-/ui-expansion-panel-1.0.2.tgz","fileCount":112,"unpackedSize":762896,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe4SzBCRA9TVsSAnZWagAARN8P/iZ/vJWMfR48pN/xqI4Y\nF8POusE3adggh/8pVtLNHvzo7Xw/Jsw4FGxKSkvTJAlgTNbkp9byGUHyKI+A\nai5tQFTDAiOSCrf4DnTJZpIhGpk0SiOiU1qTdaD4HjA1r/ITY/JhN5ubcTIq\ncQaGLtzjlYmq6ZDwFmxzR8r/lGiXkLF77P3X45T/jmSZH/SVYMwgwpR+jZax\nH+7k7tzSnqFhaRODoVfUfvCGWHlJcVLEJVsW8yqscTuxB+v9bIKwzkyv95Lw\n0tHb76sWmxA45SMnHc32hxUu3S15x32uwMl28GcsN3Ec9tEc9BP6CvqHIkWY\n+5l34+pIG1HL1tWJH0e0pkrXUr/Kg9+hG4TXKE2IYcW0D4lqowk/KwmKE/AK\nTlgrJIKJq+capYrvZ0k1YU42rfNQHjK5phLtHKOW/IsnA//4Q9mWX+R7qsd/\n/H3/YJ438XA1IiF5leLoXVqV0URsVvfZ+OO4ejzjBd8+jjAlVZ4USTRsulNG\nnVI8WqI/iGfj/5gyXc5bhKSxh1hNAJ0pcgYwmQByDLcmDw78Pj1dQDA16kbl\ntPLY/ymkZ0dqfHQhmHV/PyB4n130ZvZjWlx1LMVUB1km3g0b1xmIbW8aEdOU\nZ1E/LzVeOiEu5L8W7Szae1A6drxErhnOxJWp+PD5eMs7UptwPMD3r7SM5GDy\nGOJs\r\n=nvDB\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICPldfLfUf5YZWcOhCt+rCm+656C0kog0+cp0d6txka8AiEAvOBc/0YY0HZxxqNWh9eUu0YYXjabZG53lUplAVH7pYQ="}]},"maintainers":[{"name":"atlwendy","email":"atlwendy@gmail.com"},{"name":"benjamincharity","email":"ben@benjamincharity.com"},{"name":"bmalinconico-terminus","email":"brian.malinconico@terminus.com"},{"name":"terminus_devops","email":"devops@terminus.com"}],"_npmUser":{"name":"benjamincharity","email":"ben@benjamincharity.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ui-expansion-panel_1.0.2_1591815361093_0.562600821646853"},"_hasShrinkwrap":false},"1.0.3":{"name":"@terminus/ui-expansion-panel","version":"1.0.3","license":"MIT","author":{"name":"@terminus"},"private":false,"homepage":"https://github.com/GetTerminus/terminus-oss","repository":{"type":"git","url":"git+https://github.com/GetTerminus/terminus-oss.git"},"bugs":{"url":"https://github.com/GetTerminus/terminus-oss/issues"},"publishConfig":{"access":"public","tag":"next","directory":"../../../dist/libs/ui/expansion-panel"},"peerDependencies":{"@angular/animations":"^9.1.0","@angular/cdk":"^9.1.0","@angular/common":"^9.1.0","@angular/core":"^9.1.0","@angular/platform-browser":"^9.1.0","@terminus/design-tokens":"^2.0.2","@terminus/ngx-tools":"^8.0.5","rxjs":"^6.5.0"},"main":"bundles/terminus-ui-expansion-panel.umd.js","module":"fesm5/terminus-ui-expansion-panel.js","es2015":"fesm2015/terminus-ui-expansion-panel.js","esm5":"esm5/terminus-ui-expansion-panel.js","esm2015":"esm2015/terminus-ui-expansion-panel.js","fesm5":"fesm5/terminus-ui-expansion-panel.js","fesm2015":"fesm2015/terminus-ui-expansion-panel.js","typings":"terminus-ui-expansion-panel.d.ts","metadata":"terminus-ui-expansion-panel.metadata.json","sideEffects":false,"dependencies":{"tslib":"^1.10.0"},"description":"

Expansion Panel

","_id":"@terminus/ui-expansion-panel@1.0.3","_nodeVersion":"12.18.0","_npmVersion":"lerna/3.22.1/node@v12.18.0+x64 (linux)","dist":{"integrity":"sha512-cWhHTeyoHmnrlTFIdNvEtApAsg7gqjnC2qL4zFLaGELOJZMPSNayfXkjBuKMGgxtPiNXv9yplrEUe+mSnDguzw==","shasum":"8552bc28c1c2f70c32b8cc022264fd1c68042b81","tarball":"https://registry.npmjs.org/@terminus/ui-expansion-panel/-/ui-expansion-panel-1.0.3.tgz","fileCount":113,"unpackedSize":764162,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe4j0rCRA9TVsSAnZWagAAA2YP/iOoObfjzXZxPcmvpGDv\nBot6ojcpSmmzNSs36GADA7M9esJyOFSEzF1oLCo8U92D5+X5LF9raGy9lKv/\nuFJzJ/JxIs5NTirF3kTkSTDf/H+Q8PMHgC1FpI4xxqFbYJfqp/souRgoe4Eq\nPjvp7wd+QnXX/7SYdJXvV3uMhlXc+Y5UgeFsq4wfmFiQBsVNpKrDR0hS7OB3\ntWhtv+hG1acSA2i7oyQAq8Xv387ddphnkbySDKAZcVdkf9VHX/E3Ndmae6o8\nE5uWOUag6cZPIaXLCysXVVa4RFKMLVMElSRdI1ybYoU9LOqoFHL15xd9o/mw\nt3Vm61PwxK2cJuBJ1yBgS4ttNt99TGmBdksLTm6L8+Udily95taF0IO0DcHH\nIX1A6qVddZVrkf3TUuNHAu+AynhRxdtAns6UGnzz9FzScbYMe3myjogmIRjm\n0w58l8dFRIfwPeNgpboKxqbvDKcLo/xOlcGMSUUFREwO8Vjn8rX9cqYCt/uV\nTNpN719krvOJ4wtIGgiilMa/KxcIFtqkdfNZ++fTNLM5HqWs8gQgdAzHVdWd\nGmo/K3Fx7gf56spYCc4AcI7Os0TT/3+pEcr3uf6ENWaNn8EHO+oZZkWdTf/E\nkgGjx8Y2O+daXD0jrnvUVgpH2Ve5x6lNk3MXrwXgD2pcF56EpeO0IQXyBMJH\nbr5L\r\n=ksVe\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCbssjcRXJzCkC9S/N3a/bh+HbltYNzV5fQqzsnk85lvgIhAM8JB9tI5yiIwNy3Ls4W1Om5937tfLTQHRTwbc2hAWoj"}]},"maintainers":[{"name":"atlwendy","email":"atlwendy@gmail.com"},{"name":"benjamincharity","email":"ben@benjamincharity.com"},{"name":"bmalinconico-terminus","email":"brian.malinconico@terminus.com"},{"name":"terminus_devops","email":"devops@terminus.com"}],"_npmUser":{"name":"terminus_devops","email":"devops@terminus.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ui-expansion-panel_1.0.3_1591885098767_0.5046504409159811"},"_hasShrinkwrap":false},"1.0.4":{"name":"@terminus/ui-expansion-panel","version":"1.0.4","license":"MIT","author":{"name":"@terminus"},"private":false,"homepage":"https://github.com/GetTerminus/terminus-oss","repository":{"type":"git","url":"git+https://github.com/GetTerminus/terminus-oss.git"},"bugs":{"url":"https://github.com/GetTerminus/terminus-oss/issues"},"publishConfig":{"access":"public","tag":"next","directory":"../../../dist/libs/ui/expansion-panel"},"peerDependencies":{"@angular/animations":"^9.1.0","@angular/cdk":"^9.1.0","@angular/common":"^9.1.0","@angular/core":"^9.1.0","@angular/platform-browser":"^9.1.0","@terminus/design-tokens":"^2.0.2","@terminus/ngx-tools":"^8.0.5","rxjs":"^6.5.0"},"main":"bundles/terminus-ui-expansion-panel.umd.js","module":"fesm5/terminus-ui-expansion-panel.js","es2015":"fesm2015/terminus-ui-expansion-panel.js","esm5":"esm5/terminus-ui-expansion-panel.js","esm2015":"esm2015/terminus-ui-expansion-panel.js","fesm5":"fesm5/terminus-ui-expansion-panel.js","fesm2015":"fesm2015/terminus-ui-expansion-panel.js","typings":"terminus-ui-expansion-panel.d.ts","metadata":"terminus-ui-expansion-panel.metadata.json","sideEffects":false,"dependencies":{"tslib":"^1.10.0"},"description":"

Expansion Panel

","_id":"@terminus/ui-expansion-panel@1.0.4","_nodeVersion":"12.18.0","_npmVersion":"lerna/3.22.1/node@v12.18.0+x64 (linux)","dist":{"integrity":"sha512-+DA88HZ0YjUomKZlaLgfvxEFPk2rUL9eCsJgy+1IXHZZ02pgWf/aYrJxFhFrBW8BOn3bhmmPO/rKR2iDwTYN9Q==","shasum":"d9b1cc3e196a327c9428a870a86df81bcc43512f","tarball":"https://registry.npmjs.org/@terminus/ui-expansion-panel/-/ui-expansion-panel-1.0.4.tgz","fileCount":113,"unpackedSize":764259,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8iEmCRA9TVsSAnZWagAAzQEP/RoIojBuzbHgWjm2feWm\n0DkVbhaW3KmLyCHMdHIQRILE6a8kXbuDl7DWfNyDlqxz5/RZl2nvQIQ9UZGG\nGtjIyC4NIY8BekhGGrunVp+KlSX4+JzT9X9ESlep2AGd13V1eq5RvxqMgJiR\n4/GW2vGqOqKmDVv8sxcDXzT7NoeP2YnbKn1mGNNREyqeUbW57yPi5TJZVEZC\nZez7DhrOdRl+AoWRUt8qzbYSc5+D/Tc3kjlADIeRs3E4Eb1NhkEZ68VvBg9t\nWM4inOws4CjOfnFYe9bPalxQhYj7lbyJV9/BxAL9UybdqfyVJ1uL6tFG1s+i\n1rQUJZIH1TmUFOIRYuKiRTbEOR9c0jDFqlb+GgEla4pggzBc5/14ajrtgpz3\n0cObNGNvTSJZneeOwF8b9GRdLH89TH3q7q7Co314hPnlQUaJIteb4HRxwE+u\n+vua9nv1hMMZojvmyCcZQ2lUU+IM++wAhVi/3nb8RU7TX0x8vutxV8T5Dk4j\nI+tPQsHHFM2nzTXbdRNyIA+Dkc+lcxhO6UOxajdxRXVZvwqWALW698jnSa1m\nKOYOEMnBWsJOw9YZKXNsdBgCvUual+ct5ZvCndk26NsePZL8Kht3Y5XWMb6N\nkXHifBWCCd78qHRgJRU2aBEhVKhxg/l/B1S6aD8DmV2XgTOzm6soPbAYTkn5\nKeTs\r\n=YgP7\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICvcXCpPPSBZKeNRP6KVwrFbldVQwj0UF/NEOIVVUZ3BAiBHthXtNHp+6uQ3PidLmVrqAAsFBHbKG5nDVODLbjSTGw=="}]},"maintainers":[{"name":"atlwendy","email":"atlwendy@gmail.com"},{"name":"benjamincharity","email":"ben@benjamincharity.com"},{"name":"bmalinconico-terminus","email":"brian.malinconico@terminus.com"},{"name":"terminus_devops","email":"devops@terminus.com"}],"_npmUser":{"name":"terminus_devops","email":"devops@terminus.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ui-expansion-panel_1.0.4_1592926501861_0.805810463708611"},"_hasShrinkwrap":false},"1.0.5":{"name":"@terminus/ui-expansion-panel","version":"1.0.5","license":"MIT","author":{"name":"@terminus"},"private":false,"homepage":"https://github.com/GetTerminus/terminus-oss","repository":{"type":"git","url":"git+https://github.com/GetTerminus/terminus-oss.git"},"bugs":{"url":"https://github.com/GetTerminus/terminus-oss/issues"},"publishConfig":{"access":"public","tag":"next","directory":"../../../dist/libs/ui/expansion-panel"},"peerDependencies":{"@angular/animations":"^9.1.0","@angular/cdk":"^9.1.0","@angular/common":"^9.1.0","@angular/core":"^9.1.0","@angular/platform-browser":"^9.1.0","@terminus/design-tokens":"^2.0.2","@terminus/ngx-tools":"^8.0.5","rxjs":"^6.5.0"},"main":"bundles/terminus-ui-expansion-panel.umd.js","module":"fesm5/terminus-ui-expansion-panel.js","es2015":"fesm2015/terminus-ui-expansion-panel.js","esm5":"esm5/terminus-ui-expansion-panel.js","esm2015":"esm2015/terminus-ui-expansion-panel.js","fesm5":"fesm5/terminus-ui-expansion-panel.js","fesm2015":"fesm2015/terminus-ui-expansion-panel.js","typings":"terminus-ui-expansion-panel.d.ts","metadata":"terminus-ui-expansion-panel.metadata.json","sideEffects":false,"dependencies":{"tslib":"^1.10.0"},"description":"

Expansion Panel

","_id":"@terminus/ui-expansion-panel@1.0.5","_nodeVersion":"12.18.1","_npmVersion":"lerna/3.22.1/node@v12.18.1+x64 (linux)","dist":{"integrity":"sha512-IIpYz1u3A0zp9/oWsA25HBFe1ercKc6RLNOd6ziVx1OpjFt8nc5sRsxJdW64Fust2ZYMS464DRjJZBC/fkrxmg==","shasum":"1ca977cb16866dec134ea38bcf857765b39fc4c0","tarball":"https://registry.npmjs.org/@terminus/ui-expansion-panel/-/ui-expansion-panel-1.0.5.tgz","fileCount":113,"unpackedSize":764486,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfBJcMCRA9TVsSAnZWagAAjI0P/2i8j62pAY6VOZkq0vyN\nK7SIY9GAovjKCC9n9E0vn2+N7X8k7rrrokPgt+CTSYq9snkHiwqXPXXw1nPP\nZBAr0DFDR4X12i+nIOOI754hd5ALhaEjZoo3Ko4bViFBbigTBZAFp8/rnK/J\nbqyWNNQxU4KFXWZATzd6GZJoENzeuE0OBU9NlBjzL7hy/IwRhL5BL9v1DzFJ\niaQRGUH7HONebPr3ocusQJh5dSqlNfV41CA+28gFPY8KfiNJPT01Pysxwc+6\nCgD5CgDrnm/jPxtVspnSVCxhEjf4qMZgxuPcnmus6VcCo3iUDWethJeu6LUU\nmCAV3qN7PgBHCMG+OY3QFKSe9Fu5hYM7MOR6nFikAb6Itc5tESqMdCRLqPSX\nQID0Kxwk7DYJ8d9dKwPY5N3oDUNShoM9T9zBu+hCaTDy17Rx6n4NV76dgW9u\nlIqO4uNfOIMMBar9C3B0EQB923CrMOpBp95/1mg19/G3JJmEIFuE0fLJMNnI\nLgSSy6zSDVuhfYUFyORp9pHj3v8PInLiyAOMVqLLFTzmD7xvCEVWs0qGhjTA\noX4ya0FL9JE9LdAzcF3IIwUsQupXoPMhxOjCWVelFwfvmLtbSikn+AgtXk9Q\nod9c3e2iWd8Tnp0BGhagiBauEXNlxTCC7k7rAy/BZ71cfNNQ4MxDtFnrAxPt\nlGel\r\n=i3SG\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDileqf8L9mayzovHbjCHpGWTKaVX0RHkEU32fwModdhgIgeXll+m+ZQ+AAgOwPLK8+9mYFGX5p/gvwf4eI13076hg="}]},"maintainers":[{"name":"atlwendy","email":"atlwendy@gmail.com"},{"name":"benjamincharity","email":"ben@benjamincharity.com"},{"name":"bmalinconico-terminus","email":"brian.malinconico@terminus.com"},{"name":"terminus_devops","email":"devops@terminus.com"}],"_npmUser":{"name":"terminus_devops","email":"devops@terminus.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ui-expansion-panel_1.0.5_1594136331764_0.18167977970235683"},"_hasShrinkwrap":false},"1.0.6":{"name":"@terminus/ui-expansion-panel","version":"1.0.6","license":"MIT","author":{"name":"@terminus"},"private":false,"homepage":"https://github.com/GetTerminus/terminus-oss","repository":{"type":"git","url":"git+https://github.com/GetTerminus/terminus-oss.git"},"bugs":{"url":"https://github.com/GetTerminus/terminus-oss/issues"},"publishConfig":{"access":"public","tag":"next","directory":"../../../dist/libs/ui/expansion-panel"},"peerDependencies":{"@angular/animations":"^9.1.0","@angular/cdk":"^9.1.0","@angular/common":"^9.1.0","@angular/core":"^9.1.0","@angular/platform-browser":"^9.1.0","@terminus/design-tokens":"^2.0.2","@terminus/ngx-tools":"^8.0.5","rxjs":"^6.5.0"},"schematics":"./schematics/collection.json","main":"bundles/terminus-ui-expansion-panel.umd.js","module":"fesm5/terminus-ui-expansion-panel.js","es2015":"fesm2015/terminus-ui-expansion-panel.js","esm5":"esm5/terminus-ui-expansion-panel.js","esm2015":"esm2015/terminus-ui-expansion-panel.js","fesm5":"fesm5/terminus-ui-expansion-panel.js","fesm2015":"fesm2015/terminus-ui-expansion-panel.js","typings":"terminus-ui-expansion-panel.d.ts","metadata":"terminus-ui-expansion-panel.metadata.json","sideEffects":false,"dependencies":{"tslib":"^1.10.0","@angular-devkit/schematics":"9.1.9","@schematics/angular":"10.0.0"},"readme":"

Expansion Panel

\n\n[![CI/CD Status][github-action-badge]][github-action-link] [![Codecov][codecov-badge]][codecov-project] [![MIT License][license-image]][license-url] \n[![NPM version][npm-version-image]][npm-package] [![Github release][gh-release-badge]][gh-releases] [![Library size][file-size-badge]][raw-distribution-js]\n\nExpansion panel & accordion components.\n\n\n\n**Table of Contents**\n\n- [Installation](#installation)\n - [Packages that need to be installed](#packages-that-need-to-be-installed)\n - [Modules that need to be in NgModule](#modules-that-need-to-be-in-ngmodule)\n- [Usage](#usage)\n - [Panel](#panel)\n - [Title and description](#title-and-description)\n - [Disable a panel](#disable-a-panel)\n - [Default a panel open](#default-a-panel-open)\n - [Lazy loaded content](#lazy-loaded-content)\n - [Transparent mode](#transparent-mode)\n - [Panel events](#panel-events)\n - [Custom trigger heights](#custom-trigger-heights)\n - [Manual control](#manual-control)\n - [Accordion](#accordion)\n - [Allow multiple panels to be open](#allow-multiple-panels-to-be-open)\n - [Accordion events](#accordion-events)\n - [Accordion as a stepper](#accordion-as-a-stepper)\n - [Hide toggle](#hide-toggle)\n - [Action row](#action-row)\n - [Open or close all panels](#open-or-close-all-panels)\n- [Test Helpers](#test-helpers)\n\n\n\n## Installation\n\n### Packages that need to be installed\n\n * @angular/cdk\n * @angular/common\n * @angular/core\n * @angular/flex-layout\n * @angular/forms\n * @angular/platform-browser\n * @terminus/design-tokens\n * @terminus/ngx-tools\n * @terminus/ui-utilities\n * @terminus/ui-expansion-panel\n * date-fns\n * tslib\n\nUsing `ng add` command can help getting all the dependencies installed:\n\n```bash\n ng add @terminus/ui-expansion-panel\n```\n\n### Modules that need to be in NgModule\n\n * BrowserAnimationsModule,\n * TsExpansionPanelModule,\n\n## Usage\n\n### Panel\n\nThe most basic usage is a single panel with a trigger:\n\n```html\n\n \n Here is my trigger!\n \n\n

And here is my standard panel content.

\n\n```\n\n> NOTE: Without a trigger, the panel will not be visible.\n\n\n#### Title and description\n\nTrigger text can be split into `title` and `description` using the `TsExpansionPanelTitleComponent` and\n`TsExpansionPanelDescriptionComponent` respectively.\n\n```html\n\n\n Here is my trigger!\n\n\n\n\n\n \n My title\n \n\n \n My description\n \n\n```\n\n\n#### Disable a panel\n\nThe `isDisabled` flag will disable a panel and it's trigger:\n\n```html\n\n \n Here is my trigger!\n \n\n

I will never be seen.

\n\n```\n\n\n#### Default a panel open\n\nThe `isExpanded` flag will change the state of a panel. This can be used to default to a specific state or to dynamically change the state.\n\n```html\n\n \n Here is my trigger!\n \n\n

I'll be visible by default!

\n\n```\n\n\n#### Lazy loaded content\n\nPanel content can be lazily loaded by using a template with the `tsExpansionPanelContent` directive. The template will not be loaded until\nthe panel is opened for the first time. The content will remain in the DOM until the panel is destroyed.\n\n```html\n\n \n Here is my trigger!\n \n\n \n Here is my deferred template!\n \n\n```\n\n#### Transparent mode\nExpansion panel with transparent mode on has no box shadow and padding on the side. It's default to `false`.\n\n```html\n\n \n Here is my trigger!\n \n\n \n Here is my deferred template!\n \n\n```\n\n\n#### Panel events\n\n| Event | Description | Payload |\n|:-----------------|:---------------------------------------------------|:----------|\n| `opened` | Fired when the panel is opened | `void` |\n| `afterExpand` | Fired after the panel expansion animation finishes | `void` |\n| `closed` | Fired when the panel is closed | `void` |\n| `afterCollapse` | Fired after the panel collapse animation finishes | `void` |\n| `expandedChange` | Fired when the panel state changes | `boolean` |\n| `destroyed` | Fired when the panel is destroyed | `void` |\n\n```html\n...\n```\n\n\n#### Custom trigger heights\n\nCustom heights can be set for a trigger's collapsed and/or expanded state.\n\n```html\n\n \n Panel Trigger (100px -> 200px)\n\n And here is my standard panel content.\n\n```\n\n#### Manual control\n\nPanels can be programmatically opened, closed or toggled through a reference to the instance:\n\n```typescript\n@ViewChild(TsExpansionPanelComponent, {static: false})\npublic panel: TsExpansionPanelComponent;\n\n...\n\npanel.open();\npanel.close();\npanel.toggle();\n```\n\n> NOTE: Disabled panels cannot be controlled with these methods. Disabled panels can _only_ be controlled via the `isExpanded` input.\n\n\n### Accordion\n\nAn accordion is created by wrapping two or more `TsExpansionPanelComponent`s inside a `TsAccordionComponent`.\n\n```html\n\n ...\n ...\n\n```\n\n\n#### Allow multiple panels to be open\n\nBy default an accordion can only have a single panel open at a time. This functionality can be change with the `multi` input.\n\n```html\n\n ...\n ...\n\n```\n\n\n#### Accordion events\n\n| Event | Description | Payload |\n|:------------|:--------------------------------------|:--------|\n| `destroyed` | Fired when the accordion is destroyed | `void` |\n\n```html\n...\n```\n\n#### Accordion as a stepper\n\nAn accordion can function as a stepper which can be useful for guided flows. To facilitate this we can use a combination of `hideToggle` and\nthe `ts-expansion-panel-action-row`.\n\n```html\n\n\n \n \n Step 1\n\n And here is my standard panel content.\n\n \n Next\n \n \n\n \n \n Step 2\n\n And here is my standard panel content.\n\n \n Previous\n Next\n \n \n\n \n \n Step 3\n\n And here is my standard panel content.\n\n \n Previous\n End\n \n \n\n```\n\n#### Hide toggle\n\nWhen an accordion is controlled programmatically, the toggle icon can be hidden to avoid confusion for the user. Setting `hideToggle` on the\naccordion will hide the toggle icon for *all panels within*.\n\n> NOTE: This should _only_ be used in cases when the accordion is functioning as a stepper.\n\n```html\n\n ...\n ...\n\n```\n\n\n#### Action row\n\nThe action row is useful when an accordion is functioning as a stepper. Controls added within the action row will be right aligned as panel\ncontrols.\n\n> NOTE: See [Accordion as a stepper](https://github.com/GetTerminus/terminus-ui/blob/release/projects/library/expansion-panel/src/expansion-panel.component.md#accordion-as-a-stepper) for a complete example.\n\n```html\n\n \n Step 1\n \n\n And here is my standard panel content.\n\n \n \n \n\n```\n\n\n#### Open or close all panels\n\nAn accordion can programmatically open or close all panels at once.\n\n```typescript\n@ViewChild(TsAccordionComponent, {static: false})\npublic accordion: TsAccordionComponent;\n\n...\n\naccordion.openAll();\naccordion.closeAll();\n```\n\n> NOTE: These methods will *not* change the state of disabled panels.\n\n\n## Test Helpers\n\nSome helpers are exposed to assist with testing. These are imported from `@terminus/ui-expansion-panel/testing`;\n\n[[source]][test-helpers-src]\n\n| Function |\n|--------------------------------|\n| `getAllPanelDebugElements` |\n| `getAllPanelInstances` |\n| `getPanelDebugElement` |\n| `getPanelInstance` |\n| `getPanelElement` |\n| `getPanelBodyElement` |\n| `getPanelBodyContentElement` |\n| `getAllAccordionDebugElements` |\n| `getAllAccordionInstances` |\n| `getAccordionInstance` |\n| `getAccordionDebugElement` |\n| `getAccordionElement` |\n| `getTriggerDebugElement` |\n| `getTriggerInstance` |\n| `getTriggerElement` |\n| `getTriggerTitleElement` |\n| `getTriggerDescriptionElement` |\n| `getPanelActionRow` |\n| `togglePanel` |\n\n\n\n[test-helpers-src]: testing/src/test-helpers.ts\n[license-url]: https://github.com/GetTerminus/terminus-oss/blob/release/LICENSE\n[license-image]: http://img.shields.io/badge/license-MIT-blue.svg\n[codecov-project]: https://codecov.io/gh/GetTerminus/terminus-oss\n[codecov-badge]: https://codecov.io/gh/GetTerminus/terminus-oss/branch/release/graph/badge.svg\n[npm-version-image]: http://img.shields.io/npm/v/@terminus/ui-button.svg\n[npm-package]: https://www.npmjs.com/package/@terminus/ui-button\n[gh-release-badge]: https://img.shields.io/github/release/GetTerminus/terminus-oss.svg\n[gh-releases]: https://github.com/GetTerminus/terminus-ui/releases/\n[github-action-badge]: https://github.com/GetTerminus/terminus-oss/workflows/Release%20CI/badge.svg\n[github-action-link]: https://github.com/GetTerminus/terminus-oss/actions?query=workflow%3A%22CI+Release%22\n[file-size-badge]: http://img.badgesize.io/https://unpkg.com/@terminus/ui-button/bundles/terminus-ui-button.umd.min.js?compression=gzip\n[raw-distribution-js]: https://unpkg.com/@terminus/ui-button/bundles/terminus-ui-button.umd.js\n","readmeFilename":"README.md","description":"

Expansion Panel

","_id":"@terminus/ui-expansion-panel@1.0.6","_nodeVersion":"12.18.1","_npmVersion":"lerna/3.22.1/node@v12.18.1+x64 (linux)","dist":{"integrity":"sha512-HNtLUtBezjbxvJy7mYIv3qBwZpE3LiNdkc5cqweDy9dk/imkRPGjcOyKkUhgWeHCLzJyYBMqoyMD2xgJGu7XpA==","shasum":"a6c32311dab8a5d1979d12fae0b8480083044f6b","tarball":"https://registry.npmjs.org/@terminus/ui-expansion-panel/-/ui-expansion-panel-1.0.6.tgz","fileCount":113,"unpackedSize":765459,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfDLTRCRA9TVsSAnZWagAATeAP/j6GL7o01A0Kv5l4YKqa\neYNAnqRzD8O+VimVUdQ6+Gqma++5QF3Iw3vUkS1mev3ImnpOa+fjKRNCvSSQ\nqran3SGQT/LXbyEiRWpse8pIX9wRM8Lp9m8CSMO5SKZat1yAqddHWEeuO3sC\nhSzaxCVh0ktdYXjz5DRsr2bfkkvcgDmsnp2rQHyc9/Bzd/fgoIUBYJ5/1wkX\nhw4pJR97rzz2oqWW22HNCwTGh9B71AHjHRdSMr3E/S+2QvrukOn78s3/xAwG\nItdbfM1mvPFoP4EmG33L7nuM+xdyUke8Cw82qQbeCrWpBreh91YBt19z0e9T\n4302wXXC8AOEdI5nR46bGLmjIY3KDpgTgTVC8gmRuG4swd0YtPU3ISJQWeb2\nV569dcFcHo8/0qZtt5Gdf+LcuKsR17W96nPURaGCK7QLjsSg+CtcM9EJf+P2\nqGN4ySWDCBLekJg8xqcUpAdhHktOaB6h2rxAlOHSlL/QH2GTx730NlSvvXBn\n4J4HXn8gZ0xATTcR4kRlS5z9B5AjxENBmz9zisb5yK2fhjeG7OffPrdb/hfY\ndcpqD4ry+sUEndWhqTwLcQ89fr6IVQl0XtiMJUGyU9HazfLGWsRSWcK8aAID\nJmmFzFV0xfyPVMciCt+3JKaGqiJ2jXAmRWEum2UXF9yxrsG6cwnYymWGtvJ6\nDnMB\r\n=7H04\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCpM6iEnc8+eGR9wx+rx7Piz5cjyal9aSYDHV178B3aNwIhAN8l6W7cjFGl/uzgW2YoOrFk0vy6qW5RYdtU8/dZfQv0"}]},"maintainers":[{"name":"atlwendy","email":"atlwendy@gmail.com"},{"name":"benjamincharity","email":"ben@benjamincharity.com"},{"name":"bmalinconico-terminus","email":"brian.malinconico@terminus.com"},{"name":"terminus_devops","email":"devops@terminus.com"}],"_npmUser":{"name":"terminus_devops","email":"devops@terminus.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ui-expansion-panel_1.0.6_1594668241002_0.32641792061054375"},"_hasShrinkwrap":false},"1.0.7":{"name":"@terminus/ui-expansion-panel","version":"1.0.7","license":"MIT","author":{"name":"@terminus"},"private":false,"homepage":"https://github.com/GetTerminus/terminus-oss","repository":{"type":"git","url":"git+https://github.com/GetTerminus/terminus-oss.git"},"bugs":{"url":"https://github.com/GetTerminus/terminus-oss/issues"},"publishConfig":{"access":"public","tag":"next","directory":"../../../dist/libs/ui/expansion-panel"},"peerDependencies":{"@angular/animations":"^9.1.0","@angular/cdk":"^9.1.0","@angular/common":"^9.1.0","@angular/core":"^9.1.0","@angular/platform-browser":"^9.1.0","@terminus/design-tokens":"^2.1.0","@terminus/ngx-tools":"^8.0.5","rxjs":"^6.5.0"},"schematics":"./schematics/collection.json","main":"bundles/terminus-ui-expansion-panel.umd.js","module":"fesm5/terminus-ui-expansion-panel.js","es2015":"fesm2015/terminus-ui-expansion-panel.js","esm5":"esm5/terminus-ui-expansion-panel.js","esm2015":"esm2015/terminus-ui-expansion-panel.js","fesm5":"fesm5/terminus-ui-expansion-panel.js","fesm2015":"fesm2015/terminus-ui-expansion-panel.js","typings":"terminus-ui-expansion-panel.d.ts","metadata":"terminus-ui-expansion-panel.metadata.json","sideEffects":false,"dependencies":{"tslib":"^1.10.0","@angular-devkit/schematics":"9.1.9","@schematics/angular":"10.0.0"},"description":"

Expansion Panel

","_id":"@terminus/ui-expansion-panel@1.0.7","_nodeVersion":"12.18.1","_npmVersion":"lerna/3.22.1/node@v12.18.1+x64 (linux)","dist":{"integrity":"sha512-rq4gIjlfwuQmzTJ2N2pWXTGSJcP6KH8QiPrfVue7KgWN0bfaHkMBgom7uGvhMy/RntXtKG1LjVOO9W2qJg6GMw==","shasum":"d108b984cb8a249bfbd952d0a9a0ce85280597d2","tarball":"https://registry.npmjs.org/@terminus/ui-expansion-panel/-/ui-expansion-panel-1.0.7.tgz","fileCount":113,"unpackedSize":752780,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfDN65CRA9TVsSAnZWagAAPYcP+wWxmAKEDKA/yEXaJPvf\nx9UYs6WZefg2QLYKDONCUHtKePp+4TSM+XNdOEtV/1At60+YXWbwxWmvKhdx\nRGWU89vmbcTz3GZ6QDv5DuVnhvB7PyWsKWTMuS4/YAyI/TUHuVRoNT/6OzAc\n9KJt1JoSJ0ArTtGF+U/Nl3HzXiVRpgOkNDr1ntWRliqJBeMc8ht+P1DL0azP\nko9GKcEX141krYkpXAWFsX5QlgKTj1fWl5KAxOZChNA9JuNtgAQQgREuKacJ\nP41vvc/oI6BSCetc3QDXCVSruCWha2GW3nKYV/n4GvEnQ8GqGcpJi4Hq9ftw\nP5tSrUMR2txfK4VgkQ49pnNU40YAqS9pFSW2JzqO23R6B47vPpIsCFFqXxhH\nlWNSLcmOm9d+DYs+kXZWoHHRHTkCaCfdDYz9ycRxhpvnSnpUsRlVMJJ7ovuP\nUUoodK6U5jhesV347AIg01DAAUAcSMC1WEhPuiQXtky6aNMWsJ9+o1QhWsp7\neGjizPhBt9Gsc8WDRAInBKFavZw/HCdSPUBCCQl/iF5GZyuOY9cUSfkMXiDy\n1y9zCyIB9RYEB+F9DPxiYCW1LHQ7vToDgbPk73UYh/vRLnfSKD0UryMyxwEW\n7L1pQAW4c5Ia+ifpDx1RGLimZ8VO/QOEseHofv8RSyJY+V9qZXzXOo1nMAag\nb3WS\r\n=Q/qi\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCpHm7//Al/b2jcK1FdOQrcgKreF+eZFBkJEcQSOFz7xAIhAOONZHMrxeg/cn9ub/Ma7cjk7QHkNk5BzSNJ68uE7TCS"}]},"maintainers":[{"name":"atlwendy","email":"atlwendy@gmail.com"},{"name":"benjamincharity","email":"ben@benjamincharity.com"},{"name":"bmalinconico-terminus","email":"brian.malinconico@terminus.com"},{"name":"terminus_devops","email":"devops@terminus.com"}],"_npmUser":{"name":"terminus_devops","email":"devops@terminus.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ui-expansion-panel_1.0.7_1594678968782_0.7148099727789679"},"_hasShrinkwrap":false},"1.0.8":{"name":"@terminus/ui-expansion-panel","version":"1.0.8","license":"MIT","author":{"name":"@terminus"},"private":false,"homepage":"https://github.com/GetTerminus/terminus-oss","repository":{"type":"git","url":"git+https://github.com/GetTerminus/terminus-oss.git"},"bugs":{"url":"https://github.com/GetTerminus/terminus-oss/issues"},"publishConfig":{"access":"public","tag":"next","directory":"../../../dist/libs/ui/expansion-panel"},"peerDependencies":{"@angular/animations":"^9.1.0","@angular/cdk":"^9.1.0","@angular/common":"^9.1.0","@angular/core":"^9.1.0","@angular/platform-browser":"^9.1.0","@terminus/design-tokens":"^2.1.0","@terminus/ngx-tools":"^8.0.5","rxjs":"^6.5.0"},"schematics":"./schematics/collection.json","main":"bundles/terminus-ui-expansion-panel.umd.js","module":"fesm5/terminus-ui-expansion-panel.js","es2015":"fesm2015/terminus-ui-expansion-panel.js","esm5":"esm5/terminus-ui-expansion-panel.js","esm2015":"esm2015/terminus-ui-expansion-panel.js","fesm5":"fesm5/terminus-ui-expansion-panel.js","fesm2015":"fesm2015/terminus-ui-expansion-panel.js","typings":"terminus-ui-expansion-panel.d.ts","metadata":"terminus-ui-expansion-panel.metadata.json","sideEffects":false,"dependencies":{"tslib":"^1.10.0","@terminus/ui-button":"1.0.12","@terminus/ui-utilities":"1.0.6","@angular/forms":"9.1.11","@terminus/ui-icon":"1.0.7","@angular-devkit/schematics":"9.1.9","@schematics/angular":"10.0.0","@angular/material":"9.2.4","@terminus/ui-card":"1.0.13"},"readme":"

Expansion Panel

\n\n[![CI/CD Status][github-action-badge]][github-action-link] [![Codecov][codecov-badge]][codecov-project] [![MIT License][license-image]][license-url] \n[![NPM version][npm-version-image]][npm-package] [![Github release][gh-release-badge]][gh-releases] [![Library size][file-size-badge]][raw-distribution-js]\n\nExpansion panel & accordion components.\n\n\n\n**Table of Contents**\n\n- [Installation](#installation)\n - [Packages that need to be installed](#packages-that-need-to-be-installed)\n - [Modules that need to be in NgModule](#modules-that-need-to-be-in-ngmodule)\n- [Usage](#usage)\n - [Panel](#panel)\n - [Title and description](#title-and-description)\n - [Disable a panel](#disable-a-panel)\n - [Default a panel open](#default-a-panel-open)\n - [Lazy loaded content](#lazy-loaded-content)\n - [Transparent mode](#transparent-mode)\n - [Panel events](#panel-events)\n - [Custom trigger heights](#custom-trigger-heights)\n - [Manual control](#manual-control)\n - [Accordion](#accordion)\n - [Allow multiple panels to be open](#allow-multiple-panels-to-be-open)\n - [Accordion events](#accordion-events)\n - [Accordion as a stepper](#accordion-as-a-stepper)\n - [Hide toggle](#hide-toggle)\n - [Action row](#action-row)\n - [Open or close all panels](#open-or-close-all-panels)\n- [Test Helpers](#test-helpers)\n\n\n\n## Installation\n\n### Packages that need to be installed\n\n * @angular/cdk\n * @angular/common\n * @angular/core\n * @angular/flex-layout\n * @angular/forms\n * @angular/platform-browser\n * @terminus/design-tokens\n * @terminus/ngx-tools\n * @terminus/ui-utilities\n * @terminus/ui-expansion-panel\n * date-fns\n * tslib\n\nUsing `ng add` command can help getting all the dependencies installed:\n\n```bash\n ng add @terminus/ui-expansion-panel\n```\n\n### Modules that need to be in NgModule\n\n * BrowserAnimationsModule,\n * TsExpansionPanelModule,\n\n## Usage\n\n### Panel\n\nThe most basic usage is a single panel with a trigger:\n\n```html\n\n \n Here is my trigger!\n \n\n

And here is my standard panel content.

\n\n```\n\n> NOTE: Without a trigger, the panel will not be visible.\n\n\n#### Title and description\n\nTrigger text can be split into `title` and `description` using the `TsExpansionPanelTitleComponent` and\n`TsExpansionPanelDescriptionComponent` respectively.\n\n```html\n\n\n Here is my trigger!\n\n\n\n\n\n \n My title\n \n\n \n My description\n \n\n```\n\n\n#### Disable a panel\n\nThe `isDisabled` flag will disable a panel and it's trigger:\n\n```html\n\n \n Here is my trigger!\n \n\n

I will never be seen.

\n\n```\n\n\n#### Default a panel open\n\nThe `isExpanded` flag will change the state of a panel. This can be used to default to a specific state or to dynamically change the state.\n\n```html\n\n \n Here is my trigger!\n \n\n

I'll be visible by default!

\n\n```\n\n\n#### Lazy loaded content\n\nPanel content can be lazily loaded by using a template with the `tsExpansionPanelContent` directive. The template will not be loaded until\nthe panel is opened for the first time. The content will remain in the DOM until the panel is destroyed.\n\n```html\n\n \n Here is my trigger!\n \n\n \n Here is my deferred template!\n \n\n```\n\n#### Transparent mode\nExpansion panel with transparent mode on has no box shadow and padding on the side. It's default to `false`.\n\n```html\n\n \n Here is my trigger!\n \n\n

And here is my standard panel content.

\n\n```\n\n\n#### Panel events\n\n| Event | Description | Payload |\n|:-----------------|:---------------------------------------------------|:----------|\n| `opened` | Fired when the panel is opened | `void` |\n| `afterExpand` | Fired after the panel expansion animation finishes | `void` |\n| `closed` | Fired when the panel is closed | `void` |\n| `afterCollapse` | Fired after the panel collapse animation finishes | `void` |\n| `expandedChange` | Fired when the panel state changes | `boolean` |\n| `destroyed` | Fired when the panel is destroyed | `void` |\n\n```html\n...\n```\n\n\n#### Custom trigger heights\n\nCustom heights can be set for a trigger's collapsed and/or expanded state.\n\n```html\n\n \n Panel Trigger (100px -> 200px)\n\n

And here is my standard panel content.

\n\n```\n\n#### Manual control\n\nPanels can be programmatically opened, closed or toggled through a reference to the instance:\n\n```typescript\n@ViewChild(TsExpansionPanelComponent, {static: false})\npublic panel: TsExpansionPanelComponent;\n\n...\n\npanel.open();\npanel.close();\npanel.toggle();\n```\n\n> NOTE: Disabled panels cannot be controlled with these methods. Disabled panels can _only_ be controlled via the `isExpanded` input.\n\n\n### Accordion\n\nAn accordion is created by wrapping two or more `TsExpansionPanelComponent`s inside a `TsAccordionComponent`.\n\n```html\n\n ...\n ...\n\n```\n\n\n#### Allow multiple panels to be open\n\nBy default an accordion can only have a single panel open at a time. This functionality can be change with the `multi` input.\n\n```html\n\n ...\n ...\n\n```\n\n\n#### Accordion events\n\n| Event | Description | Payload |\n|:------------|:--------------------------------------|:--------|\n| `destroyed` | Fired when the accordion is destroyed | `void` |\n\n```html\n...\n```\n\n#### Accordion as a stepper\n\nAn accordion can function as a stepper which can be useful for guided flows. To facilitate this we can use a combination of `hideToggle` and\nthe `ts-expansion-panel-action-row`.\n\n```html\n\n\n \n \n Step 1\n\n And here is my standard panel content.\n\n \n Next\n \n \n\n \n \n Step 2\n\n And here is my standard panel content.\n\n \n Previous\n Next\n \n \n\n \n \n Step 3\n\n And here is my standard panel content.\n\n \n Previous\n End\n \n \n\n```\n\n#### Hide toggle\n\nWhen an accordion is controlled programmatically, the toggle icon can be hidden to avoid confusion for the user. Setting `hideToggle` on the\naccordion will hide the toggle icon for *all panels within*.\n\n> NOTE: This should _only_ be used in cases when the accordion is functioning as a stepper.\n\n```html\n\n ...\n ...\n\n```\n\n\n#### Action row\n\nThe action row is useful when an accordion is functioning as a stepper. Controls added within the action row will be right aligned as panel\ncontrols.\n\n> NOTE: See [Accordion as a stepper](https://github.com/GetTerminus/terminus-ui/blob/release/projects/library/expansion-panel/src/expansion-panel.component.md#accordion-as-a-stepper) for a complete example.\n\n```html\n\n \n Step 1\n \n\n And here is my standard panel content.\n\n \n \n \n\n```\n\n\n#### Open or close all panels\n\nAn accordion can programmatically open or close all panels at once.\n\n```typescript\n@ViewChild(TsAccordionComponent, {static: false})\npublic accordion: TsAccordionComponent;\n\n...\n\naccordion.openAll();\naccordion.closeAll();\n```\n\n> NOTE: These methods will *not* change the state of disabled panels.\n\n\n## Test Helpers\n\nSome helpers are exposed to assist with testing. These are imported from `@terminus/ui-expansion-panel/testing`;\n\n[[source]][test-helpers-src]\n\n| Function |\n|--------------------------------|\n| `getAllPanelDebugElements` |\n| `getAllPanelInstances` |\n| `getPanelDebugElement` |\n| `getPanelInstance` |\n| `getPanelElement` |\n| `getPanelBodyElement` |\n| `getPanelBodyContentElement` |\n| `getAllAccordionDebugElements` |\n| `getAllAccordionInstances` |\n| `getAccordionInstance` |\n| `getAccordionDebugElement` |\n| `getAccordionElement` |\n| `getTriggerDebugElement` |\n| `getTriggerInstance` |\n| `getTriggerElement` |\n| `getTriggerTitleElement` |\n| `getTriggerDescriptionElement` |\n| `getPanelActionRow` |\n| `togglePanel` |\n\n\n\n[test-helpers-src]: testing/src/test-helpers.ts\n[license-url]: https://github.com/GetTerminus/terminus-oss/blob/release/LICENSE\n[license-image]: http://img.shields.io/badge/license-MIT-blue.svg\n[codecov-project]: https://codecov.io/gh/GetTerminus/terminus-oss\n[codecov-badge]: https://codecov.io/gh/GetTerminus/terminus-oss/branch/release/graph/badge.svg\n[npm-version-image]: http://img.shields.io/npm/v/@terminus/ui-button.svg\n[npm-package]: https://www.npmjs.com/package/@terminus/ui-button\n[gh-release-badge]: https://img.shields.io/github/release/GetTerminus/terminus-oss.svg\n[gh-releases]: https://github.com/GetTerminus/terminus-ui/releases/\n[github-action-badge]: https://github.com/GetTerminus/terminus-oss/workflows/Release%20CI/badge.svg\n[github-action-link]: https://github.com/GetTerminus/terminus-oss/actions?query=workflow%3A%22CI+Release%22\n[file-size-badge]: http://img.badgesize.io/https://unpkg.com/@terminus/ui-button/bundles/terminus-ui-button.umd.min.js?compression=gzip\n[raw-distribution-js]: https://unpkg.com/@terminus/ui-button/bundles/terminus-ui-button.umd.js\n","readmeFilename":"README.md","description":"

Expansion Panel

","_id":"@terminus/ui-expansion-panel@1.0.8","_nodeVersion":"12.18.2","_npmVersion":"lerna/3.22.1/node@v12.18.2+x64 (linux)","dist":{"integrity":"sha512-SJhTvGPxFHtG77LxK37Wm1anIe2TMvOJqBqOIO9m4qhw+HD+3fELQGe37dbVEETuLAaoIl+JbupQ8laCzkOOoQ==","shasum":"60abd4118608faec4202f40ae9315f8faa497835","tarball":"https://registry.npmjs.org/@terminus/ui-expansion-panel/-/ui-expansion-panel-1.0.8.tgz","fileCount":117,"unpackedSize":755811,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGt4WCRA9TVsSAnZWagAAnUYP/1NAsg95qyap19p4EJ3F\nY9v4o4yuTcxelhsl6iJdDWzRL4pNtNezU9D2tNXlJazcrOOpZkyUjlSQXbds\nN8/tQiAr8i6S0fFgA+anvTfGEoCQyKFTXSJwr8eJLJtX0ggOEyS2W9S7uQxW\nZxwZDLRpONo+87oxpSHQaNevQSz6F1B0t77ol8a7RgDLujb1cxv2eMJvgE8l\nC7pIsH695llpl8sNuCJC6FsZ8IYdaW2qIV7uL5laN1g4LgJbSOo8Uz6r+rRx\navD4lOm0PapfSvLALdYccAWvsTEmDB6sY6ilRRXz0k7CRO/zvGrOETFkQznL\n1S0oKtvoUs3MKNwQPB+7pH90Osekqc9auOlbaOEB3Awx0ox8MMOJZI3GxTlh\n2CnHPJRq3bivCMIbvXy8c6XdZf9CpOb77VcYZzWtoMmqdm+ZBtgL4FjNArOH\n2yQt27r0BJChEqE8yC+oWyH8STmi59ZudbcnRu38MOu1fqP2kRKs/Ge0VjMS\n+dj5Np4MtCwldqcveePVJ9d3drnqWpAulxV+o2akl/kA8TEL/sunKEErrB0u\n8g/Pg+tOG0rKyzjEV5HOnmWbYXzdLqByqkV4w35LfvWcttdlFnsN8GtuvyOP\nJAnadpbrEXCnBafBp5F95w8eMZ9ueF7Eaa1nFj3z4aux+8SpGyMkz5S6SdKJ\nwn7E\r\n=/Z+q\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBX/AW/TjFEeoDrGY2MdBo48fTHQeqJX/Rr2U4T0h4KtAiA9ExdiesCr++6REdDOwcQkQwwLOJ0/LTF6vvbWwPgXog=="}]},"maintainers":[{"name":"atlwendy","email":"atlwendy@gmail.com"},{"name":"benjamincharity","email":"ben@benjamincharity.com"},{"name":"bmalinconico-terminus","email":"brian.malinconico@terminus.com"},{"name":"terminus_devops","email":"devops@terminus.com"}],"_npmUser":{"name":"terminus_devops","email":"devops@terminus.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ui-expansion-panel_1.0.8_1595596310593_0.4993752908041842"},"_hasShrinkwrap":false},"1.0.9":{"name":"@terminus/ui-expansion-panel","version":"1.0.9","license":"MIT","author":{"name":"@terminus"},"private":false,"homepage":"https://github.com/GetTerminus/terminus-oss","repository":{"type":"git","url":"git+https://github.com/GetTerminus/terminus-oss.git"},"bugs":{"url":"https://github.com/GetTerminus/terminus-oss/issues"},"publishConfig":{"access":"public","tag":"next","directory":"../../../dist/libs/ui/expansion-panel"},"peerDependencies":{"@angular/animations":"^9.1.0","@angular/cdk":"^9.1.0","@angular/common":"^9.1.0","@angular/core":"^9.1.0","@angular/platform-browser":"^9.1.0","@terminus/design-tokens":"^3.1.0","@terminus/ngx-tools":"^8.0.5","rxjs":"^6.5.0"},"schematics":"./schematics/collection.json","main":"bundles/terminus-ui-expansion-panel.umd.js","module":"fesm5/terminus-ui-expansion-panel.js","es2015":"fesm2015/terminus-ui-expansion-panel.js","esm5":"esm5/terminus-ui-expansion-panel.js","esm2015":"esm2015/terminus-ui-expansion-panel.js","fesm5":"fesm5/terminus-ui-expansion-panel.js","fesm2015":"fesm2015/terminus-ui-expansion-panel.js","typings":"terminus-ui-expansion-panel.d.ts","metadata":"terminus-ui-expansion-panel.metadata.json","sideEffects":false,"dependencies":{"tslib":"^1.10.0","@terminus/ui-button":"2.0.0","@terminus/ui-icon":"2.0.0","@angular-devkit/schematics":"9.1.9","@schematics/angular":"10.0.0","@fortawesome/fontawesome-svg-core":"1.2.30","@fortawesome/angular-fontawesome":"0.6.0","@fortawesome/pro-regular-svg-icons":"5.14.0","@angular/material":"9.2.4","@terminus/ui-card":"2.0.0","@terminus/ui-utilities":"1.0.7","@angular/forms":"9.1.11"},"readme":"

Expansion Panel

\n\n[![CI/CD Status][github-action-badge]][github-action-link] [![Codecov][codecov-badge]][codecov-project] [![MIT License][license-image]][license-url] \n[![NPM version][npm-version-image]][npm-package] [![Library size][file-size-badge]][raw-distribution-js]\n\nExpansion panel & accordion components.\n\n\n\n**Table of Contents**\n\n- [Installation](#installation)\n - [Packages that need to be installed](#packages-that-need-to-be-installed)\n - [Modules that need to be in NgModule](#modules-that-need-to-be-in-ngmodule)\n - [CSS imports](#css-imports)\n - [CSS resources](#css-resources)\n- [Usage](#usage)\n - [Panel](#panel)\n - [Title and description](#title-and-description)\n - [Disable a panel](#disable-a-panel)\n - [Default a panel open](#default-a-panel-open)\n - [Lazy loaded content](#lazy-loaded-content)\n - [Transparent mode](#transparent-mode)\n - [Panel events](#panel-events)\n - [Custom trigger heights](#custom-trigger-heights)\n - [Manual control](#manual-control)\n - [Accordion](#accordion)\n - [Allow multiple panels to be open](#allow-multiple-panels-to-be-open)\n - [Accordion events](#accordion-events)\n - [Accordion as a stepper](#accordion-as-a-stepper)\n - [Hide toggle](#hide-toggle)\n - [Action row](#action-row)\n - [Open or close all panels](#open-or-close-all-panels)\n- [Test Helpers](#test-helpers)\n\n\n\n## Installation\n\n### Packages that need to be installed\n\n- `@angular/cdk`\n- `@angular/common`\n- `@angular/core`\n- `@angular/flex-layout`\n- `@angular/forms`\n- `@angular/platform-browser`\n- `@terminus/design-tokens`\n- `@terminus/ngx-tools`\n- `@terminus/ui-utilities`\n- `@terminus/ui-expansion-panel`\n- `date-fns`\n\nUse the `ng add` command to quickly install all the needed dependencies:\n\n```bash\nng add @terminus/ui-expansion-panel\n```\n\n### Modules that need to be in NgModule\n\n- `BrowserAnimationsModule,`\n- `TsExpansionPanelModule,`\n\n### CSS imports\n\nIn your top level stylesheet, add these imports:\n\n```css\n@import '~@terminus/design-tokens/css/library-design-tokens.css';\n@import '~@terminus/ui-styles/terminus-ui.css';\n``` \n\n### CSS resources\n\nLoad the needed font families by adding this link to the `` of your application:\n\n```css\n\n```\n\n## Usage\n\n### Panel\n\nThe most basic usage is a single panel with a trigger:\n\n```html\n\n \n Here is my trigger!\n \n\n

And here is my standard panel content.

\n\n```\n\n> NOTE: Without a trigger, the panel will not be visible.\n\n#### Title and description\n\nTrigger text can be split into `title` and `description` using the `TsExpansionPanelTitleComponent` and\n`TsExpansionPanelDescriptionComponent` respectively.\n\n```html\n\n\n Here is my trigger!\n\n\n\n\n\n \n My title\n \n\n \n My description\n \n\n```\n\n#### Disable a panel\n\nThe `isDisabled` flag will disable a panel and it's trigger:\n\n```html\n\n \n Here is my trigger!\n \n\n

I will never be seen.

\n\n```\n\n#### Default a panel open\n\nThe `isExpanded` flag will change the state of a panel. This can be used to default to a specific state or to dynamically change the state.\n\n```html\n\n \n Here is my trigger!\n \n\n

I'll be visible by default!

\n\n```\n\n#### Lazy loaded content\n\nPanel content can be lazily loaded by using a template with the `tsExpansionPanelContent` directive. The template will not be loaded until\nthe panel is opened for the first time. The content will remain in the DOM until the panel is destroyed.\n\n```html\n\n \n Here is my trigger!\n \n\n \n Here is my deferred template!\n \n\n```\n\n#### Transparent mode\n\nExpansion panel with transparent mode on has no box shadow and padding on the side. It's default to `false`.\n\n```html\n\n \n Here is my trigger!\n \n\n

And here is my standard panel content.

\n\n```\n\n#### Panel events\n\n| Event | Description | Payload |\n|:-----------------|:---------------------------------------------------|:----------|\n| `opened` | Fired when the panel is opened | `void` |\n| `afterExpand` | Fired after the panel expansion animation finishes | `void` |\n| `closed` | Fired when the panel is closed | `void` |\n| `afterCollapse` | Fired after the panel collapse animation finishes | `void` |\n| `expandedChange` | Fired when the panel state changes | `boolean` |\n| `destroyed` | Fired when the panel is destroyed | `void` |\n\n```html\n...\n```\n\n#### Custom trigger heights\n\nCustom heights can be set for a trigger's collapsed and/or expanded state.\n\n```html\n\n \n Panel Trigger (100px -> 200px)\n\n

And here is my standard panel content.

\n\n```\n\n#### Manual control\n\nPanels can be programmatically opened, closed or toggled through a reference to the instance:\n\n```typescript\n@ViewChild(TsExpansionPanelComponent, {static: false})\npublic panel: TsExpansionPanelComponent;\n\n...\n\npanel.open();\npanel.close();\npanel.toggle();\n```\n\n> NOTE: Disabled panels cannot be controlled with these methods. Disabled panels can _only_ be controlled via the `isExpanded` input.\n\n### Accordion\n\nAn accordion is created by wrapping two or more `TsExpansionPanelComponent`s inside a `TsAccordionComponent`.\n\n```html\n\n ...\n ...\n\n```\n\n#### Allow multiple panels to be open\n\nBy default an accordion can only have a single panel open at a time. This functionality can be change with the `multi` input.\n\n```html\n\n ...\n ...\n\n```\n\n#### Accordion events\n\n| Event | Description | Payload |\n|:------------|:--------------------------------------|:--------|\n| `destroyed` | Fired when the accordion is destroyed | `void` |\n\n```html\n...\n```\n\n#### Accordion as a stepper\n\nAn accordion can function as a stepper which can be useful for guided flows. To facilitate this we can use a combination of `hideToggle` and\nthe `ts-expansion-panel-action-row`.\n\n```html\n\n\n \n \n Step 1\n\n And here is my standard panel content.\n\n \n Next\n \n \n\n \n \n Step 2\n\n And here is my standard panel content.\n\n \n Previous\n Next\n \n \n\n \n \n Step 3\n\n And here is my standard panel content.\n\n \n Previous\n End\n \n \n\n```\n\n#### Hide toggle\n\nWhen an accordion is controlled programmatically, the toggle icon can be hidden to avoid confusion for the user. Setting `hideToggle` on the\naccordion will hide the toggle icon for *all panels within*.\n\n> NOTE: This should _only_ be used in cases when the accordion is functioning as a stepper.\n\n```html\n\n ...\n ...\n\n```\n\n#### Action row\n\nThe action row is useful when an accordion is functioning as a stepper. Controls added within the action row will be right aligned as panel\ncontrols.\n\n> NOTE: See [Accordion as a stepper](https://github.com/GetTerminus/terminus-ui/blob/release/projects/library/expansion-panel/src/expansion-panel.component.md#accordion-as-a-stepper) for a complete example.\n\n```html\n\n \n Step 1\n \n\n And here is my standard panel content.\n\n \n \n \n\n```\n\n#### Open or close all panels\n\nAn accordion can programmatically open or close all panels at once.\n\n```typescript\n@ViewChild(TsAccordionComponent, {static: false})\npublic accordion: TsAccordionComponent;\n\n...\n\naccordion.openAll();\naccordion.closeAll();\n```\n\n> NOTE: These methods will *not* change the state of disabled panels.\n\n## Test Helpers\n\nSome helpers are exposed to assist with testing. These are imported from `@terminus/ui-expansion-panel/testing`;\n\n[[source]][test-helpers-src]\n\n| Function |\n|--------------------------------|\n| `getAllPanelDebugElements` |\n| `getAllPanelInstances` |\n| `getPanelDebugElement` |\n| `getPanelInstance` |\n| `getPanelElement` |\n| `getPanelBodyElement` |\n| `getPanelBodyContentElement` |\n| `getAllAccordionDebugElements` |\n| `getAllAccordionInstances` |\n| `getAccordionInstance` |\n| `getAccordionDebugElement` |\n| `getAccordionElement` |\n| `getTriggerDebugElement` |\n| `getTriggerInstance` |\n| `getTriggerElement` |\n| `getTriggerTitleElement` |\n| `getTriggerDescriptionElement` |\n| `getPanelActionRow` |\n| `togglePanel` |\n\n\n\n[test-helpers-src]: testing/src/test-helpers.ts\n[license-url]: https://github.com/GetTerminus/terminus-oss/blob/release/LICENSE\n[license-image]: http://img.shields.io/badge/license-MIT-blue.svg\n[codecov-project]: https://codecov.io/gh/GetTerminus/terminus-oss\n[codecov-badge]: https://codecov.io/gh/GetTerminus/terminus-oss/branch/release/graph/badge.svg\n[npm-version-image]: http://img.shields.io/npm/v/@terminus/ui-button.svg\n[npm-package]: https://www.npmjs.com/package/@terminus/ui-button\n[github-action-badge]: https://github.com/GetTerminus/terminus-oss/workflows/Release%20CI/badge.svg\n[github-action-link]: https://github.com/GetTerminus/terminus-oss/actions?query=workflow%3A%22CI+Release%22\n[file-size-badge]: http://img.badgesize.io/https://unpkg.com/@terminus/ui-button/bundles/terminus-ui-button.umd.min.js?compression=gzip\n[raw-distribution-js]: https://unpkg.com/@terminus/ui-button/bundles/terminus-ui-button.umd.js\n","readmeFilename":"README.md","description":"

Expansion Panel

","_id":"@terminus/ui-expansion-panel@1.0.9","_nodeVersion":"12.18.2","_npmVersion":"lerna/3.22.1/node@v12.18.2+x64 (linux)","dist":{"integrity":"sha512-wnIUUesD/i9F0NKE30ZTL/HJC3nxuh8KadyA8eNcJfmZ6LBc3IgZIQ8y1mjAJF+oUeS0uHc3XNVOgLE782ElWA==","shasum":"ec400d6b3cf8f69514994094eb279b64c0b4d626","tarball":"https://registry.npmjs.org/@terminus/ui-expansion-panel/-/ui-expansion-panel-1.0.9.tgz","fileCount":117,"unpackedSize":756532,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfHy2KCRA9TVsSAnZWagAArvgP/AluryXgoj13q+XDH11W\nExQqwu5e/xeh7EVuWy6LPKfIpCmrW/hyWjy63atxdd0ibQVcdxxTSTgoIoJ5\n86IQqLtrXxWh2pGm9dlp8r7x0iiBK2e6XK62I60CVawuBjyagINSGbfhxkLi\no9ALuBRjNdzV7EhUwD2VCFbGNS1QskW7KTZEq2eltEBj4WMx0TJnmZE+XUqQ\nI5PaY4Y3lOFiLShin6JuV4sz+OVuJXf/+NbNZOrKhhS3eskXh6nQTQYGxECv\n5hLLMI4FdV2MTuFYopX0qCAqvJ5zCc27dq1Zyamx2L/P0gdZV/h4ssVE8Ihy\nam4CtbFIMDHr3+rmspKO0JQOeN2PRt0tRhbY2Q80o1LGC7LLvZgxuc5IoLOJ\n0+oXws8bESsOv3SPwHyBRt+AZWvWW3C/EID7EDpx3tLOH08cCPIs3tqtkcOY\n/GnAvhaQVfIL0LrfZyL5qLGx8XTGK6yrSdXLMbZuPUWWhVNlPKy+yqkqXlMf\nA4QtDZutkJCy9tHWdPD39ABjovdAfdjJA9RZdi1Mei0HD15XczRYkY3TuSPK\nkOTeCz423lbl42P7EzLgP7ZpIi8uXaiVP4ITl7mp619qIhx1v7gQJARm0bXw\nfOfOcZ1XJSgBJGVG5ICALItRDW+O+/Xvci755EJGErWmIj3ZvlkSfahNhvFJ\nAOG5\r\n=1cvZ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIB8+suEGsx47hHUVLhqctFL6LDOC8sZfoPg/sp6/OanWAiB0drNZk79g/e/C+S3N39XkbAGMePMTE2jH7b0NvjIHeg=="}]},"maintainers":[{"name":"atlwendy","email":"atlwendy@gmail.com"},{"name":"benjamincharity","email":"ben@benjamincharity.com"},{"name":"bmalinconico-terminus","email":"brian.malinconico@terminus.com"},{"name":"terminus_devops","email":"devops@terminus.com"}],"_npmUser":{"name":"terminus_devops","email":"devops@terminus.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ui-expansion-panel_1.0.9_1595878793657_0.9985139281977247"},"_hasShrinkwrap":false},"1.0.10":{"name":"@terminus/ui-expansion-panel","version":"1.0.10","license":"MIT","author":{"name":"@terminus"},"private":false,"homepage":"https://github.com/GetTerminus/terminus-oss","repository":{"type":"git","url":"git+https://github.com/GetTerminus/terminus-oss.git"},"bugs":{"url":"https://github.com/GetTerminus/terminus-oss/issues"},"publishConfig":{"access":"public","tag":"next","directory":"../../../dist/libs/ui/expansion-panel"},"peerDependencies":{"@angular/animations":"^9.1.0","@angular/cdk":"^9.1.0","@angular/common":"^9.1.0","@angular/core":"^9.1.0","@angular/platform-browser":"^9.1.0","@terminus/design-tokens":"^3.1.0","@terminus/ngx-tools":"^8.0.5","rxjs":"^6.5.0"},"schematics":"./schematics/collection.json","main":"bundles/terminus-ui-expansion-panel.umd.js","module":"fesm5/terminus-ui-expansion-panel.js","es2015":"fesm2015/terminus-ui-expansion-panel.js","esm5":"esm5/terminus-ui-expansion-panel.js","esm2015":"esm2015/terminus-ui-expansion-panel.js","fesm5":"fesm5/terminus-ui-expansion-panel.js","fesm2015":"fesm2015/terminus-ui-expansion-panel.js","typings":"terminus-ui-expansion-panel.d.ts","metadata":"terminus-ui-expansion-panel.metadata.json","sideEffects":false,"dependencies":{"tslib":"^1.10.0","@terminus/ui-button":"2.0.1","@terminus/ui-icon":"2.0.1","@angular-devkit/schematics":"9.1.9","@schematics/angular":"10.0.0","@fortawesome/fontawesome-svg-core":"1.2.30","@fortawesome/angular-fontawesome":"0.6.0","@fortawesome/pro-regular-svg-icons":"5.14.0","@angular/material":"9.2.4","@terminus/ui-card":"2.0.1","@terminus/ui-utilities":"1.0.8","@angular/forms":"9.1.11"},"description":"

Expansion Panel

","_id":"@terminus/ui-expansion-panel@1.0.10","_nodeVersion":"12.18.2","_npmVersion":"lerna/3.22.1/node@v12.18.2+x64 (linux)","dist":{"integrity":"sha512-wXbAbfms29ve66JbhV5GLB3I6W06S6NYnaqBJrAE9/19/noLaTfOcU6jjON1OX14g0/dRObMVQp9pXKAzekokg==","shasum":"198a571d94e8417be2d2e1e8838b38401b4d69d3","tarball":"https://registry.npmjs.org/@terminus/ui-expansion-panel/-/ui-expansion-panel-1.0.10.tgz","fileCount":117,"unpackedSize":756839,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIERFCRA9TVsSAnZWagAA+BYQAKJNeqi3sdFaHSdOQcYk\nPStUj/6oSyjwCVTjBBIKVip6Xb+UgLAykptwdLZRh8hgQT/c7VhoCH603WAG\n5kgVWuPk2K9kvnfTLJvxVK/AgK9S5IZVmYLAITACfLT4ijw204wdn1ggUqeJ\n8sYN4WTqrSVdA5AhSjwVeF1d4sMVcIwldQC9vxK5ueP2Ay1+U17rQEcyh7C3\nCM5fe3kC64NZBwN6wVv02TxuoERFRMB5tguyz0XnKgR2lXSHBvVym+JlmPpC\nKkL0J/5nYHuvGMA5+H2QL1yMVFNZs5Q8+T7uMO9Ad8aHO+CBCO1TcEDp/ky/\nYeFlI6dnpGvy7IoDE6YsTzmLp1PjMHCCm8bZqglC4LdQhdOYAn2nPR49Nf01\nKsiaCHCcFl2IDGHqjuvDv7cjCfyv+wVfqJOMQCc9ZwW6HkVfasfeXtbn8L1w\ndoNw1mLU15fEJFauEj2No1mK5y8z/6INxsmPWYmVPrDgfra3LyJP9hDe2641\ngDJK37stsvni4mrS9fFN2G32rNhMVuw2mIPxi4umOJsEayV1qpOd0X9t4tBc\nYWwpYy/QN8G+te0PfYk0iBkFa/v4MtDEzLJvKdepYJWZ22/4k1t4ZT3+dJYj\nRjzFRd4xm48c9dsaosBwwcd5wP9z6HLczq+KX5F5Z48myeoOr6E/kfwVIGsb\ntHFn\r\n=GINf\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCcPcM2M/WT9GvqmcWJELA/y6R48qDTIqOpt9tDkbnWiQIgDwMHrHJA8uG3YO1wjACrp8vvYehzMxYOapq+YQL45mM="}]},"maintainers":[{"name":"atlwendy","email":"atlwendy@gmail.com"},{"name":"benjamincharity","email":"ben@benjamincharity.com"},{"name":"bmalinconico-terminus","email":"brian.malinconico@terminus.com"},{"name":"terminus_devops","email":"devops@terminus.com"}],"_npmUser":{"name":"terminus_devops","email":"devops@terminus.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ui-expansion-panel_1.0.10_1595950149426_0.6368683875137982"},"_hasShrinkwrap":false},"1.0.11":{"name":"@terminus/ui-expansion-panel","version":"1.0.11","license":"MIT","author":{"name":"@terminus"},"private":false,"homepage":"https://github.com/GetTerminus/terminus-oss","repository":{"type":"git","url":"git+https://github.com/GetTerminus/terminus-oss.git"},"bugs":{"url":"https://github.com/GetTerminus/terminus-oss/issues"},"publishConfig":{"access":"public","tag":"next","directory":"../../../dist/libs/ui/expansion-panel"},"peerDependencies":{"@angular/animations":"^9.1.0","@angular/cdk":"^9.1.0","@angular/common":"^9.1.0","@angular/core":"^9.1.0","@angular/platform-browser":"^9.1.0","@terminus/design-tokens":"^3.1.0","@terminus/fe-utilities":"^1.0.0","rxjs":"^6.5.0"},"schematics":"./schematics/collection.json","main":"bundles/terminus-ui-expansion-panel.umd.js","module":"fesm5/terminus-ui-expansion-panel.js","es2015":"fesm2015/terminus-ui-expansion-panel.js","esm5":"esm5/terminus-ui-expansion-panel.js","esm2015":"esm2015/terminus-ui-expansion-panel.js","fesm5":"fesm5/terminus-ui-expansion-panel.js","fesm2015":"fesm2015/terminus-ui-expansion-panel.js","typings":"terminus-ui-expansion-panel.d.ts","metadata":"terminus-ui-expansion-panel.metadata.json","sideEffects":false,"dependencies":{"tslib":"^1.10.0","@angular/forms":"9.1.11","date-fns":"2.14.0","@terminus/ui-button":"2.0.6","@terminus/ui-icon":"2.0.5","@angular-devkit/schematics":"9.1.9","@schematics/angular":"9.1.12","@fortawesome/fontawesome-svg-core":"1.2.30","@fortawesome/angular-fontawesome":"0.6.0","@fortawesome/pro-regular-svg-icons":"5.14.0","@angular/material":"9.2.4","@terminus/ui-card":"2.0.4","@terminus/ui-utilities":"1.0.9","@fortawesome/pro-solid-svg-icons":"5.14.0"},"readme":"

Expansion Panel

\n\n[![CI/CD Status][github-action-badge]][github-action-link] [![Codecov][codecov-badge]][codecov-project] [![MIT License][license-image]][license-url] \n[![NPM version][npm-version-image]][npm-package] [![Library size][file-size-badge]][raw-distribution-js]\n\nExpansion panel & accordion components.\n\n\n\n**Table of Contents**\n\n- [Installation](#installation)\n - [Packages that need to be installed](#packages-that-need-to-be-installed)\n - [Modules that need to be in NgModule](#modules-that-need-to-be-in-ngmodule)\n - [CSS imports](#css-imports)\n - [CSS resources](#css-resources)\n- [Usage](#usage)\n - [Panel](#panel)\n - [Title and description](#title-and-description)\n - [Disable a panel](#disable-a-panel)\n - [Default a panel open](#default-a-panel-open)\n - [Lazy loaded content](#lazy-loaded-content)\n - [Transparent mode](#transparent-mode)\n - [Panel events](#panel-events)\n - [Custom trigger heights](#custom-trigger-heights)\n - [Manual control](#manual-control)\n - [Accordion](#accordion)\n - [Allow multiple panels to be open](#allow-multiple-panels-to-be-open)\n - [Accordion events](#accordion-events)\n - [Accordion as a stepper](#accordion-as-a-stepper)\n - [Hide toggle](#hide-toggle)\n - [Action row](#action-row)\n - [Open or close all panels](#open-or-close-all-panels)\n- [Test Helpers](#test-helpers)\n\n\n\n## Installation\n\n### Packages that need to be installed\n\n- `@angular/cdk`\n- `@angular/common`\n- `@angular/core`\n- `@angular/flex-layout`\n- `@angular/forms`\n- `@angular/platform-browser`\n- `@terminus/design-tokens`\n- `@terminus/fe-utilities`\n- `@terminus/ui-utilities`\n- `@terminus/ui-expansion-panel`\n- `date-fns`\n\nUse the `ng add` command to quickly install all the needed dependencies:\n\n```bash\nng add @terminus/ui-expansion-panel\n```\n\n### Modules that need to be in NgModule\n\n- `BrowserAnimationsModule,`\n- `TsExpansionPanelModule,`\n\n### CSS imports\n\nIn your top level stylesheet, add these imports:\n\n```css\n@import '~@terminus/design-tokens/css/library-design-tokens.css';\n@import '~@terminus/ui-styles/terminus-ui.css';\n``` \n\n### CSS resources\n\nLoad the needed font families by adding this link to the `` of your application:\n\n```css\n\n```\n\n## Usage\n\n### Panel\n\nThe most basic usage is a single panel with a trigger:\n\n```html\n\n \n Here is my trigger!\n \n\n

And here is my standard panel content.

\n\n```\n\n> NOTE: Without a trigger, the panel will not be visible.\n\n#### Title and description\n\nTrigger text can be split into `title` and `description` using the `TsExpansionPanelTitleComponent` and\n`TsExpansionPanelDescriptionComponent` respectively.\n\n```html\n\n\n Here is my trigger!\n\n\n\n\n\n \n My title\n \n\n \n My description\n \n\n```\n\n#### Disable a panel\n\nThe `isDisabled` flag will disable a panel and it's trigger:\n\n```html\n\n \n Here is my trigger!\n \n\n

I will never be seen.

\n\n```\n\n#### Default a panel open\n\nThe `isExpanded` flag will change the state of a panel. This can be used to default to a specific state or to dynamically change the state.\n\n```html\n\n \n Here is my trigger!\n \n\n

I'll be visible by default!

\n\n```\n\n#### Lazy loaded content\n\nPanel content can be lazily loaded by using a template with the `tsExpansionPanelContent` directive. The template will not be loaded until\nthe panel is opened for the first time. The content will remain in the DOM until the panel is destroyed.\n\n```html\n\n \n Here is my trigger!\n \n\n \n Here is my deferred template!\n \n\n```\n\n#### Transparent mode\n\nExpansion panel with transparent mode on has no box shadow and padding on the side. It's default to `false`.\n\n```html\n\n \n Here is my trigger!\n \n\n

And here is my standard panel content.

\n\n```\n\n#### Panel events\n\n| Event | Description | Payload |\n|:-----------------|:---------------------------------------------------|:----------|\n| `opened` | Fired when the panel is opened | `void` |\n| `afterExpand` | Fired after the panel expansion animation finishes | `void` |\n| `closed` | Fired when the panel is closed | `void` |\n| `afterCollapse` | Fired after the panel collapse animation finishes | `void` |\n| `expandedChange` | Fired when the panel state changes | `boolean` |\n| `destroyed` | Fired when the panel is destroyed | `void` |\n\n```html\n...\n```\n\n#### Custom trigger heights\n\nCustom heights can be set for a trigger's collapsed and/or expanded state.\n\n```html\n\n \n Panel Trigger (100px -> 200px)\n\n

And here is my standard panel content.

\n\n```\n\n#### Manual control\n\nPanels can be programmatically opened, closed or toggled through a reference to the instance:\n\n```typescript\n@ViewChild(TsExpansionPanelComponent, {static: false})\npublic panel: TsExpansionPanelComponent;\n\n...\n\npanel.open();\npanel.close();\npanel.toggle();\n```\n\n> NOTE: Disabled panels cannot be controlled with these methods. Disabled panels can _only_ be controlled via the `isExpanded` input.\n\n### Accordion\n\nAn accordion is created by wrapping two or more `TsExpansionPanelComponent`s inside a `TsAccordionComponent`.\n\n```html\n\n ...\n ...\n\n```\n\n#### Allow multiple panels to be open\n\nBy default an accordion can only have a single panel open at a time. This functionality can be change with the `multi` input.\n\n```html\n\n ...\n ...\n\n```\n\n#### Accordion events\n\n| Event | Description | Payload |\n|:------------|:--------------------------------------|:--------|\n| `destroyed` | Fired when the accordion is destroyed | `void` |\n\n```html\n...\n```\n\n#### Accordion as a stepper\n\nAn accordion can function as a stepper which can be useful for guided flows. To facilitate this we can use a combination of `hideToggle` and\nthe `ts-expansion-panel-action-row`.\n\n```html\n\n\n \n \n Step 1\n\n And here is my standard panel content.\n\n \n Next\n \n \n\n \n \n Step 2\n\n And here is my standard panel content.\n\n \n Previous\n Next\n \n \n\n \n \n Step 3\n\n And here is my standard panel content.\n\n \n Previous\n End\n \n \n\n```\n\n#### Hide toggle\n\nWhen an accordion is controlled programmatically, the toggle icon can be hidden to avoid confusion for the user. Setting `hideToggle` on the\naccordion will hide the toggle icon for *all panels within*.\n\n> NOTE: This should _only_ be used in cases when the accordion is functioning as a stepper.\n\n```html\n\n ...\n ...\n\n```\n\n#### Action row\n\nThe action row is useful when an accordion is functioning as a stepper. Controls added within the action row will be right aligned as panel\ncontrols.\n\n> NOTE: See [Accordion as a stepper](https://github.com/GetTerminus/terminus-ui/blob/release/projects/library/expansion-panel/src/expansion-panel.component.md#accordion-as-a-stepper) for a complete example.\n\n```html\n\n \n Step 1\n \n\n And here is my standard panel content.\n\n \n \n \n\n```\n\n#### Open or close all panels\n\nAn accordion can programmatically open or close all panels at once.\n\n```typescript\n@ViewChild(TsAccordionComponent, {static: false})\npublic accordion: TsAccordionComponent;\n\n...\n\naccordion.openAll();\naccordion.closeAll();\n```\n\n> NOTE: These methods will *not* change the state of disabled panels.\n\n## Test Helpers\n\nSome helpers are exposed to assist with testing. These are imported from `@terminus/ui-expansion-panel/testing`;\n\n[[source]][test-helpers-src]\n\n| Function |\n|--------------------------------|\n| `getAllPanelDebugElements` |\n| `getAllPanelInstances` |\n| `getPanelDebugElement` |\n| `getPanelInstance` |\n| `getPanelElement` |\n| `getPanelBodyElement` |\n| `getPanelBodyContentElement` |\n| `getAllAccordionDebugElements` |\n| `getAllAccordionInstances` |\n| `getAccordionInstance` |\n| `getAccordionDebugElement` |\n| `getAccordionElement` |\n| `getTriggerDebugElement` |\n| `getTriggerInstance` |\n| `getTriggerElement` |\n| `getTriggerTitleElement` |\n| `getTriggerDescriptionElement` |\n| `getPanelActionRow` |\n| `togglePanel` |\n\n\n\n[test-helpers-src]: testing/src/test-helpers.ts\n[license-url]: https://github.com/GetTerminus/terminus-oss/blob/release/LICENSE\n[license-image]: http://img.shields.io/badge/license-MIT-blue.svg\n[codecov-project]: https://codecov.io/gh/GetTerminus/terminus-oss\n[codecov-badge]: https://codecov.io/gh/GetTerminus/terminus-oss/branch/release/graph/badge.svg\n[npm-version-image]: http://img.shields.io/npm/v/@terminus/ui-button.svg\n[npm-package]: https://www.npmjs.com/package/@terminus/ui-button\n[github-action-badge]: https://github.com/GetTerminus/terminus-oss/workflows/Release%20CI/badge.svg\n[github-action-link]: https://github.com/GetTerminus/terminus-oss/actions?query=workflow%3A%22CI+Release%22\n[file-size-badge]: http://img.badgesize.io/https://unpkg.com/@terminus/ui-button/bundles/terminus-ui-button.umd.min.js?compression=gzip\n[raw-distribution-js]: https://unpkg.com/@terminus/ui-button/bundles/terminus-ui-button.umd.js\n","readmeFilename":"README.md","description":"

Expansion Panel

","_id":"@terminus/ui-expansion-panel@1.0.11","_nodeVersion":"12.18.3","_npmVersion":"lerna/3.22.1/node@v12.18.3+x64 (linux)","dist":{"integrity":"sha512-CGznGkyip7jjBKBZTTOCs8QBr2FjF1dvXmjmbVNs2wgsPK015JdRIR7Z+dsUxC61wwzoARY344S9Ily3Td9lbA==","shasum":"bd2b3bd909000f49ae3e0d5eef15624218f8d858","tarball":"https://registry.npmjs.org/@terminus/ui-expansion-panel/-/ui-expansion-panel-1.0.11.tgz","fileCount":117,"unpackedSize":755551,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfJCQECRA9TVsSAnZWagAAG5QP/0De5NobOVrr6jpf17MZ\ncgIyfNYPZ+Zo2A8ehvY1uNdbWC7jnDRUgZRL33MDo5DL2S77ndHqcFeOkxew\nmeJ582Q1oB9Nfurqa4TtE/4M6PDo/0hoVo671mZXVmhiZII9RhLIZAIPE79P\nZBVpgvmyJBW0bcm1Xq4IZclyCcLigp+rxKpyZc8WgycFZf1L4eL24838fWoo\nCX1D6j0mEJeU1fQlnTjfwidAoo8nkvfi2SOnO1co+m2tlmY5Eacr8s7lHUx7\njENNkQTIRRxRmCEV4zFlxY4xydha2raOEiw/UNLyBglcy3fV2O1U1/uV+ERw\n65FbK/Agx8tKkPCHMDrMfF4aOTmKEOYGf8DIWyoweQoDY9Wpe3ZiCIojPx2W\nYfhwnlls+vmapxklHx0gCIKhb/PmTKk4N56j/H11KHQVEmjOVZh7mTi6bhjy\n63bxl71L4NDj8S3eqJDFPjG2vmhr2Dn4LZpP0DwjXFfEphPeha/CT5re4hhO\nGxngGDhCX6Xin0qZfZKF/iNy9Sn2AQMaWU7uDq8WxwRSQxdFQO9Dn6fJWOpt\n+X2ttQmsPaV1/MjR6cezfWaf69EbsV928NAEVl4x+PMYoSsNGmEjQRumA/tX\ng2FtOzX/52OuaEtn/SGiC8Mdq2rTZt2aA6ndx3WbdD7R81p4ssjTkGRuHiGd\n0esX\r\n=lKwl\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCTY0VXnCoNNZTS9Bq2LbAfg2XoxZgiidrzKR3VjlTTHQIhAJmBIBidu8eValeUh7/EyYN0L5WiVAzmxrRs4A5kpoPk"}]},"maintainers":[{"name":"atlwendy","email":"atlwendy@gmail.com"},{"name":"benjamincharity","email":"ben@benjamincharity.com"},{"name":"bmalinconico-terminus","email":"brian.malinconico@terminus.com"},{"name":"terminus_devops","email":"devops@terminus.com"}],"_npmUser":{"name":"terminus_devops","email":"devops@terminus.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ui-expansion-panel_1.0.11_1596204035736_0.9292502261823521"},"_hasShrinkwrap":false},"1.0.12":{"name":"@terminus/ui-expansion-panel","version":"1.0.12","license":"MIT","author":{"name":"@terminus"},"private":false,"homepage":"https://github.com/GetTerminus/terminus-oss","repository":{"type":"git","url":"git+https://github.com/GetTerminus/terminus-oss.git"},"bugs":{"url":"https://github.com/GetTerminus/terminus-oss/issues"},"publishConfig":{"access":"public","tag":"next","directory":"../../../dist/libs/ui/expansion-panel"},"peerDependencies":{"@angular/animations":"^9.1.0","@angular/cdk":"^9.1.0","@angular/common":"^9.1.0","@angular/core":"^9.1.0","@angular/platform-browser":"^9.1.0","@terminus/design-tokens":"^3.1.0","@terminus/fe-utilities":"^1.0.0","rxjs":"^6.5.0"},"schematics":"./schematics/collection.json","main":"bundles/terminus-ui-expansion-panel.umd.js","module":"fesm5/terminus-ui-expansion-panel.js","es2015":"fesm2015/terminus-ui-expansion-panel.js","esm5":"esm5/terminus-ui-expansion-panel.js","esm2015":"esm2015/terminus-ui-expansion-panel.js","fesm5":"fesm5/terminus-ui-expansion-panel.js","fesm2015":"fesm2015/terminus-ui-expansion-panel.js","typings":"terminus-ui-expansion-panel.d.ts","metadata":"terminus-ui-expansion-panel.metadata.json","sideEffects":false,"dependencies":{"tslib":"^1.10.0","@angular/forms":"9.1.11","date-fns":"2.15.0","@terminus/ui-button":"2.0.6","@terminus/ui-icon":"2.0.5","@angular-devkit/schematics":"9.1.9","@schematics/angular":"9.1.12","@fortawesome/fontawesome-svg-core":"1.2.30","@fortawesome/angular-fontawesome":"0.6.0","@fortawesome/pro-regular-svg-icons":"5.14.0","@angular/material":"9.2.4","@terminus/ui-card":"2.0.4","@terminus/ui-utilities":"1.0.9","@fortawesome/pro-solid-svg-icons":"5.14.0"},"readme":"

Expansion Panel

\n\n[![CI/CD Status][github-action-badge]][github-action-link] [![Codecov][codecov-badge]][codecov-project] [![MIT License][license-image]][license-url] \n[![NPM version][npm-version-image]][npm-package] [![Library size][file-size-badge]][raw-distribution-js]\n\nExpansion panel & accordion components.\n\n\n\n**Table of Contents**\n\n- [Installation](#installation)\n - [Packages that need to be installed](#packages-that-need-to-be-installed)\n - [Modules that need to be in NgModule](#modules-that-need-to-be-in-ngmodule)\n - [CSS imports](#css-imports)\n - [CSS resources](#css-resources)\n- [Usage](#usage)\n - [Panel](#panel)\n - [Title and description](#title-and-description)\n - [Disable a panel](#disable-a-panel)\n - [Default a panel open](#default-a-panel-open)\n - [Lazy loaded content](#lazy-loaded-content)\n - [Transparent mode](#transparent-mode)\n - [Panel events](#panel-events)\n - [Custom trigger heights](#custom-trigger-heights)\n - [Manual control](#manual-control)\n - [Accordion](#accordion)\n - [Allow multiple panels to be open](#allow-multiple-panels-to-be-open)\n - [Accordion events](#accordion-events)\n - [Accordion as a stepper](#accordion-as-a-stepper)\n - [Hide toggle](#hide-toggle)\n - [Action row](#action-row)\n - [Open or close all panels](#open-or-close-all-panels)\n- [Test Helpers](#test-helpers)\n\n\n\n## Installation\n\n### Packages that need to be installed\n\n- `@angular/cdk`\n- `@angular/common`\n- `@angular/core`\n- `@angular/flex-layout`\n- `@angular/forms`\n- `@angular/platform-browser`\n- `@terminus/design-tokens`\n- `@terminus/fe-utilities`\n- `@terminus/ui-utilities`\n- `@terminus/ui-expansion-panel`\n- `date-fns`\n\nUse the `ng add` command to quickly install all the needed dependencies:\n\n```bash\nng add @terminus/ui-expansion-panel\n```\n\n### Modules that need to be in NgModule\n\n- `BrowserAnimationsModule,`\n- `TsExpansionPanelModule,`\n\n### CSS imports\n\nIn your top level stylesheet, add these imports:\n\n```css\n@import '~@terminus/design-tokens/css/library-design-tokens.css';\n@import '~@terminus/ui-styles/terminus-ui.css';\n``` \n\n### CSS resources\n\nLoad the needed font families by adding this link to the `` of your application:\n\n```css\n\n```\n\n## Usage\n\n### Panel\n\nThe most basic usage is a single panel with a trigger:\n\n```html\n\n \n Here is my trigger!\n \n\n

And here is my standard panel content.

\n\n```\n\n> NOTE: Without a trigger, the panel will not be visible.\n\n#### Title and description\n\nTrigger text can be split into `title` and `description` using the `TsExpansionPanelTitleComponent` and\n`TsExpansionPanelDescriptionComponent` respectively.\n\n```html\n\n\n Here is my trigger!\n\n\n\n\n\n \n My title\n \n\n \n My description\n \n\n```\n\n#### Disable a panel\n\nThe `isDisabled` flag will disable a panel and it's trigger:\n\n```html\n\n \n Here is my trigger!\n \n\n

I will never be seen.

\n\n```\n\n#### Default a panel open\n\nThe `isExpanded` flag will change the state of a panel. This can be used to default to a specific state or to dynamically change the state.\n\n```html\n\n \n Here is my trigger!\n \n\n

I'll be visible by default!

\n\n```\n\n#### Lazy loaded content\n\nPanel content can be lazily loaded by using a template with the `tsExpansionPanelContent` directive. The template will not be loaded until\nthe panel is opened for the first time. The content will remain in the DOM until the panel is destroyed.\n\n```html\n\n \n Here is my trigger!\n \n\n \n Here is my deferred template!\n \n\n```\n\n#### Transparent mode\n\nExpansion panel with transparent mode on has no box shadow and padding on the side. It's default to `false`.\n\n```html\n\n \n Here is my trigger!\n \n\n

And here is my standard panel content.

\n\n```\n\n#### Panel events\n\n| Event | Description | Payload |\n|:-----------------|:---------------------------------------------------|:----------|\n| `opened` | Fired when the panel is opened | `void` |\n| `afterExpand` | Fired after the panel expansion animation finishes | `void` |\n| `closed` | Fired when the panel is closed | `void` |\n| `afterCollapse` | Fired after the panel collapse animation finishes | `void` |\n| `expandedChange` | Fired when the panel state changes | `boolean` |\n| `destroyed` | Fired when the panel is destroyed | `void` |\n\n```html\n...\n```\n\n#### Custom trigger heights\n\nCustom heights can be set for a trigger's collapsed and/or expanded state.\n\n```html\n\n \n Panel Trigger (100px -> 200px)\n\n

And here is my standard panel content.

\n\n```\n\n#### Manual control\n\nPanels can be programmatically opened, closed or toggled through a reference to the instance:\n\n```typescript\n@ViewChild(TsExpansionPanelComponent, {static: false})\npublic panel: TsExpansionPanelComponent;\n\n...\n\npanel.open();\npanel.close();\npanel.toggle();\n```\n\n> NOTE: Disabled panels cannot be controlled with these methods. Disabled panels can _only_ be controlled via the `isExpanded` input.\n\n### Accordion\n\nAn accordion is created by wrapping two or more `TsExpansionPanelComponent`s inside a `TsAccordionComponent`.\n\n```html\n\n ...\n ...\n\n```\n\n#### Allow multiple panels to be open\n\nBy default an accordion can only have a single panel open at a time. This functionality can be change with the `multi` input.\n\n```html\n\n ...\n ...\n\n```\n\n#### Accordion events\n\n| Event | Description | Payload |\n|:------------|:--------------------------------------|:--------|\n| `destroyed` | Fired when the accordion is destroyed | `void` |\n\n```html\n...\n```\n\n#### Accordion as a stepper\n\nAn accordion can function as a stepper which can be useful for guided flows. To facilitate this we can use a combination of `hideToggle` and\nthe `ts-expansion-panel-action-row`.\n\n```html\n\n\n \n \n Step 1\n\n And here is my standard panel content.\n\n \n Next\n \n \n\n \n \n Step 2\n\n And here is my standard panel content.\n\n \n Previous\n Next\n \n \n\n \n \n Step 3\n\n And here is my standard panel content.\n\n \n Previous\n End\n \n \n\n```\n\n#### Hide toggle\n\nWhen an accordion is controlled programmatically, the toggle icon can be hidden to avoid confusion for the user. Setting `hideToggle` on the\naccordion will hide the toggle icon for *all panels within*.\n\n> NOTE: This should _only_ be used in cases when the accordion is functioning as a stepper.\n\n```html\n\n ...\n ...\n\n```\n\n#### Action row\n\nThe action row is useful when an accordion is functioning as a stepper. Controls added within the action row will be right aligned as panel\ncontrols.\n\n> NOTE: See [Accordion as a stepper](https://github.com/GetTerminus/terminus-ui/blob/release/projects/library/expansion-panel/src/expansion-panel.component.md#accordion-as-a-stepper) for a complete example.\n\n```html\n\n \n Step 1\n \n\n And here is my standard panel content.\n\n \n \n \n\n```\n\n#### Open or close all panels\n\nAn accordion can programmatically open or close all panels at once.\n\n```typescript\n@ViewChild(TsAccordionComponent, {static: false})\npublic accordion: TsAccordionComponent;\n\n...\n\naccordion.openAll();\naccordion.closeAll();\n```\n\n> NOTE: These methods will *not* change the state of disabled panels.\n\n## Test Helpers\n\nSome helpers are exposed to assist with testing. These are imported from `@terminus/ui-expansion-panel/testing`;\n\n[[source]][test-helpers-src]\n\n| Function |\n|--------------------------------|\n| `getAllPanelDebugElements` |\n| `getAllPanelInstances` |\n| `getPanelDebugElement` |\n| `getPanelInstance` |\n| `getPanelElement` |\n| `getPanelBodyElement` |\n| `getPanelBodyContentElement` |\n| `getAllAccordionDebugElements` |\n| `getAllAccordionInstances` |\n| `getAccordionInstance` |\n| `getAccordionDebugElement` |\n| `getAccordionElement` |\n| `getTriggerDebugElement` |\n| `getTriggerInstance` |\n| `getTriggerElement` |\n| `getTriggerTitleElement` |\n| `getTriggerDescriptionElement` |\n| `getPanelActionRow` |\n| `togglePanel` |\n\n\n\n[test-helpers-src]: testing/src/test-helpers.ts\n[license-url]: https://github.com/GetTerminus/terminus-oss/blob/release/LICENSE\n[license-image]: http://img.shields.io/badge/license-MIT-blue.svg\n[codecov-project]: https://codecov.io/gh/GetTerminus/terminus-oss\n[codecov-badge]: https://codecov.io/gh/GetTerminus/terminus-oss/branch/release/graph/badge.svg\n[npm-version-image]: http://img.shields.io/npm/v/@terminus/ui-button.svg\n[npm-package]: https://www.npmjs.com/package/@terminus/ui-button\n[github-action-badge]: https://github.com/GetTerminus/terminus-oss/workflows/Release%20CI/badge.svg\n[github-action-link]: https://github.com/GetTerminus/terminus-oss/actions?query=workflow%3A%22CI+Release%22\n[file-size-badge]: http://img.badgesize.io/https://unpkg.com/@terminus/ui-button/bundles/terminus-ui-button.umd.min.js?compression=gzip\n[raw-distribution-js]: https://unpkg.com/@terminus/ui-button/bundles/terminus-ui-button.umd.js\n","readmeFilename":"README.md","description":"

Expansion Panel

","_id":"@terminus/ui-expansion-panel@1.0.12","_nodeVersion":"12.18.3","_npmVersion":"lerna/3.22.1/node@v12.18.3+x64 (linux)","dist":{"integrity":"sha512-6Zgd+frpN4rktZpzqNCcb2uKNVyT8U9b16PIqSIADCrxyh+2ySOCFUVvIsAJdGt1LJOqbcA1qD+ZZ6b7PRtJIw==","shasum":"07349b9270619512f29470a0b46c5bf88324931c","tarball":"https://registry.npmjs.org/@terminus/ui-expansion-panel/-/ui-expansion-panel-1.0.12.tgz","fileCount":117,"unpackedSize":757138,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKwSDCRA9TVsSAnZWagAA3ScP/Rmml6rZo9+X4c1LlnvH\nwG7LyOrAEc8MIPau3GhWTVzlfs+ZRzL5zEZQcuOXKpQA9luaI0V4j5i/5d+T\nIsd7Bo8zTGoBdZiDr3V9sckh56VYVJcOYmg3KT/SHzKUDchsRUoobvZqPfNb\nViSp3UihaXCgWr9zP6H8lj1v4rIrlCVUCR3gJpe/y8CQrOBJRt16QlXoEtNy\nCjXi6LSMvUZArDOrWFFAbb6I8X0C5erNSSGvIJwO2NBy122eEKQMs/fWJddR\nqDrs5hImMl47+CA8LWKuu9PhLeEkjrCLQgXnnQqHsmrAbk9CorAbYrUsx+6i\nfgkknx8orkUNl34p8/vR2/+IEgO08//4ULb+B+tKztbmTJcv/ZCKgKK7NveZ\nkYo0z89+84M7HsDmVzBVpC1OE82Ov0EHtgPFkNxI7d6VPJjKwqWy+H8cJesn\nsTAM5ydOrEsZs1GpfkylTAldUUXBObt2F0azICssl/UYGW2H1+YK1NfvkPEk\n70Qf8dowfOAdLG4vAXwxJMKBBJXn79hwP3HGU/E1Lp263Y50JieiO227QSgX\nZajooUhlqzJ5k8AXVezwmCXdsUYPfWbEMjWtJOTNFBfU7oMxkF/dRpUhCOzv\nBIDBeG4GpBVyVbU8j8sQNxtymiTcpUnU9KvfOfBfxE/fI1ZaRZ5kNSpVk2Dh\nmTLH\r\n=LmB6\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHTnc9LG7nKFFsETnL7+X5k8CM/a7Gl49F6TiDj4rLjEAiEA11R6BVcXsllbPMd9k5a12kpujWz5P0ftNTyz+pSx8eA="}]},"maintainers":[{"name":"atlwendy","email":"atlwendy@gmail.com"},{"name":"benjamincharity","email":"ben@benjamincharity.com"},{"name":"bmalinconico-terminus","email":"brian.malinconico@terminus.com"},{"name":"terminus_devops","email":"devops@terminus.com"}],"_npmUser":{"name":"terminus_devops","email":"devops@terminus.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ui-expansion-panel_1.0.12_1596654722870_0.9114572214313139"},"_hasShrinkwrap":false},"1.0.13":{"name":"@terminus/ui-expansion-panel","version":"1.0.13","license":"MIT","author":{"name":"@terminus"},"private":false,"homepage":"https://github.com/GetTerminus/terminus-oss","repository":{"type":"git","url":"git+https://github.com/GetTerminus/terminus-oss.git"},"bugs":{"url":"https://github.com/GetTerminus/terminus-oss/issues"},"publishConfig":{"access":"public","tag":"next","directory":"../../../dist/libs/ui/expansion-panel"},"peerDependencies":{"@angular/animations":"^9.1.0","@angular/cdk":"^9.1.0","@angular/common":"^9.1.0","@angular/core":"^9.1.0","@angular/platform-browser":"^9.1.0","@terminus/design-tokens":"^3.1.0","@terminus/fe-utilities":"^1.0.0","rxjs":"^6.5.0"},"schematics":"./schematics/collection.json","main":"bundles/terminus-ui-expansion-panel.umd.js","module":"fesm5/terminus-ui-expansion-panel.js","es2015":"fesm2015/terminus-ui-expansion-panel.js","esm5":"esm5/terminus-ui-expansion-panel.js","esm2015":"esm2015/terminus-ui-expansion-panel.js","fesm5":"fesm5/terminus-ui-expansion-panel.js","fesm2015":"fesm2015/terminus-ui-expansion-panel.js","typings":"terminus-ui-expansion-panel.d.ts","metadata":"terminus-ui-expansion-panel.metadata.json","sideEffects":false,"dependencies":{"tslib":"^1.10.0","@angular/forms":"9.1.11","date-fns":"2.15.0","@terminus/ui-button":"2.0.7","@terminus/ui-icon":"2.0.5","@angular-devkit/schematics":"9.1.9","@schematics/angular":"9.1.12","@fortawesome/fontawesome-svg-core":"1.2.30","@fortawesome/angular-fontawesome":"0.6.0","@fortawesome/pro-regular-svg-icons":"5.14.0","@angular/material":"9.2.4","@terminus/ui-card":"2.0.4","@terminus/ui-utilities":"1.0.9","@fortawesome/pro-solid-svg-icons":"5.14.0"},"description":"

Expansion Panel

","_id":"@terminus/ui-expansion-panel@1.0.13","_nodeVersion":"12.18.3","_npmVersion":"lerna/3.22.1/node@v12.18.3+x64 (linux)","dist":{"integrity":"sha512-1Gg8ayF61CRuawCh0yLDt9hXbl4tNGvNLBQ1AJFnDYq1YaCzyITm/rp+dg5uv5YEfMy7WmddP0gf+ebCOz/J6w==","shasum":"209c6a5bfaba4c7179e13a540a7bf9fdbbe30ffb","tarball":"https://registry.npmjs.org/@terminus/ui-expansion-panel/-/ui-expansion-panel-1.0.13.tgz","fileCount":117,"unpackedSize":757959,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfLDrfCRA9TVsSAnZWagAAVC0P/iiUX8zhtZH231XujPuJ\nHnz1EbF6uwnPErWDHQ2Kxyv+8t++rtvqEHmngKS0NigL4g8kGuRclUBs1tQ9\n7Qa75osxwzAC5iRWtQjMML0KlKz2/+LmEilHRj+WDw1TwKZUr2+S0yaatuBi\n575B0VuGO76NSbcI9DOfgiLfMQyplWMs7TFcFjx575r6/7NVl/he8QtcUsMk\nmQK5O6RGNJTaLMNAst342EvoeB/XRqvOGiE4cwzkkTPHL22r1Ghau6VhoKM+\nixE9P4Hg18czB3SpZJ70DFvxCXkKnE0vqAWrwEBMHLybNyc+PgyuIGSqzz0k\nDLRVbFTjCF5SeBdRLgDefFrTDPXSBLajbTo8AzbtI1AX7beFhO2DNmHXUxrW\n1zXFx+H49csD/lGhomUNKZ0gMyAFdOSiKib3Lp3zUBTzZmPvmHdIFQjUDJ7u\ns+vVfGjAIcERSp50DE1TWwlLCZVvlRkvzCjiS8WZIEMQhsoVNETD6aPSxw+Y\nruEvji3+udEzjEO0dwx+zGE32Gfsocz1pZsAyhaHt6pkU8b84CEkikmgo/FN\nxxebABxdMDvFPa3o5quBGm943zdlWt5ZbT+iNqmMKxRkRXXNDTcikwMBHulR\nMtqZpmcmwpgiEeXCL25pZ0VmELTW8KrJqWRBbvE5eL/GtTl67ll+e8JziY8J\nFBQW\r\n=nDAM\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDgHZYZ2tPRycoaIDsbl+R5nXgfMzXqukiJE24krbVeggIhALj+qQfH9WXms2VHH3kFZHU/Mk9EY0sAkt6nr04MDzfb"}]},"maintainers":[{"name":"atlwendy","email":"atlwendy@gmail.com"},{"name":"benjamincharity","email":"ben@benjamincharity.com"},{"name":"bmalinconico-terminus","email":"brian.malinconico@terminus.com"},{"name":"terminus_devops","email":"devops@terminus.com"}],"_npmUser":{"name":"terminus_devops","email":"devops@terminus.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ui-expansion-panel_1.0.13_1596734175120_0.8721651280615439"},"_hasShrinkwrap":false},"1.0.14":{"name":"@terminus/ui-expansion-panel","version":"1.0.14","license":"MIT","author":{"name":"@terminus"},"private":false,"homepage":"https://github.com/GetTerminus/terminus-oss","repository":{"type":"git","url":"git+https://github.com/GetTerminus/terminus-oss.git"},"bugs":{"url":"https://github.com/GetTerminus/terminus-oss/issues"},"publishConfig":{"access":"public","tag":"next","directory":"../../../dist/libs/ui/expansion-panel"},"peerDependencies":{"@angular/animations":"^9.1.0","@angular/cdk":"^9.1.0","@angular/common":"^9.1.0","@angular/core":"^9.1.0","@angular/platform-browser":"^9.1.0","@terminus/design-tokens":"^3.1.0","@terminus/fe-utilities":"^1.0.0","rxjs":"^6.5.0"},"schematics":"./schematics/collection.json","main":"bundles/terminus-ui-expansion-panel.umd.js","module":"fesm5/terminus-ui-expansion-panel.js","es2015":"fesm2015/terminus-ui-expansion-panel.js","esm5":"esm5/terminus-ui-expansion-panel.js","esm2015":"esm2015/terminus-ui-expansion-panel.js","fesm5":"fesm5/terminus-ui-expansion-panel.js","fesm2015":"fesm2015/terminus-ui-expansion-panel.js","typings":"terminus-ui-expansion-panel.d.ts","metadata":"terminus-ui-expansion-panel.metadata.json","sideEffects":false,"dependencies":{"tslib":"^1.10.0","@angular/forms":"9.1.11","date-fns":"2.15.0","@terminus/ui-button":"2.0.8","@terminus/ui-icon":"2.0.6","@angular-devkit/schematics":"9.1.9","@schematics/angular":"9.1.12","@fortawesome/fontawesome-svg-core":"1.2.30","@fortawesome/angular-fontawesome":"0.6.0","@fortawesome/pro-regular-svg-icons":"5.14.0","@angular/material":"9.2.4","@terminus/ui-card":"2.0.5","@terminus/ui-utilities":"1.0.10","@fortawesome/pro-solid-svg-icons":"5.14.0"},"description":"

Expansion Panel

","_id":"@terminus/ui-expansion-panel@1.0.14","_nodeVersion":"12.18.3","_npmVersion":"lerna/3.22.1/node@v12.18.3+x64 (linux)","dist":{"integrity":"sha512-aQTKtZRRn+/cC2dvXfnHZdSJcwoLqKC7bHn7GZvox22S2MMqBduSYUNhofKaCOXLkuzdsn7EdmQL4DRFIaVKiQ==","shasum":"964b41c9aa4eea61ff920a57106dc9d445850a5c","tarball":"https://registry.npmjs.org/@terminus/ui-expansion-panel/-/ui-expansion-panel-1.0.14.tgz","fileCount":117,"unpackedSize":758188,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfMXPHCRA9TVsSAnZWagAAZw4P/jvRL1Sz57xxDT3hMLFN\n+NNeXWno05cvQLwj5iFf1KkDQgi5Z+XlXem3ZvRb/Mu76tzWYQfv5o4T3OAQ\nlwmpYQQW6G95EqAdDaH4BrtruO1vyRKPggF/MJLLd6IJ43OW3rpRF+ec96DR\nil7RONOEedvrSh9zEzRHpEY25lhKIfPuUDxeeSCSEZzY3VDIiQnYnW8n0mPT\nQGsg/TV+KDGJAapI3NqqRpCkw6hCAHhqGPP/1yXkIyjNJv7k/7tZd50IFWRZ\n4KfWM+4orPLgDWH1cbGXrsh3ryW2QoWFO/XlU2x55ruE52EY1KBALSbLFoJK\nBaTcrwL+qHrTD/4O0XUL8wsxK6v8f7z10tpXXGqE8rZJk5fukSeB9G0SJZp0\n4rCF8dN0ekWh0bR3txk6LazieKN9JclGaeSW2eBlCcGCD5d/8rlvHnWIHLSW\nUtVcylo3jXbfBAVN1wtq0qNM329w/4Pjv5DPcOJhATPh8EjgC9ByYNkOEAYv\nnUNnxbvuVsvmS8ZNpjLkB5q9iRLpJ6UDzSnNWIdaJlv09PUmR2Jd+ffxfSsK\niOIpeTgFRPk9ZNyD72gmS88tgkJR0alUXg+rOfSrDyQtjYCAz0ygbGecpVSw\nteXe8DfGT4sExqRcVbUtjROVUE+D/PAkgwpxuMfWY2UZ4JCHeGaM1MrBIsxl\nVe/y\r\n=0eeo\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCNEisOR5G2F1bBsQiQMzYPVzNqQHIcBDwlEcSE73+P+gIhAN3zrHJJropIp4ap/HCT+7IPTMHaKWngH0V2aHCm/fbJ"}]},"maintainers":[{"name":"atlwendy","email":"atlwendy@gmail.com"},{"name":"benjamincharity","email":"ben@benjamincharity.com"},{"name":"bmalinconico-terminus","email":"brian.malinconico@terminus.com"},{"name":"terminus_devops","email":"devops@terminus.com"}],"_npmUser":{"name":"terminus_devops","email":"devops@terminus.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ui-expansion-panel_1.0.14_1597076423301_0.18953666011094494"},"_hasShrinkwrap":false},"1.0.15":{"name":"@terminus/ui-expansion-panel","version":"1.0.15","license":"MIT","author":{"name":"@terminus"},"private":false,"homepage":"https://github.com/GetTerminus/terminus-oss","repository":{"type":"git","url":"git+https://github.com/GetTerminus/terminus-oss.git"},"bugs":{"url":"https://github.com/GetTerminus/terminus-oss/issues"},"publishConfig":{"access":"public","tag":"next","directory":"../../../dist/libs/ui/expansion-panel"},"peerDependencies":{"@angular/animations":"^9.1.0","@angular/cdk":"^9.1.0","@angular/common":"^9.1.0","@angular/core":"^9.1.0","@angular/platform-browser":"^9.1.0","@terminus/design-tokens":"^3.1.0","@terminus/fe-utilities":"^1.1.0","rxjs":"^6.5.0"},"schematics":"./schematics/collection.json","main":"bundles/terminus-ui-expansion-panel.umd.js","module":"fesm5/terminus-ui-expansion-panel.js","es2015":"fesm2015/terminus-ui-expansion-panel.js","esm5":"esm5/terminus-ui-expansion-panel.js","esm2015":"esm2015/terminus-ui-expansion-panel.js","fesm5":"fesm5/terminus-ui-expansion-panel.js","fesm2015":"fesm2015/terminus-ui-expansion-panel.js","typings":"terminus-ui-expansion-panel.d.ts","metadata":"terminus-ui-expansion-panel.metadata.json","sideEffects":false,"dependencies":{"tslib":"^1.10.0","@angular/forms":"9.1.11","date-fns":"2.15.0","@terminus/ui-button":"2.0.9","@terminus/ui-icon":"2.0.7","@angular-devkit/schematics":"9.1.9","@schematics/angular":"9.1.12","@fortawesome/fontawesome-svg-core":"1.2.30","@fortawesome/angular-fontawesome":"0.6.0","@fortawesome/pro-regular-svg-icons":"5.14.0","@angular/material":"9.2.4","@terminus/ui-card":"2.0.6","@terminus/ui-utilities":"1.0.11","@fortawesome/pro-solid-svg-icons":"5.14.0"},"description":"

Expansion Panel

","_id":"@terminus/ui-expansion-panel@1.0.15","_nodeVersion":"12.18.3","_npmVersion":"lerna/3.22.1/node@v12.18.3+x64 (linux)","dist":{"integrity":"sha512-LyXeFtAWOzd0tblqblHheam9tWeJ+43tz4nygh+c7JCifbEH/REu5q4bUc7dbv0ak8UseEe20oskOYUCMP+23A==","shasum":"469af8e8dde4ff1c19e71290a4c335f8f770a7df","tarball":"https://registry.npmjs.org/@terminus/ui-expansion-panel/-/ui-expansion-panel-1.0.15.tgz","fileCount":117,"unpackedSize":758415,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfMYbOCRA9TVsSAnZWagAAbVoP+was96KiQ9l+70pAT8QI\nb16gMsocoAvDYb5S9B5aBzKktkHxtRwar5SHFi3zzYoTqyayCwoXVPsEXXXq\nZjeK0uyQDBP/0uAW33u3OjyKsgOQ0VAipuH7MTg5DMQbRTn1aQ6+tpEif8rv\ne7jtme2y4ql7ypTBCxMO7AJXN7qVIyfZFp8Ty6/KogIxgaraLlIn4+t+PlFY\nF4CDw3H1W9Cn5KgCvb0wiYj0nPNu97TadGVZNpSMGfYEi6vaE4fOuJcT9Usb\ndm0aDJLLJzhrZ6K/VocDfl9+KbChniuR6z5z8GSc0VvMB+9fnwyImpD4tYbc\niI+1Aw3X4GHsbz12ZExSKiJJwRJuMBgweKj767K2NA+a7BrfvoJyX/PN87Z/\nXVVTxNeWzhRoo+TZtPOc1szKmM7jwadvzq0kroRbSAZdoiI0Y67D1GFnCuzA\nChrJ8QHzZSLm+TOMQb4BXzHzBImfhxFErX42WTc6/2Vvt71LqzVovfReT0m3\nbs/8w1IjcZsq9oxyw/xxqMDPFI13fhM2ycopd0JF1ctsCnjbL/HJiccgV0Fn\nY8jC+1fPhMdn5yBTztEYGleeKmi+uoE2n/dVe/H/FXW37omRnn/9zx/U1IVf\nyKMpqxvBq0Pf14fnk81jT34wi6KhJ5yTsjJY1ra0dvCEJ7viwjznEmppSIUd\nFwOh\r\n=BrmX\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCxxNYqR0VI2/gy3/ERYFT/sFFcd17rD3G+WAY3D9gzLAIhAOKik3u/rl+khh2NEHlooxUSQ0w/Mmf63sTc0t6r/6ZI"}]},"maintainers":[{"name":"atlwendy","email":"atlwendy@gmail.com"},{"name":"benjamincharity","email":"ben@benjamincharity.com"},{"name":"bmalinconico-terminus","email":"brian.malinconico@terminus.com"},{"name":"terminus_devops","email":"devops@terminus.com"}],"_npmUser":{"name":"terminus_devops","email":"devops@terminus.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ui-expansion-panel_1.0.15_1597081294341_0.4595464665578868"},"_hasShrinkwrap":false},"1.0.16":{"name":"@terminus/ui-expansion-panel","version":"1.0.16","license":"MIT","author":{"name":"@terminus"},"private":false,"homepage":"https://github.com/GetTerminus/terminus-oss","repository":{"type":"git","url":"git+https://github.com/GetTerminus/terminus-oss.git"},"bugs":{"url":"https://github.com/GetTerminus/terminus-oss/issues"},"publishConfig":{"access":"public","tag":"next","directory":"../../../dist/libs/ui/expansion-panel"},"peerDependencies":{"@angular/animations":"^9.1.0","@angular/cdk":"^9.1.0","@angular/common":"^9.1.0","@angular/core":"^9.1.0","@angular/platform-browser":"^9.1.0","@terminus/design-tokens":"^3.1.0","@terminus/fe-utilities":"^1.1.0","rxjs":"^6.5.0"},"schematics":"./schematics/collection.json","main":"bundles/terminus-ui-expansion-panel.umd.js","module":"fesm5/terminus-ui-expansion-panel.js","es2015":"fesm2015/terminus-ui-expansion-panel.js","esm5":"esm5/terminus-ui-expansion-panel.js","esm2015":"esm2015/terminus-ui-expansion-panel.js","fesm5":"fesm5/terminus-ui-expansion-panel.js","fesm2015":"fesm2015/terminus-ui-expansion-panel.js","typings":"terminus-ui-expansion-panel.d.ts","metadata":"terminus-ui-expansion-panel.metadata.json","sideEffects":false,"dependencies":{"tslib":"^1.10.0","@angular/forms":"9.1.11","date-fns":"2.15.0","@terminus/ui-button":"2.0.10","@terminus/ui-icon":"2.0.7","@angular-devkit/schematics":"9.1.9","@schematics/angular":"9.1.12","@fortawesome/fontawesome-svg-core":"1.2.30","@fortawesome/angular-fontawesome":"0.6.0","@fortawesome/pro-regular-svg-icons":"5.14.0","@angular/material":"9.2.4","@terminus/ui-card":"2.0.7","@terminus/ui-utilities":"1.0.11","@fortawesome/pro-solid-svg-icons":"5.14.0"},"readme":"

Expansion Panel

\n\n[![CI/CD Status][github-action-badge]][github-action-link] [![Codecov][codecov-badge]][codecov-project] [![MIT License][license-image]][license-url] \n[![NPM version][npm-version-image]][npm-package] [![Library size][file-size-badge]][raw-distribution-js]\n\nExpansion panel & accordion components.\n\n\n\n**Table of Contents**\n\n- [Installation](#installation)\n - [Packages that need to be installed](#packages-that-need-to-be-installed)\n - [Modules that need to be in NgModule](#modules-that-need-to-be-in-ngmodule)\n - [CSS imports](#css-imports)\n - [CSS resources](#css-resources)\n- [Usage](#usage)\n - [Panel](#panel)\n - [Title and description](#title-and-description)\n - [Disable a panel](#disable-a-panel)\n - [Default a panel open](#default-a-panel-open)\n - [Lazy loaded content](#lazy-loaded-content)\n - [Transparent mode](#transparent-mode)\n - [Panel events](#panel-events)\n - [Custom trigger heights](#custom-trigger-heights)\n - [Manual control](#manual-control)\n - [Accordion](#accordion)\n - [Allow multiple panels to be open](#allow-multiple-panels-to-be-open)\n - [Accordion events](#accordion-events)\n - [Accordion as a stepper](#accordion-as-a-stepper)\n - [Hide toggle](#hide-toggle)\n - [Action row](#action-row)\n - [Open or close all panels](#open-or-close-all-panels)\n- [Test Helpers](#test-helpers)\n\n\n\n## Installation\n\n### Packages that need to be installed\n\n- `@angular/cdk`\n- `@angular/common`\n- `@angular/core`\n- `@angular/flex-layout`\n- `@angular/forms`\n- `@angular/platform-browser`\n- `@terminus/design-tokens`\n- `@terminus/fe-utilities`\n- `@terminus/ui-utilities`\n- `@terminus/ui-expansion-panel`\n- `date-fns`\n\nUse the `ng add` command to quickly install all the needed dependencies:\n\n```bash\nng add @terminus/ui-expansion-panel\n```\n\n### Modules that need to be in NgModule\n\n- `BrowserAnimationsModule,`\n- `TsExpansionPanelModule,`\n\n### CSS imports\n\nIn your top level stylesheet, add these imports:\n\n```css\n@import '~@terminus/design-tokens/css/library-design-tokens.css';\n@import '~@terminus/ui-styles/terminus-ui.css';\n``` \n\n### CSS resources\n\nLoad the needed font families by adding this link to the `` of your application:\n\n```css\n\n```\n\n## Usage\n\n### Panel\n\nThe most basic usage is a single panel with a trigger:\n\n```html\n\n \n Here is my trigger!\n \n\n

And here is my standard panel content.

\n\n```\n\n> NOTE: Without a trigger, the panel will not be visible.\n\n#### Title and description\n\nTrigger text can be split into `title` and `description` using the `TsExpansionPanelTitleComponent` and\n`TsExpansionPanelDescriptionComponent` respectively.\n\n```html\n\n\n Here is my trigger!\n\n\n\n\n\n \n My title\n \n\n \n My description\n \n\n```\n\n#### Disable a panel\n\nThe `isDisabled` flag will disable a panel and it's trigger:\n\n```html\n\n \n Here is my trigger!\n \n\n

I will never be seen.

\n\n```\n\n#### Default a panel open\n\nThe `isExpanded` flag will change the state of a panel. This can be used to default to a specific state or to dynamically change the state.\n\n```html\n\n \n Here is my trigger!\n \n\n

I'll be visible by default!

\n\n```\n\n#### Lazy loaded content\n\nPanel content can be lazily loaded by using a template with the `tsExpansionPanelContent` directive. The template will not be loaded until\nthe panel is opened for the first time. The content will remain in the DOM until the panel is destroyed.\n\n```html\n\n \n Here is my trigger!\n \n\n \n Here is my deferred template!\n \n\n```\n\n#### Transparent mode\n\nExpansion panel with transparent mode on has no box shadow and padding on the side. It's default to `false`.\n\n```html\n\n \n Here is my trigger!\n \n\n

And here is my standard panel content.

\n\n```\n\n#### Panel events\n\n| Event | Description | Payload |\n|:-----------------|:---------------------------------------------------|:----------|\n| `opened` | Fired when the panel is opened | `void` |\n| `afterExpand` | Fired after the panel expansion animation finishes | `void` |\n| `closed` | Fired when the panel is closed | `void` |\n| `afterCollapse` | Fired after the panel collapse animation finishes | `void` |\n| `expandedChange` | Fired when the panel state changes | `boolean` |\n| `destroyed` | Fired when the panel is destroyed | `void` |\n\n```html\n...\n```\n\n#### Custom trigger heights\n\nCustom heights can be set for a trigger's collapsed and/or expanded state.\n\n```html\n\n \n Panel Trigger (100px -> 200px)\n\n

And here is my standard panel content.

\n\n```\n\n#### Manual control\n\nPanels can be programmatically opened, closed or toggled through a reference to the instance:\n\n```typescript\n@ViewChild(TsExpansionPanelComponent, {static: false})\npublic panel: TsExpansionPanelComponent;\n\n...\n\npanel.open();\npanel.close();\npanel.toggle();\n```\n\n> NOTE: Disabled panels cannot be controlled with these methods. Disabled panels can _only_ be controlled via the `isExpanded` input.\n\n### Accordion\n\nAn accordion is created by wrapping two or more `TsExpansionPanelComponent`s inside a `TsAccordionComponent`.\n\n```html\n\n ...\n ...\n\n```\n\n#### Allow multiple panels to be open\n\nBy default an accordion can only have a single panel open at a time. This functionality can be change with the `multi` input.\n\n```html\n\n ...\n ...\n\n```\n\n#### Accordion events\n\n| Event | Description | Payload |\n|:------------|:--------------------------------------|:--------|\n| `destroyed` | Fired when the accordion is destroyed | `void` |\n\n```html\n...\n```\n\n#### Accordion as a stepper\n\nAn accordion can function as a stepper which can be useful for guided flows. To facilitate this we can use a combination of `hideToggle` and\nthe `ts-expansion-panel-action-row`.\n\n```html\n\n\n \n \n Step 1\n\n And here is my standard panel content.\n\n \n Next\n \n \n\n \n \n Step 2\n\n And here is my standard panel content.\n\n \n Previous\n Next\n \n \n\n \n \n Step 3\n\n And here is my standard panel content.\n\n \n Previous\n End\n \n \n\n```\n\n#### Hide toggle\n\nWhen an accordion is controlled programmatically, the toggle icon can be hidden to avoid confusion for the user. Setting `hideToggle` on the\naccordion will hide the toggle icon for *all panels within*.\n\n> NOTE: This should _only_ be used in cases when the accordion is functioning as a stepper.\n\n```html\n\n ...\n ...\n\n```\n\n#### Action row\n\nThe action row is useful when an accordion is functioning as a stepper. Controls added within the action row will be right aligned as panel\ncontrols.\n\n> NOTE: See [Accordion as a stepper](https://github.com/GetTerminus/terminus-ui/blob/release/projects/library/expansion-panel/src/expansion-panel.component.md#accordion-as-a-stepper) for a complete example.\n\n```html\n\n \n Step 1\n \n\n And here is my standard panel content.\n\n \n \n \n\n```\n\n#### Open or close all panels\n\nAn accordion can programmatically open or close all panels at once.\n\n```typescript\n@ViewChild(TsAccordionComponent, {static: false})\npublic accordion: TsAccordionComponent;\n\n...\n\naccordion.openAll();\naccordion.closeAll();\n```\n\n> NOTE: These methods will *not* change the state of disabled panels.\n\n## Test Helpers\n\nSome helpers are exposed to assist with testing. These are imported from `@terminus/ui-expansion-panel/testing`;\n\n[[source]][test-helpers-src]\n\n| Function |\n|--------------------------------|\n| `getAllPanelDebugElements` |\n| `getAllPanelInstances` |\n| `getPanelDebugElement` |\n| `getPanelInstance` |\n| `getPanelElement` |\n| `getPanelBodyElement` |\n| `getPanelBodyContentElement` |\n| `getAllAccordionDebugElements` |\n| `getAllAccordionInstances` |\n| `getAccordionInstance` |\n| `getAccordionDebugElement` |\n| `getAccordionElement` |\n| `getTriggerDebugElement` |\n| `getTriggerInstance` |\n| `getTriggerElement` |\n| `getTriggerTitleElement` |\n| `getTriggerDescriptionElement` |\n| `getPanelActionRow` |\n| `togglePanel` |\n\n\n\n[test-helpers-src]: testing/src/test-helpers.ts\n[license-url]: https://github.com/GetTerminus/terminus-oss/blob/release/LICENSE\n[license-image]: http://img.shields.io/badge/license-MIT-blue.svg\n[codecov-project]: https://codecov.io/gh/GetTerminus/terminus-oss\n[codecov-badge]: https://codecov.io/gh/GetTerminus/terminus-oss/branch/release/graph/badge.svg\n[npm-version-image]: http://img.shields.io/npm/v/@terminus/ui-button.svg\n[npm-package]: https://www.npmjs.com/package/@terminus/ui-button\n[github-action-badge]: https://github.com/GetTerminus/terminus-oss/workflows/Release%20CI/badge.svg\n[github-action-link]: https://github.com/GetTerminus/terminus-oss/actions?query=workflow%3A%22CI+Release%22\n[file-size-badge]: http://img.badgesize.io/https://unpkg.com/@terminus/ui-button/bundles/terminus-ui-button.umd.min.js?compression=gzip\n[raw-distribution-js]: https://unpkg.com/@terminus/ui-button/bundles/terminus-ui-button.umd.js\n","readmeFilename":"README.md","description":"

Expansion Panel

","_id":"@terminus/ui-expansion-panel@1.0.16","_nodeVersion":"12.18.3","_npmVersion":"lerna/3.22.1/node@v12.18.3+x64 (linux)","dist":{"integrity":"sha512-/6oHzedFOIWA+ib1PDrq2G0+8/itgZe9ghk++uCrz+IXVD9OCxAHnSQHNzi0nR6y1eDGiXL5pTJRKKwuZYRvWA==","shasum":"92d410bfe1b5e2866642d0ffb2d3aed331705d2f","tarball":"https://registry.npmjs.org/@terminus/ui-expansion-panel/-/ui-expansion-panel-1.0.16.tgz","fileCount":117,"unpackedSize":758643,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfMaB1CRA9TVsSAnZWagAAkwgP/09uHcudJkNLBjS0bev8\nKExzRR4d4MChj8SaspOfjZimUq2Xohszrl3oRLAZh9P7gOyk90Cu2Y0iawSX\ngHWWPDEJLH17wg3YFMTroP+OKbqKVJkxB7m8PYfLp2jXDD8GzcB301R7paGF\nkeLQfSx6Bq4f/celJxu2zCQxd6yuHODYOS1op0D6bVqVMggIPYk5FhZfykdB\nrBtHOyf6iaT+jWLFYB9GtaRb13OcLuZC7g6ai0dA/6SrlCsYpCNSrs4owqPY\nEow0+mrMq13W0A997r+za6HEkyxCoY2vEgDprTbFwnHlKweTbt0kfaYOrMxs\n9syI0QvnP11xDz0jrFcRlhilfoCezP9m1WLSGEt6gN/VjBVjjGl77JicpRfF\nI7GQowEXJdANmriyH2EpEcKbDd6rNA/+dsWxHVatb4cChTaaLtD0Yi4NxNCz\ni9EyqoqhEyitG3LYg+EWj5HHETEZTP54K+LD3tV6aYVMEv1xIh3ECGIe99xl\nJ5A8GkJcYEZR0hNi3gfFOFHHh5xk78+7LwMQ1H74z4cz75rLVuPXc0NlAybN\nOHj9cLr9lNUnWB3EWX0jyfSMucemFLcCWV0sW3FhyQRhhE80swUpeDtXyUp8\nUg9CEr4ji8sHG4wE533He26gsMGIeM11DO2FqE2NSOYiDvQBuIfmDm1gAfe1\n7JN5\r\n=89uQ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDifkV4MN12C8aDjjSn3RQsX8MhzxEVD+FP4egs3Ytw+QIgaVqWndsYNIhNbxBRpfqvUWD5j9eYNbFyN/YviC0gxRg="}]},"maintainers":[{"name":"atlwendy","email":"atlwendy@gmail.com"},{"name":"benjamincharity","email":"ben@benjamincharity.com"},{"name":"bmalinconico-terminus","email":"brian.malinconico@terminus.com"},{"name":"terminus_devops","email":"devops@terminus.com"}],"_npmUser":{"name":"terminus_devops","email":"devops@terminus.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ui-expansion-panel_1.0.16_1597087860604_0.8223931332423509"},"_hasShrinkwrap":false},"1.0.17":{"name":"@terminus/ui-expansion-panel","version":"1.0.17","license":"MIT","author":{"name":"@terminus"},"private":false,"homepage":"https://github.com/GetTerminus/terminus-oss","repository":{"type":"git","url":"git+https://github.com/GetTerminus/terminus-oss.git"},"bugs":{"url":"https://github.com/GetTerminus/terminus-oss/issues"},"publishConfig":{"access":"public","tag":"next","directory":"../../../dist/libs/ui/expansion-panel"},"peerDependencies":{"@angular/animations":"^9.1.0","@angular/cdk":"^9.1.0","@angular/common":"^9.1.0","@angular/core":"^9.1.0","@angular/platform-browser":"^9.1.0","@terminus/design-tokens":"^3.1.0","@terminus/fe-utilities":"^1.1.0","rxjs":"^6.5.0"},"schematics":"./schematics/collection.json","main":"bundles/terminus-ui-expansion-panel.umd.js","module":"fesm5/terminus-ui-expansion-panel.js","es2015":"fesm2015/terminus-ui-expansion-panel.js","esm5":"esm5/terminus-ui-expansion-panel.js","esm2015":"esm2015/terminus-ui-expansion-panel.js","fesm5":"fesm5/terminus-ui-expansion-panel.js","fesm2015":"fesm2015/terminus-ui-expansion-panel.js","typings":"terminus-ui-expansion-panel.d.ts","metadata":"terminus-ui-expansion-panel.metadata.json","sideEffects":false,"dependencies":{"tslib":"^1.10.0","@angular/forms":"9.1.11","date-fns":"2.15.0","@terminus/ui-button":"2.0.11","@terminus/ui-icon":"2.0.8","@angular-devkit/schematics":"9.1.9","@schematics/angular":"9.1.12","@fortawesome/fontawesome-svg-core":"1.2.30","@fortawesome/angular-fontawesome":"0.6.0","@fortawesome/pro-regular-svg-icons":"5.14.0","@angular/material":"9.2.4","@terminus/ui-card":"2.0.8","@terminus/ui-utilities":"1.0.12","@fortawesome/pro-solid-svg-icons":"5.14.0"},"readme":"

Expansion Panel

\n\n[![CI/CD Status][github-action-badge]][github-action-link] [![Codecov][codecov-badge]][codecov-project] [![MIT License][license-image]][license-url] \n[![NPM version][npm-version-image]][npm-package] [![Library size][file-size-badge]][raw-distribution-js]\n\nExpansion panel & accordion components.\n\n\n\n## Table of Contents\n\n- [Installation](#installation)\n - [Packages that need to be installed](#packages-that-need-to-be-installed)\n - [Modules that need to be in NgModule](#modules-that-need-to-be-in-ngmodule)\n - [CSS imports](#css-imports)\n - [CSS resources](#css-resources)\n- [Usage](#usage)\n - [Panel](#panel)\n - [Title and description](#title-and-description)\n - [Disable a panel](#disable-a-panel)\n - [Default a panel open](#default-a-panel-open)\n - [Lazy loaded content](#lazy-loaded-content)\n - [Transparent mode](#transparent-mode)\n - [Panel events](#panel-events)\n - [Custom trigger heights](#custom-trigger-heights)\n - [Manual control](#manual-control)\n - [Accordion](#accordion)\n - [Allow multiple panels to be open](#allow-multiple-panels-to-be-open)\n - [Accordion events](#accordion-events)\n - [Accordion as a stepper](#accordion-as-a-stepper)\n - [Hide toggle](#hide-toggle)\n - [Action row](#action-row)\n - [Open or close all panels](#open-or-close-all-panels)\n- [Test Helpers](#test-helpers)\n\n\n\n## Installation\n\n### Packages that need to be installed\n\n- `@angular/cdk`\n- `@angular/common`\n- `@angular/core`\n- `@angular/flex-layout`\n- `@angular/forms`\n- `@angular/platform-browser`\n- `@terminus/design-tokens`\n- `@terminus/fe-utilities`\n- `@terminus/ui-utilities`\n- `@terminus/ui-expansion-panel`\n- `date-fns`\n\nUse the `ng add` command to quickly install all the needed dependencies:\n\n```bash\nng add @terminus/ui-expansion-panel\n```\n\n### Modules that need to be in NgModule\n\n- `BrowserAnimationsModule,`\n- `TsExpansionPanelModule,`\n\n### CSS imports\n\nIn your top level stylesheet, add these imports:\n\n```css\n@import '~@terminus/design-tokens/css/library-design-tokens.css';\n@import '~@terminus/ui-styles/terminus-ui.css';\n``` \n\n### CSS resources\n\nLoad the needed font families by adding this link to the `` of your application:\n\n```css\n\n```\n\n## Usage\n\n### Panel\n\nThe most basic usage is a single panel with a trigger:\n\n```html\n\n \n Here is my trigger!\n \n\n

And here is my standard panel content.

\n\n```\n\n> NOTE: Without a trigger, the panel will not be visible.\n\n#### Title and description\n\nTrigger text can be split into `title` and `description` using the `TsExpansionPanelTitleComponent` and\n`TsExpansionPanelDescriptionComponent` respectively.\n\n```html\n\n\n Here is my trigger!\n\n\n\n\n\n \n My title\n \n\n \n My description\n \n\n```\n\n#### Disable a panel\n\nThe `isDisabled` flag will disable a panel and it's trigger:\n\n```html\n\n \n Here is my trigger!\n \n\n

I will never be seen.

\n\n```\n\n#### Default a panel open\n\nThe `isExpanded` flag will change the state of a panel. This can be used to default to a specific state or to dynamically change the state.\n\n```html\n\n \n Here is my trigger!\n \n\n

I'll be visible by default!

\n\n```\n\n#### Lazy loaded content\n\nPanel content can be lazily loaded by using a template with the `tsExpansionPanelContent` directive. The template will not be loaded until\nthe panel is opened for the first time. The content will remain in the DOM until the panel is destroyed.\n\n```html\n\n \n Here is my trigger!\n \n\n \n Here is my deferred template!\n \n\n```\n\n#### Transparent mode\n\nExpansion panel with transparent mode on has no box shadow and padding on the side. It's default to `false`.\n\n```html\n\n \n Here is my trigger!\n \n\n

And here is my standard panel content.

\n\n```\n\n#### Panel events\n\n| Event | Description | Payload |\n|:-----------------|:---------------------------------------------------|:----------|\n| `opened` | Fired when the panel is opened | `void` |\n| `afterExpand` | Fired after the panel expansion animation finishes | `void` |\n| `closed` | Fired when the panel is closed | `void` |\n| `afterCollapse` | Fired after the panel collapse animation finishes | `void` |\n| `expandedChange` | Fired when the panel state changes | `boolean` |\n| `destroyed` | Fired when the panel is destroyed | `void` |\n\n```html\n...\n```\n\n#### Custom trigger heights\n\nCustom heights can be set for a trigger's collapsed and/or expanded state.\n\n```html\n\n \n Panel Trigger (100px -> 200px)\n\n

And here is my standard panel content.

\n\n```\n\n#### Manual control\n\nPanels can be programmatically opened, closed or toggled through a reference to the instance:\n\n```typescript\n@ViewChild(TsExpansionPanelComponent, {static: false})\npublic panel: TsExpansionPanelComponent;\n\n...\n\npanel.open();\npanel.close();\npanel.toggle();\n```\n\n> NOTE: Disabled panels cannot be controlled with these methods. Disabled panels can _only_ be controlled via the `isExpanded` input.\n\n### Accordion\n\nAn accordion is created by wrapping two or more `TsExpansionPanelComponent`s inside a `TsAccordionComponent`.\n\n```html\n\n ...\n ...\n\n```\n\n#### Allow multiple panels to be open\n\nBy default an accordion can only have a single panel open at a time. This functionality can be change with the `multi` input.\n\n```html\n\n ...\n ...\n\n```\n\n#### Accordion events\n\n| Event | Description | Payload |\n|:------------|:--------------------------------------|:--------|\n| `destroyed` | Fired when the accordion is destroyed | `void` |\n\n```html\n...\n```\n\n#### Accordion as a stepper\n\nAn accordion can function as a stepper which can be useful for guided flows. To facilitate this we can use a combination of `hideToggle` and\nthe `ts-expansion-panel-action-row`.\n\n```html\n\n\n \n \n Step 1\n\n And here is my standard panel content.\n\n \n Next\n \n \n\n \n \n Step 2\n\n And here is my standard panel content.\n\n \n Previous\n Next\n \n \n\n \n \n Step 3\n\n And here is my standard panel content.\n\n \n Previous\n End\n \n \n\n```\n\n#### Hide toggle\n\nWhen an accordion is controlled programmatically, the toggle icon can be hidden to avoid confusion for the user. Setting `hideToggle` on the\naccordion will hide the toggle icon for *all panels within*.\n\n> NOTE: This should _only_ be used in cases when the accordion is functioning as a stepper.\n\n```html\n\n ...\n ...\n\n```\n\n#### Action row\n\nThe action row is useful when an accordion is functioning as a stepper. Controls added within the action row will be right aligned as panel\ncontrols.\n\n> NOTE: See [Accordion as a stepper](https://github.com/GetTerminus/terminus-ui/blob/release/projects/library/expansion-panel/src/expansion-panel.component.md#accordion-as-a-stepper) for a complete example.\n\n```html\n\n \n Step 1\n \n\n And here is my standard panel content.\n\n \n \n \n\n```\n\n#### Open or close all panels\n\nAn accordion can programmatically open or close all panels at once.\n\n```typescript\n@ViewChild(TsAccordionComponent, {static: false})\npublic accordion: TsAccordionComponent;\n\n...\n\naccordion.openAll();\naccordion.closeAll();\n```\n\n> NOTE: These methods will *not* change the state of disabled panels.\n\n## Test Helpers\n\nSome helpers are exposed to assist with testing. These are imported from `@terminus/ui-expansion-panel/testing`;\n\n[[source]][test-helpers-src]\n\n| Function |\n|--------------------------------|\n| `getAllPanelDebugElements` |\n| `getAllPanelInstances` |\n| `getPanelDebugElement` |\n| `getPanelInstance` |\n| `getPanelElement` |\n| `getPanelBodyElement` |\n| `getPanelBodyContentElement` |\n| `getAllAccordionDebugElements` |\n| `getAllAccordionInstances` |\n| `getAccordionInstance` |\n| `getAccordionDebugElement` |\n| `getAccordionElement` |\n| `getTriggerDebugElement` |\n| `getTriggerInstance` |\n| `getTriggerElement` |\n| `getTriggerTitleElement` |\n| `getTriggerDescriptionElement` |\n| `getPanelActionRow` |\n| `togglePanel` |\n\n\n[test-helpers-src]: testing/src/test-helpers.ts\n[license-url]: https://github.com/GetTerminus/terminus-oss/blob/release/LICENSE\n[license-image]: http://img.shields.io/badge/license-MIT-blue.svg\n[codecov-project]: https://codecov.io/gh/GetTerminus/terminus-oss\n[codecov-badge]: https://codecov.io/gh/GetTerminus/terminus-oss/branch/release/graph/badge.svg\n[npm-version-image]: http://img.shields.io/npm/v/@terminus/ui-button.svg\n[npm-package]: https://www.npmjs.com/package/@terminus/ui-button\n[github-action-badge]: https://github.com/GetTerminus/terminus-oss/workflows/Release%20CI/badge.svg\n[github-action-link]: https://github.com/GetTerminus/terminus-oss/actions?query=workflow%3A%22CI+Release%22\n[file-size-badge]: http://img.badgesize.io/https://unpkg.com/@terminus/ui-button/bundles/terminus-ui-button.umd.min.js?compression=gzip\n[raw-distribution-js]: https://unpkg.com/@terminus/ui-button/bundles/terminus-ui-button.umd.js\n","readmeFilename":"README.md","description":"

Expansion Panel

","_id":"@terminus/ui-expansion-panel@1.0.17","_nodeVersion":"12.18.3","_npmVersion":"lerna/3.22.1/node@v12.18.3+x64 (linux)","dist":{"integrity":"sha512-q60tMKcCXcAiPJ515/iSFpBif8lrUUjor8mj7Y48+Uyyw48aTwrKBPYaB9oo1J5cXuyv5muSbRoV/lClX1eo2g==","shasum":"01e0cc9f0f3a43015925de0343fee634c92919ae","tarball":"https://registry.npmjs.org/@terminus/ui-expansion-panel/-/ui-expansion-panel-1.0.17.tgz","fileCount":117,"unpackedSize":758805,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNq4DCRA9TVsSAnZWagAAFf4P/0c7iYYsI6LPDgFi2U7s\nsQzuoOerwsubLVDC8G3WYCPnj4OIXTqJSV62O59zHH/Wmzx0pQYapIiqn8io\nLLZ3UrZNTLwRNv+jsKyn8+pSstZkhGYIFgmn6MC00JHE3pNNMx5Wp193lBXH\nzwtYa0cyPah1ZTOLMWym39oY0V2RT3KSmAwCx32hYu/ZTIVsCkN27bcAiF8J\nP760HiWzrZEibt3Y7PZ6rh0PCqs1XFdMbhj/0/gFnuibIhYiLHLtlc2yQsZK\n37uotpFk3aL0HN0xs27lyeZfJno/fphO6BhghjXyBD8+2QsujxqU5JNu/qkk\nThNV/GAk0jQWxp0IsQeuGKFLAwc2jKyGtbVEH23M8bV+smodD5Ylx9HNp44O\n5j5tKeF54t/+x8EFo3dzVG/wqaKl2ZlXZZn2RtouVh6Z15jNqtOJ3T9Knw/2\nq2arRSWIHpyF6LB/NYoDg8IK4oAfhH5H7qJtsQuLFCGXjKvvUSpsq5X2ZDRf\n7wczY7gtj5JOHe6Z3gqTScm30XfvV/Xh6kKz6a48V4kwDDfx06c6WbGLmJmW\n6Mv0Hr9HsvDpu+9PVioBvwAr7OiXq2KmmxhAGAKbDnj9PtYFHsnXcEQmpKNW\nlfvzDyWHepi/ZBNDR1LGd+dP3m90/TlwyjB52ZJG/CAinpfagqDd5TwCzN2S\nC62T\r\n=SzTN\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIE0WuzhGfq+xNPb5DwpXvorq5mlXp0VuUKqKMMrSoukQAiEAit53SamXQZTcaccFchrEPVjWsaw14HClCJRkgfF76lQ="}]},"maintainers":[{"name":"atlwendy","email":"atlwendy@gmail.com"},{"name":"benjamincharity","email":"ben@benjamincharity.com"},{"name":"bmalinconico-terminus","email":"brian.malinconico@terminus.com"},{"name":"terminus_devops","email":"devops@terminus.com"}],"_npmUser":{"name":"terminus_devops","email":"devops@terminus.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ui-expansion-panel_1.0.17_1597419010983_0.14154447635600875"},"_hasShrinkwrap":false},"1.0.18":{"name":"@terminus/ui-expansion-panel","version":"1.0.18","license":"MIT","author":{"name":"@terminus"},"private":false,"homepage":"https://github.com/GetTerminus/terminus-oss","repository":{"type":"git","url":"git+https://github.com/GetTerminus/terminus-oss.git"},"bugs":{"url":"https://github.com/GetTerminus/terminus-oss/issues"},"publishConfig":{"access":"public","tag":"next","directory":"../../../dist/libs/ui/expansion-panel"},"peerDependencies":{"@angular/animations":"^9.1.0","@angular/cdk":"^9.1.0","@angular/common":"^9.1.0","@angular/core":"^9.1.0","@angular/platform-browser":"^9.1.0","@terminus/design-tokens":"^3.1.0","@terminus/fe-utilities":"^1.1.0","rxjs":"^6.5.0"},"schematics":"./schematics/collection.json","main":"bundles/terminus-ui-expansion-panel.umd.js","module":"fesm5/terminus-ui-expansion-panel.js","es2015":"fesm2015/terminus-ui-expansion-panel.js","esm5":"esm5/terminus-ui-expansion-panel.js","esm2015":"esm2015/terminus-ui-expansion-panel.js","fesm5":"fesm5/terminus-ui-expansion-panel.js","fesm2015":"fesm2015/terminus-ui-expansion-panel.js","typings":"terminus-ui-expansion-panel.d.ts","metadata":"terminus-ui-expansion-panel.metadata.json","sideEffects":false,"dependencies":{"tslib":"^1.10.0","@angular/forms":"9.1.11","date-fns":"2.15.0","@terminus/ui-button":"2.0.13","@terminus/ui-icon":"2.0.8","@angular-devkit/schematics":"9.1.9","@schematics/angular":"9.1.12","@fortawesome/fontawesome-svg-core":"1.2.30","@fortawesome/angular-fontawesome":"0.6.0","@fortawesome/pro-solid-svg-icons":"5.14.0","@angular/material":"9.2.4","@terminus/ui-card":"2.0.9","@terminus/ui-utilities":"1.0.12"},"readme":"

Expansion Panel

\n\n[![CI/CD Status][github-action-badge]][github-action-link] [![Codecov][codecov-badge]][codecov-project] [![MIT License][license-image]][license-url] \n[![NPM version][npm-version-image]][npm-package] [![Library size][file-size-badge]][raw-distribution-js]\n\nExpansion panel & accordion components.\n\n\n\n## Table of Contents\n\n- [Installation](#installation)\n - [Packages that need to be installed](#packages-that-need-to-be-installed)\n - [Modules that need to be in NgModule](#modules-that-need-to-be-in-ngmodule)\n - [CSS imports](#css-imports)\n - [CSS resources](#css-resources)\n- [Usage](#usage)\n - [Panel](#panel)\n - [Title and description](#title-and-description)\n - [Disable a panel](#disable-a-panel)\n - [Default a panel open](#default-a-panel-open)\n - [Lazy loaded content](#lazy-loaded-content)\n - [Transparent mode](#transparent-mode)\n - [Panel events](#panel-events)\n - [Custom trigger heights](#custom-trigger-heights)\n - [Manual control](#manual-control)\n - [Accordion](#accordion)\n - [Allow multiple panels to be open](#allow-multiple-panels-to-be-open)\n - [Accordion events](#accordion-events)\n - [Accordion as a stepper](#accordion-as-a-stepper)\n - [Hide toggle](#hide-toggle)\n - [Action row](#action-row)\n - [Open or close all panels](#open-or-close-all-panels)\n- [Test Helpers](#test-helpers)\n\n\n\n## Installation\n\n### Packages that need to be installed\n\n- `@angular/cdk`\n- `@angular/common`\n- `@angular/core`\n- `@angular/flex-layout`\n- `@angular/forms`\n- `@angular/platform-browser`\n- `@terminus/design-tokens`\n- `@terminus/fe-utilities`\n- `@terminus/ui-utilities`\n- `@terminus/ui-expansion-panel`\n- `date-fns`\n\nUse the `ng add` command to quickly install all the needed dependencies:\n\n```bash\nng add @terminus/ui-expansion-panel\n```\n\n### Modules that need to be in NgModule\n\n- `BrowserAnimationsModule,`\n- `TsExpansionPanelModule,`\n\n### CSS imports\n\nIn your top level stylesheet, add these imports:\n\n```css\n@import '~@terminus/design-tokens/css/library-design-tokens.css';\n@import '~@terminus/ui-styles/terminus-ui.css';\n``` \n\n### CSS resources\n\nLoad the needed font families by adding this link to the `` of your application:\n\n```css\n\n```\n\n## Usage\n\n### Panel\n\nThe most basic usage is a single panel with a trigger:\n\n```html\n\n \n Here is my trigger!\n \n\n

And here is my standard panel content.

\n\n```\n\n> NOTE: Without a trigger, the panel will not be visible.\n\n#### Title and description\n\nTrigger text can be split into `title` and `description` using the `TsExpansionPanelTitleComponent` and\n`TsExpansionPanelDescriptionComponent` respectively.\n\n```html\n\n\n Here is my trigger!\n\n\n\n\n\n \n My title\n \n\n \n My description\n \n\n```\n\n#### Disable a panel\n\nThe `isDisabled` flag will disable a panel and it's trigger:\n\n```html\n\n \n Here is my trigger!\n \n\n

I will never be seen.

\n\n```\n\n#### Default a panel open\n\nThe `isExpanded` flag will change the state of a panel. This can be used to default to a specific state or to dynamically change the state.\n\n```html\n\n \n Here is my trigger!\n \n\n

I'll be visible by default!

\n\n```\n\n#### Lazy loaded content\n\nPanel content can be lazily loaded by using a template with the `tsExpansionPanelContent` directive. The template will not be loaded until\nthe panel is opened for the first time. The content will remain in the DOM until the panel is destroyed.\n\n```html\n\n \n Here is my trigger!\n \n\n \n Here is my deferred template!\n \n\n```\n\n#### Transparent mode\n\nExpansion panel with transparent mode on has no box shadow and padding on the side. It's default to `false`.\n\n```html\n\n \n Here is my trigger!\n \n\n

And here is my standard panel content.

\n\n```\n\n#### Panel events\n\n| Event | Description | Payload |\n|:-----------------|:---------------------------------------------------|:----------|\n| `opened` | Fired when the panel is opened | `void` |\n| `afterExpand` | Fired after the panel expansion animation finishes | `void` |\n| `closed` | Fired when the panel is closed | `void` |\n| `afterCollapse` | Fired after the panel collapse animation finishes | `void` |\n| `expandedChange` | Fired when the panel state changes | `boolean` |\n| `destroyed` | Fired when the panel is destroyed | `void` |\n\n```html\n...\n```\n\n#### Custom trigger heights\n\nCustom heights can be set for a trigger's collapsed and/or expanded state.\n\n```html\n\n \n Panel Trigger (100px -> 200px)\n\n

And here is my standard panel content.

\n\n```\n\n#### Manual control\n\nPanels can be programmatically opened, closed or toggled through a reference to the instance:\n\n```typescript\n@ViewChild(TsExpansionPanelComponent, {static: false})\npublic panel: TsExpansionPanelComponent;\n\n...\n\npanel.open();\npanel.close();\npanel.toggle();\n```\n\n> NOTE: Disabled panels cannot be controlled with these methods. Disabled panels can _only_ be controlled via the `isExpanded` input.\n\n### Accordion\n\nAn accordion is created by wrapping two or more `TsExpansionPanelComponent`s inside a `TsAccordionComponent`.\n\n```html\n\n ...\n ...\n\n```\n\n#### Allow multiple panels to be open\n\nBy default an accordion can only have a single panel open at a time. This functionality can be change with the `multi` input.\n\n```html\n\n ...\n ...\n\n```\n\n#### Accordion events\n\n| Event | Description | Payload |\n|:------------|:--------------------------------------|:--------|\n| `destroyed` | Fired when the accordion is destroyed | `void` |\n\n```html\n...\n```\n\n#### Accordion as a stepper\n\nAn accordion can function as a stepper which can be useful for guided flows. To facilitate this we can use a combination of `hideToggle` and\nthe `ts-expansion-panel-action-row`.\n\n```html\n\n\n \n \n Step 1\n\n And here is my standard panel content.\n\n \n Next\n \n \n\n \n \n Step 2\n\n And here is my standard panel content.\n\n \n Previous\n Next\n \n \n\n \n \n Step 3\n\n And here is my standard panel content.\n\n \n Previous\n End\n \n \n\n```\n\n#### Hide toggle\n\nWhen an accordion is controlled programmatically, the toggle icon can be hidden to avoid confusion for the user. Setting `hideToggle` on the\naccordion will hide the toggle icon for *all panels within*.\n\n> NOTE: This should _only_ be used in cases when the accordion is functioning as a stepper.\n\n```html\n\n ...\n ...\n\n```\n\n#### Action row\n\nThe action row is useful when an accordion is functioning as a stepper. Controls added within the action row will be right aligned as panel\ncontrols.\n\n> NOTE: See [Accordion as a stepper](https://github.com/GetTerminus/terminus-ui/blob/release/projects/library/expansion-panel/src/expansion-panel.component.md#accordion-as-a-stepper) for a complete example.\n\n```html\n\n \n Step 1\n \n\n And here is my standard panel content.\n\n \n \n \n\n```\n\n#### Open or close all panels\n\nAn accordion can programmatically open or close all panels at once.\n\n```typescript\n@ViewChild(TsAccordionComponent, {static: false})\npublic accordion: TsAccordionComponent;\n\n...\n\naccordion.openAll();\naccordion.closeAll();\n```\n\n> NOTE: These methods will *not* change the state of disabled panels.\n\n## Test Helpers\n\nSome helpers are exposed to assist with testing. These are imported from `@terminus/ui-expansion-panel/testing`;\n\n[[source]][test-helpers-src]\n\n| Function |\n|--------------------------------|\n| `getAllPanelDebugElements` |\n| `getAllPanelInstances` |\n| `getPanelDebugElement` |\n| `getPanelInstance` |\n| `getPanelElement` |\n| `getPanelBodyElement` |\n| `getPanelBodyContentElement` |\n| `getAllAccordionDebugElements` |\n| `getAllAccordionInstances` |\n| `getAccordionInstance` |\n| `getAccordionDebugElement` |\n| `getAccordionElement` |\n| `getTriggerDebugElement` |\n| `getTriggerInstance` |\n| `getTriggerElement` |\n| `getTriggerTitleElement` |\n| `getTriggerDescriptionElement` |\n| `getPanelActionRow` |\n| `togglePanel` |\n\n\n[test-helpers-src]: testing/src/test-helpers.ts\n[license-url]: https://github.com/GetTerminus/terminus-oss/blob/release/LICENSE\n[license-image]: http://img.shields.io/badge/license-MIT-blue.svg\n[codecov-project]: https://codecov.io/gh/GetTerminus/terminus-oss\n[codecov-badge]: https://codecov.io/gh/GetTerminus/terminus-oss/branch/release/graph/badge.svg\n[npm-version-image]: http://img.shields.io/npm/v/@terminus/ui-button.svg\n[npm-package]: https://www.npmjs.com/package/@terminus/ui-button\n[github-action-badge]: https://github.com/GetTerminus/terminus-oss/workflows/Release%20CI/badge.svg\n[github-action-link]: https://github.com/GetTerminus/terminus-oss/actions?query=workflow%3A%22CI+Release%22\n[file-size-badge]: http://img.badgesize.io/https://unpkg.com/@terminus/ui-button/bundles/terminus-ui-button.umd.min.js?compression=gzip\n[raw-distribution-js]: https://unpkg.com/@terminus/ui-button/bundles/terminus-ui-button.umd.js\n","readmeFilename":"README.md","description":"

Expansion Panel

","_id":"@terminus/ui-expansion-panel@1.0.18","_nodeVersion":"12.18.3","_npmVersion":"lerna/3.22.1/node@v12.18.3+x64 (linux)","dist":{"integrity":"sha512-5/6n4sAAs6J7CBFdJ0oYeO996Y0+NRq5ArVAXJN2Dcm++rHfkAowR0bsy+iqva3Ouwl3K/xVvlBszvOiv4DoQQ==","shasum":"fe147a1cfd74bcba2916226316679b31004bcf38","tarball":"https://registry.npmjs.org/@terminus/ui-expansion-panel/-/ui-expansion-panel-1.0.18.tgz","fileCount":117,"unpackedSize":758980,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfP7UvCRA9TVsSAnZWagAAx1kP/RBU4/6cB1tA2Qk3TNlL\nA+FmJkVYSJ1V4MHrPVfUDhKdBzlfikQin/rn+dNThSktxU6eg0YbnSR3aE5S\ncoM9U378YncmJ7MqSWu28ZafVS2nEZsd2NGByZ0/kqRcpporuopckF80oSug\nwXXsC0VNyWzIxl3+cE3KS0zx0t8yPjvAxnpTdYH6EESgqrAzt28y+yvrHdE/\n27ZcOnLdhBOglIQR2oKYII/RybI7wPdQQX2HukNd1uoteDGKqvrp1DbllQNk\nqMvsO3HilyTg7NplDVVZANxEzlVYhgAH5osuvkodVaZ4ZLFleK+QTYQwVAz2\noQ2CVMu9hlLLoHq47e5PhWWMyaq2StYaU03yRWJycAMKFZGmCiiCS6ID0ZdA\nkEM02l0a4EkTjcNk9VM0UeEbYECLo3f6WP8XnrWB/27jePUCMMLbcJUg8kgc\n6+tMgUXDks9HV2WI6rMdzAB2CUx/RJvAsbl0YXNZK0NXHvL1yOsZuD7hF39f\nYlf+tM51xcdhWacKEzUqgoR5DRXo6lEur4bWqT0MQeUgZo92XD6X190e24/R\n2NvjW3EDL1Upq7Tu4+CImCRdIOQ+Ow4jk3pUvQtvDMd1yBoXlYPzUSHhGYbj\n6NpeGZJ0O1jUCBy7XyABEhQ6oPP0z5FzzQ9LP9p0+YL4ENyeMW0mLXIrSvuK\nLd/m\r\n=7DaN\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDLT6ajYSUAYZX20J+IkutMRjLwgU/jR8RNrak0ywH7jQIgfMO6rJ7W04n4bfB9t8Vg5D+x7/KTikJyqRGj5YzqoEE="}]},"maintainers":[{"name":"atlwendy","email":"atlwendy@gmail.com"},{"name":"benjamincharity","email":"ben@benjamincharity.com"},{"name":"bmalinconico-terminus","email":"brian.malinconico@terminus.com"},{"name":"terminus_devops","email":"devops@terminus.com"}],"_npmUser":{"name":"terminus_devops","email":"devops@terminus.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ui-expansion-panel_1.0.18_1598010670959_0.34714377717281786"},"_hasShrinkwrap":false},"1.0.19":{"name":"@terminus/ui-expansion-panel","version":"1.0.19","license":"MIT","author":{"name":"@terminus"},"private":false,"homepage":"https://github.com/GetTerminus/terminus-oss","repository":{"type":"git","url":"git+https://github.com/GetTerminus/terminus-oss.git"},"bugs":{"url":"https://github.com/GetTerminus/terminus-oss/issues"},"publishConfig":{"access":"public","tag":"next","directory":"../../../dist/libs/ui/expansion-panel"},"peerDependencies":{"@angular/animations":"^9.1.0","@angular/cdk":"^9.1.0","@angular/common":"^9.1.0","@angular/core":"^9.1.0","@angular/platform-browser":"^9.1.0","@terminus/design-tokens":"^3.1.0","@terminus/fe-utilities":"^1.1.0","rxjs":"^6.5.0"},"schematics":"./schematics/collection.json","main":"bundles/terminus-ui-expansion-panel.umd.js","module":"fesm5/terminus-ui-expansion-panel.js","es2015":"fesm2015/terminus-ui-expansion-panel.js","esm5":"esm5/terminus-ui-expansion-panel.js","esm2015":"esm2015/terminus-ui-expansion-panel.js","fesm5":"fesm5/terminus-ui-expansion-panel.js","fesm2015":"fesm2015/terminus-ui-expansion-panel.js","typings":"terminus-ui-expansion-panel.d.ts","metadata":"terminus-ui-expansion-panel.metadata.json","sideEffects":false,"dependencies":{"tslib":"^1.10.0","@angular/forms":"9.1.11","date-fns":"2.15.0","@terminus/ui-button":"2.0.14","@terminus/ui-icon":"2.0.8","@angular-devkit/schematics":"9.1.9","@schematics/angular":"9.1.12","@fortawesome/fontawesome-svg-core":"1.2.30","@fortawesome/angular-fontawesome":"0.6.0","@fortawesome/pro-solid-svg-icons":"5.14.0","@angular/material":"9.2.4","@terminus/ui-card":"2.0.9","@terminus/ui-utilities":"1.0.12"},"description":"

Expansion Panel

","_id":"@terminus/ui-expansion-panel@1.0.19","_nodeVersion":"12.18.3","_npmVersion":"lerna/3.22.1/node@v12.18.3+x64 (linux)","dist":{"integrity":"sha512-KsL1ec/QDSOwoTboAlEZFO0xwrzh6gVDvSdUk4+ZXQNaiZPE4y0q8WZw+40O2Pkj7+xU4VkHI+mRuS5hWgbltg==","shasum":"2c26d946c301a0c8f9a595d271c099e474517b3d","tarball":"https://registry.npmjs.org/@terminus/ui-expansion-panel/-/ui-expansion-panel-1.0.19.tgz","fileCount":117,"unpackedSize":759207,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfP9zYCRA9TVsSAnZWagAACncP/RbLSmlrixQWQtacZGbJ\np+4QCNPRfue4KWSTFXqd4bOdnSw6Z6HdNZatXWP7LS14I1lS/1Kq24oZ1phC\nTyU8n+YQGb3eOe6ajNxLXB72KPvjLzyF69M0Y8iCljnFY1yJHDN0Tw3oSIJC\n4AmNoYdipxl4dRbMe7isFQV2gHxOJ7/j9T0VhwY7ZkzMn7y9XZqbeMLNcmLs\n170XdTjhtzCntjbhR3YNU58ei2NMZx/IJctkFZWkFcZpH7RCwUbtuoJxslx6\nG92r0NXOddHu7FA1Fm+IlRM1W07IOvLqNTqnwYszzt2ov4EkoIDK9h3i3468\nJa3wSehRMOrEZ/I25lhu2pqlrgv8Ko8qgjxQU/mXTjY4sfdC+U4o9UDMnmRf\n8sYs6+eorGv2Wb1QaD0FxtWSyegk/foI2UfQXQThE9fEuKbeOALQsFOVTloa\nlC/iOII4Q58EwNcA615swzMMLJgLkdcblu+PMFCNJSoWhNYTW9IZd3POsLWJ\npc9QD9SqqBV/vvR6J9JgmiIdw2QmLlj/LDDoXy373njaOqQ269CB3jUakjbj\nOt2O7IOuJo7SnU+mCM2guq10FcaLRmnyA/1ZgSh/LTJaWSUTfmUp4ylewBrk\nCNcv0Ek7dIko8Clw4ftaudbgTfmXOuV/rjMd/art9QCJLCYCPECdAJ7wUh2M\nPQ5Y\r\n=5bfu\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDavRXBXFwsYab3tnR3YEYC2aZo/q5uWBoStO74DrybRAiAZL1Eaqqr1wqiFndcF/E7aIKSnjsg6vwGHCBbQyPS+4Q=="}]},"maintainers":[{"name":"atlwendy","email":"atlwendy@gmail.com"},{"name":"benjamincharity","email":"ben@benjamincharity.com"},{"name":"bmalinconico-terminus","email":"brian.malinconico@terminus.com"},{"name":"terminus_devops","email":"devops@terminus.com"}],"_npmUser":{"name":"terminus_devops","email":"devops@terminus.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ui-expansion-panel_1.0.19_1598020824444_0.030696964452189723"},"_hasShrinkwrap":false},"1.0.20":{"name":"@terminus/ui-expansion-panel","version":"1.0.20","license":"MIT","author":{"name":"@terminus"},"private":false,"homepage":"https://github.com/GetTerminus/terminus-oss","repository":{"type":"git","url":"git+https://github.com/GetTerminus/terminus-oss.git"},"bugs":{"url":"https://github.com/GetTerminus/terminus-oss/issues"},"publishConfig":{"access":"public","tag":"next","directory":"../../../dist/libs/ui/expansion-panel"},"peerDependencies":{"@angular/animations":"^9.1.0","@angular/cdk":"^9.1.0","@angular/common":"^9.1.0","@angular/core":"^9.1.0","@angular/platform-browser":"^9.1.0","@terminus/design-tokens":"^3.1.0","@terminus/fe-utilities":"^1.1.0","rxjs":"^6.5.0"},"schematics":"./schematics/collection.json","main":"bundles/terminus-ui-expansion-panel.umd.js","module":"fesm5/terminus-ui-expansion-panel.js","es2015":"fesm2015/terminus-ui-expansion-panel.js","esm5":"esm5/terminus-ui-expansion-panel.js","esm2015":"esm2015/terminus-ui-expansion-panel.js","fesm5":"fesm5/terminus-ui-expansion-panel.js","fesm2015":"fesm2015/terminus-ui-expansion-panel.js","typings":"terminus-ui-expansion-panel.d.ts","metadata":"terminus-ui-expansion-panel.metadata.json","sideEffects":false,"dependencies":{"tslib":"^1.10.0","@angular/forms":"9.1.11","date-fns":"2.15.0","@terminus/ui-button":"2.0.16","@terminus/ui-icon":"2.0.9","@angular-devkit/schematics":"9.1.9","@schematics/angular":"9.1.12","@fortawesome/fontawesome-svg-core":"1.2.30","@fortawesome/angular-fontawesome":"0.6.0","@fortawesome/pro-solid-svg-icons":"5.14.0","@angular/material":"9.2.4","@terminus/ui-card":"2.0.10","@terminus/ui-utilities":"1.0.12"},"readme":"

Expansion Panel

\n\n[![CI/CD Status][github-action-badge]][github-action-link] [![Codecov][codecov-badge]][codecov-project] [![MIT License][license-image]][license-url] \n[![NPM version][npm-version-image]][npm-package] [![Library size][file-size-badge]][raw-distribution-js]\n\nExpansion panel & accordion components.\n\n\n\n## Table of Contents\n\n- [Installation](#installation)\n - [Packages that need to be installed](#packages-that-need-to-be-installed)\n - [Modules that need to be in NgModule](#modules-that-need-to-be-in-ngmodule)\n - [CSS imports](#css-imports)\n - [CSS resources](#css-resources)\n- [Usage](#usage)\n - [Panel](#panel)\n - [Title and description](#title-and-description)\n - [Disable a panel](#disable-a-panel)\n - [Default a panel open](#default-a-panel-open)\n - [Lazy loaded content](#lazy-loaded-content)\n - [Transparent mode](#transparent-mode)\n - [Panel events](#panel-events)\n - [Custom trigger heights](#custom-trigger-heights)\n - [Manual control](#manual-control)\n - [Accordion](#accordion)\n - [Allow multiple panels to be open](#allow-multiple-panels-to-be-open)\n - [Accordion events](#accordion-events)\n - [Accordion as a stepper](#accordion-as-a-stepper)\n - [Hide toggle](#hide-toggle)\n - [Action row](#action-row)\n - [Open or close all panels](#open-or-close-all-panels)\n- [Test Helpers](#test-helpers)\n\n\n\n## Installation\n\n### Packages that need to be installed\n\n- `@angular/cdk`\n- `@angular/common`\n- `@angular/core`\n- `@angular/flex-layout`\n- `@angular/forms`\n- `@angular/platform-browser`\n- `@terminus/design-tokens`\n- `@terminus/fe-utilities`\n- `@terminus/ui-utilities`\n- `@terminus/ui-expansion-panel`\n- `date-fns`\n\nUse the `ng add` command to quickly install all the needed dependencies:\n\n```bash\nng add @terminus/ui-expansion-panel\n```\n\n### Modules that need to be in NgModule\n\n- `BrowserAnimationsModule,`\n- `TsExpansionPanelModule,`\n\n### CSS imports\n\nIn your top level stylesheet, add these imports:\n\n```css\n@import '~@terminus/design-tokens/css/library-design-tokens.css';\n@import '~@terminus/ui-styles/terminus-ui.css';\n``` \n\n### CSS resources\n\nLoad the needed font families by adding this link to the `` of your application:\n\n```css\n\n```\n\n## Usage\n\n### Panel\n\nThe most basic usage is a single panel with a trigger:\n\n```html\n\n \n Here is my trigger!\n \n\n

And here is my standard panel content.

\n\n```\n\n> NOTE: Without a trigger, the panel will not be visible.\n\n#### Title and description\n\nTrigger text can be split into `title` and `description` using the `TsExpansionPanelTitleComponent` and\n`TsExpansionPanelDescriptionComponent` respectively.\n\n```html\n\n\n Here is my trigger!\n\n\n\n\n\n \n My title\n \n\n \n My description\n \n\n```\n\n#### Disable a panel\n\nThe `isDisabled` flag will disable a panel and it's trigger:\n\n```html\n\n \n Here is my trigger!\n \n\n

I will never be seen.

\n\n```\n\n#### Default a panel open\n\nThe `isExpanded` flag will change the state of a panel. This can be used to default to a specific state or to dynamically change the state.\n\n```html\n\n \n Here is my trigger!\n \n\n

I'll be visible by default!

\n\n```\n\n#### Lazy loaded content\n\nPanel content can be lazily loaded by using a template with the `tsExpansionPanelContent` directive. The template will not be loaded until\nthe panel is opened for the first time. The content will remain in the DOM until the panel is destroyed.\n\n```html\n\n \n Here is my trigger!\n \n\n \n Here is my deferred template!\n \n\n```\n\n#### Transparent mode\n\nExpansion panel with transparent mode on has no box shadow and padding on the side. It's default to `false`.\n\n```html\n\n \n Here is my trigger!\n \n\n

And here is my standard panel content.

\n\n```\n\n#### Panel events\n\n| Event | Description | Payload |\n|:-----------------|:---------------------------------------------------|:----------|\n| `opened` | Fired when the panel is opened | `void` |\n| `afterExpand` | Fired after the panel expansion animation finishes | `void` |\n| `closed` | Fired when the panel is closed | `void` |\n| `afterCollapse` | Fired after the panel collapse animation finishes | `void` |\n| `expandedChange` | Fired when the panel state changes | `boolean` |\n| `destroyed` | Fired when the panel is destroyed | `void` |\n\n```html\n...\n```\n\n#### Custom trigger heights\n\nCustom heights can be set for a trigger's collapsed and/or expanded state.\n\n```html\n\n \n Panel Trigger (100px -> 200px)\n\n

And here is my standard panel content.

\n\n```\n\n#### Manual control\n\nPanels can be programmatically opened, closed or toggled through a reference to the instance:\n\n```typescript\n@ViewChild(TsExpansionPanelComponent, {static: false})\npublic panel: TsExpansionPanelComponent;\n\n...\n\npanel.open();\npanel.close();\npanel.toggle();\n```\n\n> NOTE: Disabled panels cannot be controlled with these methods. Disabled panels can _only_ be controlled via the `isExpanded` input.\n\n### Accordion\n\nAn accordion is created by wrapping two or more `TsExpansionPanelComponent`s inside a `TsAccordionComponent`.\n\n```html\n\n ...\n ...\n\n```\n\n#### Allow multiple panels to be open\n\nBy default an accordion can only have a single panel open at a time. This functionality can be change with the `multi` input.\n\n```html\n\n ...\n ...\n\n```\n\n#### Accordion events\n\n| Event | Description | Payload |\n|:------------|:--------------------------------------|:--------|\n| `destroyed` | Fired when the accordion is destroyed | `void` |\n\n```html\n...\n```\n\n#### Accordion as a stepper\n\nAn accordion can function as a stepper which can be useful for guided flows. To facilitate this we can use a combination of `hideToggle` and\nthe `ts-expansion-panel-action-row`.\n\n```html\n\n\n \n \n Step 1\n\n And here is my standard panel content.\n\n \n Next\n \n \n\n \n \n Step 2\n\n And here is my standard panel content.\n\n \n Previous\n Next\n \n \n\n \n \n Step 3\n\n And here is my standard panel content.\n\n \n Previous\n End\n \n \n\n```\n\n#### Hide toggle\n\nWhen an accordion is controlled programmatically, the toggle icon can be hidden to avoid confusion for the user. Setting `hideToggle` on the\naccordion will hide the toggle icon for *all panels within*.\n\n> NOTE: This should _only_ be used in cases when the accordion is functioning as a stepper.\n\n```html\n\n ...\n ...\n\n```\n\n#### Action row\n\nThe action row is useful when an accordion is functioning as a stepper. Controls added within the action row will be right aligned as panel\ncontrols.\n\n> NOTE: See [Accordion as a stepper](https://github.com/GetTerminus/terminus-ui/blob/release/projects/library/expansion-panel/src/expansion-panel.component.md#accordion-as-a-stepper) for a complete example.\n\n```html\n\n \n Step 1\n \n\n And here is my standard panel content.\n\n \n \n \n\n```\n\n#### Open or close all panels\n\nAn accordion can programmatically open or close all panels at once.\n\n```typescript\n@ViewChild(TsAccordionComponent, {static: false})\npublic accordion: TsAccordionComponent;\n\n...\n\naccordion.openAll();\naccordion.closeAll();\n```\n\n> NOTE: These methods will *not* change the state of disabled panels.\n\n## Test Helpers\n\nSome helpers are exposed to assist with testing. These are imported from `@terminus/ui-expansion-panel/testing`;\n\n[[source]][test-helpers-src]\n\n| Function |\n|--------------------------------|\n| `getAllPanelDebugElements` |\n| `getAllPanelInstances` |\n| `getPanelDebugElement` |\n| `getPanelInstance` |\n| `getPanelElement` |\n| `getPanelBodyElement` |\n| `getPanelBodyContentElement` |\n| `getAllAccordionDebugElements` |\n| `getAllAccordionInstances` |\n| `getAccordionInstance` |\n| `getAccordionDebugElement` |\n| `getAccordionElement` |\n| `getTriggerDebugElement` |\n| `getTriggerInstance` |\n| `getTriggerElement` |\n| `getTriggerTitleElement` |\n| `getTriggerDescriptionElement` |\n| `getPanelActionRow` |\n| `togglePanel` |\n\n\n[test-helpers-src]: testing/src/test-helpers.ts\n[license-url]: https://github.com/GetTerminus/terminus-oss/blob/release/LICENSE\n[license-image]: http://img.shields.io/badge/license-MIT-blue.svg\n[codecov-project]: https://codecov.io/gh/GetTerminus/terminus-oss\n[codecov-badge]: https://codecov.io/gh/GetTerminus/terminus-oss/branch/release/graph/badge.svg\n[npm-version-image]: http://img.shields.io/npm/v/@terminus/ui-button.svg\n[npm-package]: https://www.npmjs.com/package/@terminus/ui-button\n[github-action-badge]: https://github.com/GetTerminus/terminus-oss/workflows/Release%20CI/badge.svg\n[github-action-link]: https://github.com/GetTerminus/terminus-oss/actions?query=workflow%3A%22CI+Release%22\n[file-size-badge]: http://img.badgesize.io/https://unpkg.com/@terminus/ui-button/bundles/terminus-ui-button.umd.min.js?compression=gzip\n[raw-distribution-js]: https://unpkg.com/@terminus/ui-button/bundles/terminus-ui-button.umd.js\n","readmeFilename":"README.md","description":"

Expansion Panel

","_id":"@terminus/ui-expansion-panel@1.0.20","_nodeVersion":"12.18.3","_npmVersion":"lerna/3.22.1/node@v12.18.3+x64 (linux)","dist":{"integrity":"sha512-ehzxBXDIMv6/pSOP4js8RT43SgaDrDIJ+yoXBkfeaZhVerH6mTrInKL4+3mWtHaxnw9nSnxTquRgPmXvwCnNmA==","shasum":"97de034877455e5ce9d0dc09a144e5fb27aa4426","tarball":"https://registry.npmjs.org/@terminus/ui-expansion-panel/-/ui-expansion-panel-1.0.20.tgz","fileCount":117,"unpackedSize":759435,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfRS6tCRA9TVsSAnZWagAAVmIP/36N1eR4AiIoMFgn4M7h\nSx2G5Ngv9JupYvylyKjmKzKXjpdSGV0kpifeR6WV/gOBJockIoHqBaYtq4nY\nasaLaYk7COzFs6h3EvSvUGukd4ZutKbiFJNZ/2mbSdWMSxSFiCKpXAWJHu2W\n6qTRtmeuOaV10ZTAQkwH1NSl7n1+37fXW9+uBldE5jRpabKXJBArgQVcpFiV\np0NElxBrYdKyFwx9AoqoBXnnPdsN+kF41k8nYAk7T6aw41OPw9gguxCC5oOx\n8m7lHcalsAsDOtRhZ/KCz3OPkiMG4w6DKMxdMWLOW/WE4keqSU7x25UjjNGq\nV5qerQy/xCPmMmLAzxVeob1TysSiTJ9beA+sSG1hSdBUVlH2/k6kr3S1V6JK\nQkBIaPe3XdbUBwNSZtyerrWhp5EhPek9cR/U8yMmSYrG/9E0v4dKHrZFwnML\nd61hINKp9OZV8HAkGSASeKIEsQ4xNObCb+rbsafGanAc22vFZUWgei5kR3Mp\nO7rogllpb7V25R+0FM5rUagUliR2SQ32Ux0a7cQnd1NlFHLCmwwVZW7rWI9S\nPfSn1ssneitwdAV0KZQMkiWfgdH6C2/gBuBgbG107l2P8huD0AJ+wkdFaZrL\nFR3oRtNvXA05dnO8gv7S7YcwFR0rBHU2FRBKUhWOL8jmXezLtftOi0P/nr1k\nEtfw\r\n=Bkv1\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDutLvNdlRQzRvAuLzzE4Jt/JDa3UpCwTd+6Bsu02jaHgIhAJo7bhclFt9kewxEjOOeeP6C9aE1z0V4BkmSX5djBTs/"}]},"maintainers":[{"name":"atlwendy","email":"atlwendy@gmail.com"},{"name":"benjamincharity","email":"ben@benjamincharity.com"},{"name":"bmalinconico-terminus","email":"brian.malinconico@terminus.com"},{"name":"terminus_devops","email":"devops@terminus.com"}],"_npmUser":{"name":"terminus_devops","email":"devops@terminus.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ui-expansion-panel_1.0.20_1598369453334_0.881311053937563"},"_hasShrinkwrap":false},"1.0.21":{"name":"@terminus/ui-expansion-panel","version":"1.0.21","license":"MIT","author":{"name":"@terminus"},"private":false,"homepage":"https://github.com/GetTerminus/terminus-oss","repository":{"type":"git","url":"git+https://github.com/GetTerminus/terminus-oss.git"},"bugs":{"url":"https://github.com/GetTerminus/terminus-oss/issues"},"publishConfig":{"access":"public","tag":"next","directory":"../../../dist/libs/ui/expansion-panel"},"peerDependencies":{"@angular/animations":"^9.1.0","@angular/cdk":"^9.1.0","@angular/common":"^9.1.0","@angular/core":"^9.1.0","@angular/platform-browser":"^9.1.0","@terminus/design-tokens":"^3.1.0","@terminus/fe-utilities":"^1.1.0","rxjs":"^6.5.0"},"schematics":"./schematics/collection.json","main":"bundles/terminus-ui-expansion-panel.umd.js","module":"fesm5/terminus-ui-expansion-panel.js","es2015":"fesm2015/terminus-ui-expansion-panel.js","esm5":"esm5/terminus-ui-expansion-panel.js","esm2015":"esm2015/terminus-ui-expansion-panel.js","fesm5":"fesm5/terminus-ui-expansion-panel.js","fesm2015":"fesm2015/terminus-ui-expansion-panel.js","typings":"terminus-ui-expansion-panel.d.ts","metadata":"terminus-ui-expansion-panel.metadata.json","sideEffects":false,"dependencies":{"tslib":"^1.10.0","@angular/forms":"9.1.11","date-fns":"2.15.0","@angular/router":"9.1.11","ngx-webstorage-service":"4.1.0","ngx-clipboard":"13.0.1","@angular/flex-layout":"9.0.0-beta.31","@angular/material":"9.2.4","@terminus/ui-button":"2.0.17","@terminus/ui-icon":"2.0.9","@angular-devkit/schematics":"9.1.9","@schematics/angular":"9.1.12","@fortawesome/fontawesome-svg-core":"1.2.30","@fortawesome/angular-fontawesome":"0.6.0","@fortawesome/pro-solid-svg-icons":"5.14.0","@terminus/ui-card":"2.0.11","@terminus/ui-utilities":"1.0.12"},"readme":"

Expansion Panel

\n\n[![CI/CD Status][github-action-badge]][github-action-link] [![Codecov][codecov-badge]][codecov-project] [![MIT License][license-image]][license-url] \n[![NPM version][npm-version-image]][npm-package] [![Library size][file-size-badge]][raw-distribution-js]\n\nExpansion panel & accordion components.\n\n\n\n## Table of Contents\n\n- [Installation](#installation)\n - [Packages that need to be installed](#packages-that-need-to-be-installed)\n - [Modules that need to be in NgModule](#modules-that-need-to-be-in-ngmodule)\n - [CSS imports](#css-imports)\n - [CSS resources](#css-resources)\n- [Usage](#usage)\n - [Panel](#panel)\n - [Title and description](#title-and-description)\n - [Disable a panel](#disable-a-panel)\n - [Default a panel open](#default-a-panel-open)\n - [Lazy loaded content](#lazy-loaded-content)\n - [Transparent mode](#transparent-mode)\n - [Panel events](#panel-events)\n - [Custom trigger heights](#custom-trigger-heights)\n - [Manual control](#manual-control)\n - [Accordion](#accordion)\n - [Allow multiple panels to be open](#allow-multiple-panels-to-be-open)\n - [Accordion events](#accordion-events)\n - [Accordion as a stepper](#accordion-as-a-stepper)\n - [Hide toggle](#hide-toggle)\n - [Action row](#action-row)\n - [Open or close all panels](#open-or-close-all-panels)\n- [Test Helpers](#test-helpers)\n\n\n\n## Installation\n\n### Packages that need to be installed\n\n- `@angular/cdk`\n- `@angular/common`\n- `@angular/core`\n- `@angular/flex-layout`\n- `@angular/forms`\n- `@angular/platform-browser`\n- `@terminus/design-tokens`\n- `@terminus/fe-utilities`\n- `@terminus/ui-utilities`\n- `@terminus/ui-expansion-panel`\n- `date-fns`\n\nUse the `ng add` command to quickly install all the needed dependencies:\n\n```bash\nng add @terminus/ui-expansion-panel\n```\n\n### Modules that need to be in NgModule\n\n- `BrowserAnimationsModule,`\n- `TsExpansionPanelModule,`\n\n### CSS imports\n\nIn your top level stylesheet, add these imports:\n\n```css\n@import '~@terminus/design-tokens/css/library-design-tokens.css';\n@import '~@terminus/ui-styles/terminus-ui.css';\n``` \n\n### CSS resources\n\nLoad the needed font families by adding this link to the `` of your application:\n\n```css\n\n```\n\n## Usage\n\n### Panel\n\nThe most basic usage is a single panel with a trigger:\n\n```html\n\n \n Here is my trigger!\n \n\n

And here is my standard panel content.

\n\n```\n\n> NOTE: Without a trigger, the panel will not be visible.\n\n#### Title and description\n\nTrigger text can be split into `title` and `description` using the `TsExpansionPanelTitleComponent` and\n`TsExpansionPanelDescriptionComponent` respectively.\n\n```html\n\n\n Here is my trigger!\n\n\n\n\n\n \n My title\n \n\n \n My description\n \n\n```\n\n#### Disable a panel\n\nThe `isDisabled` flag will disable a panel and it's trigger:\n\n```html\n\n \n Here is my trigger!\n \n\n

I will never be seen.

\n\n```\n\n#### Default a panel open\n\nThe `isExpanded` flag will change the state of a panel. This can be used to default to a specific state or to dynamically change the state.\n\n```html\n\n \n Here is my trigger!\n \n\n

I'll be visible by default!

\n\n```\n\n#### Lazy loaded content\n\nPanel content can be lazily loaded by using a template with the `tsExpansionPanelContent` directive. The template will not be loaded until\nthe panel is opened for the first time. The content will remain in the DOM until the panel is destroyed.\n\n```html\n\n \n Here is my trigger!\n \n\n \n Here is my deferred template!\n \n\n```\n\n#### Transparent mode\n\nExpansion panel with transparent mode on has no box shadow and padding on the side. It's default to `false`.\n\n```html\n\n \n Here is my trigger!\n \n\n

And here is my standard panel content.

\n\n```\n\n#### Panel events\n\n| Event | Description | Payload |\n|:-----------------|:---------------------------------------------------|:----------|\n| `opened` | Fired when the panel is opened | `void` |\n| `afterExpand` | Fired after the panel expansion animation finishes | `void` |\n| `closed` | Fired when the panel is closed | `void` |\n| `afterCollapse` | Fired after the panel collapse animation finishes | `void` |\n| `expandedChange` | Fired when the panel state changes | `boolean` |\n| `destroyed` | Fired when the panel is destroyed | `void` |\n\n```html\n...\n```\n\n#### Custom trigger heights\n\nCustom heights can be set for a trigger's collapsed and/or expanded state.\n\n```html\n\n \n Panel Trigger (100px -> 200px)\n\n

And here is my standard panel content.

\n\n```\n\n#### Manual control\n\nPanels can be programmatically opened, closed or toggled through a reference to the instance:\n\n```typescript\n@ViewChild(TsExpansionPanelComponent, {static: false})\npublic panel: TsExpansionPanelComponent;\n\n...\n\npanel.open();\npanel.close();\npanel.toggle();\n```\n\n> NOTE: Disabled panels cannot be controlled with these methods. Disabled panels can _only_ be controlled via the `isExpanded` input.\n\n### Accordion\n\nAn accordion is created by wrapping two or more `TsExpansionPanelComponent`s inside a `TsAccordionComponent`.\n\n```html\n\n ...\n ...\n\n```\n\n#### Allow multiple panels to be open\n\nBy default an accordion can only have a single panel open at a time. This functionality can be change with the `multi` input.\n\n```html\n\n ...\n ...\n\n```\n\n#### Accordion events\n\n| Event | Description | Payload |\n|:------------|:--------------------------------------|:--------|\n| `destroyed` | Fired when the accordion is destroyed | `void` |\n\n```html\n...\n```\n\n#### Accordion as a stepper\n\nAn accordion can function as a stepper which can be useful for guided flows. To facilitate this we can use a combination of `hideToggle` and\nthe `ts-expansion-panel-action-row`.\n\n```html\n\n\n \n \n Step 1\n\n And here is my standard panel content.\n\n \n Next\n \n \n\n \n \n Step 2\n\n And here is my standard panel content.\n\n \n Previous\n Next\n \n \n\n \n \n Step 3\n\n And here is my standard panel content.\n\n \n Previous\n End\n \n \n\n```\n\n#### Hide toggle\n\nWhen an accordion is controlled programmatically, the toggle icon can be hidden to avoid confusion for the user. Setting `hideToggle` on the\naccordion will hide the toggle icon for *all panels within*.\n\n> NOTE: This should _only_ be used in cases when the accordion is functioning as a stepper.\n\n```html\n\n ...\n ...\n\n```\n\n#### Action row\n\nThe action row is useful when an accordion is functioning as a stepper. Controls added within the action row will be right aligned as panel\ncontrols.\n\n> NOTE: See [Accordion as a stepper](https://github.com/GetTerminus/terminus-ui/blob/release/projects/library/expansion-panel/src/expansion-panel.component.md#accordion-as-a-stepper) for a complete example.\n\n```html\n\n \n Step 1\n \n\n And here is my standard panel content.\n\n \n \n \n\n```\n\n#### Open or close all panels\n\nAn accordion can programmatically open or close all panels at once.\n\n```typescript\n@ViewChild(TsAccordionComponent, {static: false})\npublic accordion: TsAccordionComponent;\n\n...\n\naccordion.openAll();\naccordion.closeAll();\n```\n\n> NOTE: These methods will *not* change the state of disabled panels.\n\n## Test Helpers\n\nSome helpers are exposed to assist with testing. These are imported from `@terminus/ui-expansion-panel/testing`;\n\n[[source]][test-helpers-src]\n\n| Function |\n|--------------------------------|\n| `getAllPanelDebugElements` |\n| `getAllPanelInstances` |\n| `getPanelDebugElement` |\n| `getPanelInstance` |\n| `getPanelElement` |\n| `getPanelBodyElement` |\n| `getPanelBodyContentElement` |\n| `getAllAccordionDebugElements` |\n| `getAllAccordionInstances` |\n| `getAccordionInstance` |\n| `getAccordionDebugElement` |\n| `getAccordionElement` |\n| `getTriggerDebugElement` |\n| `getTriggerInstance` |\n| `getTriggerElement` |\n| `getTriggerTitleElement` |\n| `getTriggerDescriptionElement` |\n| `getPanelActionRow` |\n| `togglePanel` |\n\n\n[test-helpers-src]: testing/src/test-helpers.ts\n[license-url]: https://github.com/GetTerminus/terminus-oss/blob/release/LICENSE\n[license-image]: http://img.shields.io/badge/license-MIT-blue.svg\n[codecov-project]: https://codecov.io/gh/GetTerminus/terminus-oss\n[codecov-badge]: https://codecov.io/gh/GetTerminus/terminus-oss/branch/release/graph/badge.svg\n[npm-version-image]: http://img.shields.io/npm/v/@terminus/ui-button.svg\n[npm-package]: https://www.npmjs.com/package/@terminus/ui-button\n[github-action-badge]: https://github.com/GetTerminus/terminus-oss/workflows/Release%20CI/badge.svg\n[github-action-link]: https://github.com/GetTerminus/terminus-oss/actions?query=workflow%3A%22CI+Release%22\n[file-size-badge]: http://img.badgesize.io/https://unpkg.com/@terminus/ui-button/bundles/terminus-ui-button.umd.min.js?compression=gzip\n[raw-distribution-js]: https://unpkg.com/@terminus/ui-button/bundles/terminus-ui-button.umd.js\n","readmeFilename":"README.md","description":"

Expansion Panel

","_id":"@terminus/ui-expansion-panel@1.0.21","_nodeVersion":"12.18.3","_npmVersion":"lerna/3.22.1/node@v12.18.3+x64 (linux)","dist":{"integrity":"sha512-3afm5q2q+3l7NkDn3px4IS9Oy9RjFTXVkaIdu4Yk0RFQG22DX4h0/dQtGiZYjWvYKoDOyk6itEudKcae+nb92g==","shasum":"4861e2a0de468fae771d0a3b68547302f4d84711","tarball":"https://registry.npmjs.org/@terminus/ui-expansion-panel/-/ui-expansion-panel-1.0.21.tgz","fileCount":117,"unpackedSize":759810,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfRoUJCRA9TVsSAnZWagAAwLIQAJY/XhwPspaZiJYTLovB\nXnf5bU/vfdCADFMEXLYz8e7+p8Fxxs7HpqkseWfPJsFNUHdfQ/PdGRsdKkSo\n9LdYBhy4an8+jNyUGHFDT7NhI2kkKQLQyg50xxqoG9SNzslBjVam7O5/XQM9\nRbJUeh7oeZHwtF6I3Xi6IPC1xnYpaP16dIvbNnS9vaBFgmoN55Y4DV4uEXaf\n5UjLFkq/njipudYBAiqERYxFmXl+fIFcqlpK7x7CLIcqdYok1yRRrlYvKPzU\nXTTw87uwoygjWEeX5zrbgZxwOiCRYV0LRPeeAzSn0iwUKYnMSNEfrCT+qXMI\nNrTD8oDWVXVfrl92DDwcjvu2iQmDaIJgnszd/5EGb2yRdqlidPdJHyEvNzjz\nHlgoCs872jNmCYO/uA6fSWFyymgr1aIVWT4zW/sItqg2uoTitg8TjNbM+gFE\nV+vOYKJCu4POBL5GNepq+EvJ6pybgDUDGIqxcVxOhxNrP0MrEpNf3d2823DP\nP7ykaFblQUZShdFrzuVyTADn70A4xSyUSzdM4OrnwwzU84Po/0MppPEfdUSt\nlEWAlBwsuSnlKNClwv/Vtsuk95dFU+vvvdMxFgmhazL2v51J0NvxhD0mv33o\nwGOGuTv9NCCOdbzyLCh1NqjJRytXi6WhnzKts/vsHaUMK8hqXrD5myc0kelG\n6h0x\r\n=x78x\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEQoDTfOpcuTY/Sie8/H/qKe/u5yynXfWNUcwrcV8Km6AiEAwT95du9apVMFTfi3orMexpaUN3ixZ3P6YLTlRyQ46eU="}]},"maintainers":[{"name":"atlwendy","email":"atlwendy@gmail.com"},{"name":"benjamincharity","email":"ben@benjamincharity.com"},{"name":"bmalinconico-terminus","email":"brian.malinconico@terminus.com"},{"name":"terminus_devops","email":"devops@terminus.com"}],"_npmUser":{"name":"terminus_devops","email":"devops@terminus.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ui-expansion-panel_1.0.21_1598457096844_0.408981371884664"},"_hasShrinkwrap":false},"1.0.22":{"name":"@terminus/ui-expansion-panel","version":"1.0.22","license":"MIT","author":{"name":"@terminus"},"private":false,"homepage":"https://github.com/GetTerminus/terminus-oss","repository":{"type":"git","url":"git+https://github.com/GetTerminus/terminus-oss.git"},"bugs":{"url":"https://github.com/GetTerminus/terminus-oss/issues"},"publishConfig":{"access":"public","tag":"next","directory":"../../../dist/libs/ui/expansion-panel"},"peerDependencies":{"@angular/animations":"^9.1.0","@angular/cdk":"^9.1.0","@angular/common":"^9.1.0","@angular/core":"^9.1.0","@angular/platform-browser":"^9.1.0","@terminus/design-tokens":"^3.1.0","@terminus/fe-utilities":"^1.1.0","rxjs":"^6.5.0"},"schematics":"./schematics/collection.json","main":"bundles/terminus-ui-expansion-panel.umd.js","module":"fesm5/terminus-ui-expansion-panel.js","es2015":"fesm2015/terminus-ui-expansion-panel.js","esm5":"esm5/terminus-ui-expansion-panel.js","esm2015":"esm2015/terminus-ui-expansion-panel.js","fesm5":"fesm5/terminus-ui-expansion-panel.js","fesm2015":"fesm2015/terminus-ui-expansion-panel.js","typings":"terminus-ui-expansion-panel.d.ts","metadata":"terminus-ui-expansion-panel.metadata.json","sideEffects":false,"dependencies":{"tslib":"^1.10.0","@angular/forms":"9.1.11","date-fns":"2.15.0","@angular/router":"9.1.11","ngx-webstorage-service":"4.1.0","ngx-clipboard":"13.0.1","@angular/flex-layout":"9.0.0-beta.31","@angular/material":"9.2.4","@terminus/ui-button":"2.0.18","@terminus/ui-icon":"2.0.9","@angular-devkit/schematics":"9.1.9","@schematics/angular":"9.1.12","@fortawesome/fontawesome-svg-core":"1.2.30","@fortawesome/angular-fontawesome":"0.6.0","@fortawesome/pro-solid-svg-icons":"5.14.0","@terminus/ui-card":"2.0.12","@terminus/ui-utilities":"1.0.12"},"readme":"

Expansion Panel

\n\n[![CI/CD Status][github-action-badge]][github-action-link] [![Codecov][codecov-badge]][codecov-project] [![MIT License][license-image]][license-url] \n[![NPM version][npm-version-image]][npm-package] [![Library size][file-size-badge]][raw-distribution-js]\n\nExpansion panel & accordion components.\n\n\n\n## Table of Contents\n\n- [Installation](#installation)\n - [Packages that need to be installed](#packages-that-need-to-be-installed)\n - [Modules that need to be in NgModule](#modules-that-need-to-be-in-ngmodule)\n - [CSS imports](#css-imports)\n - [CSS resources](#css-resources)\n- [Usage](#usage)\n - [Panel](#panel)\n - [Title and description](#title-and-description)\n - [Disable a panel](#disable-a-panel)\n - [Default a panel open](#default-a-panel-open)\n - [Lazy loaded content](#lazy-loaded-content)\n - [Transparent mode](#transparent-mode)\n - [Panel events](#panel-events)\n - [Custom trigger heights](#custom-trigger-heights)\n - [Manual control](#manual-control)\n - [Accordion](#accordion)\n - [Allow multiple panels to be open](#allow-multiple-panels-to-be-open)\n - [Accordion events](#accordion-events)\n - [Accordion as a stepper](#accordion-as-a-stepper)\n - [Hide toggle](#hide-toggle)\n - [Action row](#action-row)\n - [Open or close all panels](#open-or-close-all-panels)\n- [Test Helpers](#test-helpers)\n\n\n\n## Installation\n\n### Packages that need to be installed\n\n- `@angular/cdk`\n- `@angular/common`\n- `@angular/core`\n- `@angular/flex-layout`\n- `@angular/forms`\n- `@angular/platform-browser`\n- `@terminus/design-tokens`\n- `@terminus/fe-utilities`\n- `@terminus/ui-utilities`\n- `@terminus/ui-expansion-panel`\n- `date-fns`\n\nUse the `ng add` command to quickly install all the needed dependencies:\n\n```bash\nng add @terminus/ui-expansion-panel\n```\n\n### Modules that need to be in NgModule\n\n- `BrowserAnimationsModule,`\n- `TsExpansionPanelModule,`\n\n### CSS imports\n\nIn your top level stylesheet, add these imports:\n\n```css\n@import '~@terminus/design-tokens/css/library-design-tokens.css';\n@import '~@terminus/ui-styles/terminus-ui.css';\n``` \n\n### CSS resources\n\nLoad the needed font families by adding this link to the `` of your application:\n\n```css\n\n```\n\n## Usage\n\n### Panel\n\nThe most basic usage is a single panel with a trigger:\n\n```html\n\n \n Here is my trigger!\n \n\n

And here is my standard panel content.

\n\n```\n\n> NOTE: Without a trigger, the panel will not be visible.\n\n#### Title and description\n\nTrigger text can be split into `title` and `description` using the `TsExpansionPanelTitleComponent` and\n`TsExpansionPanelDescriptionComponent` respectively.\n\n```html\n\n\n Here is my trigger!\n\n\n\n\n\n \n My title\n \n\n \n My description\n \n\n```\n\n#### Disable a panel\n\nThe `isDisabled` flag will disable a panel and it's trigger:\n\n```html\n\n \n Here is my trigger!\n \n\n

I will never be seen.

\n\n```\n\n#### Default a panel open\n\nThe `isExpanded` flag will change the state of a panel. This can be used to default to a specific state or to dynamically change the state.\n\n```html\n\n \n Here is my trigger!\n \n\n

I'll be visible by default!

\n\n```\n\n#### Lazy loaded content\n\nPanel content can be lazily loaded by using a template with the `tsExpansionPanelContent` directive. The template will not be loaded until\nthe panel is opened for the first time. The content will remain in the DOM until the panel is destroyed.\n\n```html\n\n \n Here is my trigger!\n \n\n \n Here is my deferred template!\n \n\n```\n\n#### Transparent mode\n\nExpansion panel with transparent mode on has no box shadow and padding on the side. It's default to `false`.\n\n```html\n\n \n Here is my trigger!\n \n\n

And here is my standard panel content.

\n\n```\n\n#### Panel events\n\n| Event | Description | Payload |\n|:-----------------|:---------------------------------------------------|:----------|\n| `opened` | Fired when the panel is opened | `void` |\n| `afterExpand` | Fired after the panel expansion animation finishes | `void` |\n| `closed` | Fired when the panel is closed | `void` |\n| `afterCollapse` | Fired after the panel collapse animation finishes | `void` |\n| `expandedChange` | Fired when the panel state changes | `boolean` |\n| `destroyed` | Fired when the panel is destroyed | `void` |\n\n```html\n...\n```\n\n#### Custom trigger heights\n\nCustom heights can be set for a trigger's collapsed and/or expanded state.\n\n```html\n\n \n Panel Trigger (100px -> 200px)\n\n

And here is my standard panel content.

\n\n```\n\n#### Manual control\n\nPanels can be programmatically opened, closed or toggled through a reference to the instance:\n\n```typescript\n@ViewChild(TsExpansionPanelComponent, {static: false})\npublic panel: TsExpansionPanelComponent;\n\n...\n\npanel.open();\npanel.close();\npanel.toggle();\n```\n\n> NOTE: Disabled panels cannot be controlled with these methods. Disabled panels can _only_ be controlled via the `isExpanded` input.\n\n### Accordion\n\nAn accordion is created by wrapping two or more `TsExpansionPanelComponent`s inside a `TsAccordionComponent`.\n\n```html\n\n ...\n ...\n\n```\n\n#### Allow multiple panels to be open\n\nBy default an accordion can only have a single panel open at a time. This functionality can be change with the `multi` input.\n\n```html\n\n ...\n ...\n\n```\n\n#### Accordion events\n\n| Event | Description | Payload |\n|:------------|:--------------------------------------|:--------|\n| `destroyed` | Fired when the accordion is destroyed | `void` |\n\n```html\n...\n```\n\n#### Accordion as a stepper\n\nAn accordion can function as a stepper which can be useful for guided flows. To facilitate this we can use a combination of `hideToggle` and\nthe `ts-expansion-panel-action-row`.\n\n```html\n\n\n \n \n Step 1\n\n And here is my standard panel content.\n\n \n Next\n \n \n\n \n \n Step 2\n\n And here is my standard panel content.\n\n \n Previous\n Next\n \n \n\n \n \n Step 3\n\n And here is my standard panel content.\n\n \n Previous\n End\n \n \n\n```\n\n#### Hide toggle\n\nWhen an accordion is controlled programmatically, the toggle icon can be hidden to avoid confusion for the user. Setting `hideToggle` on the\naccordion will hide the toggle icon for *all panels within*.\n\n> NOTE: This should _only_ be used in cases when the accordion is functioning as a stepper.\n\n```html\n\n ...\n ...\n\n```\n\n#### Action row\n\nThe action row is useful when an accordion is functioning as a stepper. Controls added within the action row will be right aligned as panel\ncontrols.\n\n> NOTE: See [Accordion as a stepper](https://github.com/GetTerminus/terminus-ui/blob/release/projects/library/expansion-panel/src/expansion-panel.component.md#accordion-as-a-stepper) for a complete example.\n\n```html\n\n \n Step 1\n \n\n And here is my standard panel content.\n\n \n \n \n\n```\n\n#### Open or close all panels\n\nAn accordion can programmatically open or close all panels at once.\n\n```typescript\n@ViewChild(TsAccordionComponent, {static: false})\npublic accordion: TsAccordionComponent;\n\n...\n\naccordion.openAll();\naccordion.closeAll();\n```\n\n> NOTE: These methods will *not* change the state of disabled panels.\n\n## Test Helpers\n\nSome helpers are exposed to assist with testing. These are imported from `@terminus/ui-expansion-panel/testing`;\n\n[[source]][test-helpers-src]\n\n| Function |\n|--------------------------------|\n| `getAllPanelDebugElements` |\n| `getAllPanelInstances` |\n| `getPanelDebugElement` |\n| `getPanelInstance` |\n| `getPanelElement` |\n| `getPanelBodyElement` |\n| `getPanelBodyContentElement` |\n| `getAllAccordionDebugElements` |\n| `getAllAccordionInstances` |\n| `getAccordionInstance` |\n| `getAccordionDebugElement` |\n| `getAccordionElement` |\n| `getTriggerDebugElement` |\n| `getTriggerInstance` |\n| `getTriggerElement` |\n| `getTriggerTitleElement` |\n| `getTriggerDescriptionElement` |\n| `getPanelActionRow` |\n| `togglePanel` |\n\n\n[test-helpers-src]: testing/src/test-helpers.ts\n[license-url]: https://github.com/GetTerminus/terminus-oss/blob/release/LICENSE\n[license-image]: http://img.shields.io/badge/license-MIT-blue.svg\n[codecov-project]: https://codecov.io/gh/GetTerminus/terminus-oss\n[codecov-badge]: https://codecov.io/gh/GetTerminus/terminus-oss/branch/release/graph/badge.svg\n[npm-version-image]: http://img.shields.io/npm/v/@terminus/ui-button.svg\n[npm-package]: https://www.npmjs.com/package/@terminus/ui-button\n[github-action-badge]: https://github.com/GetTerminus/terminus-oss/workflows/Release%20CI/badge.svg\n[github-action-link]: https://github.com/GetTerminus/terminus-oss/actions?query=workflow%3A%22CI+Release%22\n[file-size-badge]: http://img.badgesize.io/https://unpkg.com/@terminus/ui-button/bundles/terminus-ui-button.umd.min.js?compression=gzip\n[raw-distribution-js]: https://unpkg.com/@terminus/ui-button/bundles/terminus-ui-button.umd.js\n","readmeFilename":"README.md","description":"

Expansion Panel

","_id":"@terminus/ui-expansion-panel@1.0.22","_nodeVersion":"12.18.3","_npmVersion":"lerna/3.22.1/node@v12.18.3+x64 (linux)","dist":{"integrity":"sha512-aa981ricFssvIzbG5gyW0fYBe1lfA8du2UzwgOVsIZ1nEIgaTZUkLDn6qQDEe3nGJz+rcRoGImRwJ7SC36nnyg==","shasum":"d77d1f4c19662dcfdfe68e1472b78ceb18b4f7bd","tarball":"https://registry.npmjs.org/@terminus/ui-expansion-panel/-/ui-expansion-panel-1.0.22.tgz","fileCount":117,"unpackedSize":760037,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfSQ/9CRA9TVsSAnZWagAAMJkP/2J8nPI/msVPwoUz1Mth\nblgWgDKloXQ4dBI4EIhynNr3lf4+1DCgJG5EBWtgDLtfRhVFHQ5cI8+F2Fqk\nQYOZElHapmWJBbHce8bJ4zG+AHNg5xpho9zU3u4iFnqb2AqP3dIWJc4Axo4o\nQF3XQzhAMlZhmaMpW+WLdtX8zWNHNIDsynGmYUVGWSkoukP5dPJ8T/Se/7aM\n54ovg/I/F1GvNY0sllfO7LMmrAKOIhndd+XPNPuwlaCl2iEuXYeU13XH9F29\n8yVOshH6v9DpOD+/kM+Su1s+KVIVbEWAcxh0MDUhCwMIugMfFnX011ytsZAs\nDkxvVdvTgMM4zYajk4+D8to7YDseOKD5jy4tENJvlGggdb5dmvxT7VKN29UC\nh64l/wW084RwfLfZUfI8xFf/04dRZXsVx14wCmLhHXsas/XlcL5XKw1yAtIS\nhM7aNb/H8tOlo9oWHuYh2pfTDbdLPVb49eu/1FMPTWC0GZFYZKVbspTl1UMr\nUhG3ClD4vS2HlrzKMTybA0Z4fsGnEWERfIMgxmSQwpbadMbk/eT3LTCBeYWl\nXqNg91p/XcEp4zgD+kA/FAJ3oQb66WSM4H456MhhDVDOx9brCW5RRyMGy4da\nGKpriUHTj2jUK64IDUwfa2STX2uHyXmaGznpcRmxg2vHElLNqqnvK0DlJt1H\nnX/F\r\n=qXjt\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCSbslsQ1RN52GzhPHzyx97Zzhws4CH1JghLTgQnNrNtQIhAK1JtIZ/ZvS3OUfm3sXrQS60SrpBpTgdJLiRmDMrwFBw"}]},"maintainers":[{"name":"atlwendy","email":"atlwendy@gmail.com"},{"name":"benjamincharity","email":"ben@benjamincharity.com"},{"name":"bmalinconico-terminus","email":"brian.malinconico@terminus.com"},{"name":"terminus_devops","email":"devops@terminus.com"}],"_npmUser":{"name":"terminus_devops","email":"devops@terminus.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ui-expansion-panel_1.0.22_1598623741064_0.8086067633466967"},"_hasShrinkwrap":false},"1.0.23":{"name":"@terminus/ui-expansion-panel","version":"1.0.23","license":"MIT","author":{"name":"@terminus"},"private":false,"homepage":"https://github.com/GetTerminus/terminus-oss","repository":{"type":"git","url":"git+https://github.com/GetTerminus/terminus-oss.git"},"bugs":{"url":"https://github.com/GetTerminus/terminus-oss/issues"},"publishConfig":{"access":"public","tag":"next","directory":"../../../dist/libs/ui/expansion-panel"},"peerDependencies":{"@angular/animations":"^9.1.0","@angular/cdk":"^9.1.0","@angular/common":"^9.1.0","@angular/core":"^9.1.0","@angular/platform-browser":"^9.1.0","@terminus/design-tokens":"^3.1.0","@terminus/fe-utilities":"^1.1.0","rxjs":"^6.5.0"},"schematics":"./schematics/collection.json","main":"bundles/terminus-ui-expansion-panel.umd.js","module":"fesm5/terminus-ui-expansion-panel.js","es2015":"fesm2015/terminus-ui-expansion-panel.js","esm5":"esm5/terminus-ui-expansion-panel.js","esm2015":"esm2015/terminus-ui-expansion-panel.js","fesm5":"fesm5/terminus-ui-expansion-panel.js","fesm2015":"fesm2015/terminus-ui-expansion-panel.js","typings":"terminus-ui-expansion-panel.d.ts","metadata":"terminus-ui-expansion-panel.metadata.json","sideEffects":false,"dependencies":{"tslib":"^1.10.0","@angular/forms":"9.1.11","date-fns":"2.15.0","@angular/router":"9.1.11","ngx-webstorage-service":"4.1.0","ngx-clipboard":"13.0.1","@angular/flex-layout":"9.0.0-beta.31","@angular/material":"9.2.4","@terminus/ui-button":"2.0.18","@terminus/ui-icon":"2.0.10","@angular-devkit/schematics":"9.1.9","@schematics/angular":"9.1.12","@fortawesome/fontawesome-svg-core":"1.2.30","@fortawesome/angular-fontawesome":"0.6.0","@fortawesome/pro-solid-svg-icons":"5.14.0","@terminus/ui-card":"2.0.12","@terminus/ui-utilities":"1.0.12"},"readme":"

Expansion Panel

\n\n[![CI/CD Status][github-action-badge]][github-action-link] [![Codecov][codecov-badge]][codecov-project] [![MIT License][license-image]][license-url] \n[![NPM version][npm-version-image]][npm-package] [![Library size][file-size-badge]][raw-distribution-js]\n\nExpansion panel & accordion components.\n\n\n\n## Table of Contents\n\n- [Installation](#installation)\n - [Packages that need to be installed](#packages-that-need-to-be-installed)\n - [Modules that need to be in NgModule](#modules-that-need-to-be-in-ngmodule)\n - [CSS imports](#css-imports)\n - [CSS resources](#css-resources)\n- [Usage](#usage)\n - [Panel](#panel)\n - [Title and description](#title-and-description)\n - [Disable a panel](#disable-a-panel)\n - [Default a panel open](#default-a-panel-open)\n - [Lazy loaded content](#lazy-loaded-content)\n - [Transparent mode](#transparent-mode)\n - [Panel events](#panel-events)\n - [Custom trigger heights](#custom-trigger-heights)\n - [Manual control](#manual-control)\n - [Accordion](#accordion)\n - [Allow multiple panels to be open](#allow-multiple-panels-to-be-open)\n - [Accordion events](#accordion-events)\n - [Accordion as a stepper](#accordion-as-a-stepper)\n - [Hide toggle](#hide-toggle)\n - [Action row](#action-row)\n - [Open or close all panels](#open-or-close-all-panels)\n- [Test Helpers](#test-helpers)\n\n\n\n## Installation\n\n### Packages that need to be installed\n\n- `@angular/cdk`\n- `@angular/common`\n- `@angular/core`\n- `@angular/flex-layout`\n- `@angular/forms`\n- `@angular/platform-browser`\n- `@terminus/design-tokens`\n- `@terminus/fe-utilities`\n- `@terminus/ui-utilities`\n- `@terminus/ui-expansion-panel`\n- `date-fns`\n\nUse the `ng add` command to quickly install all the needed dependencies:\n\n```bash\nng add @terminus/ui-expansion-panel\n```\n\n### Modules that need to be in NgModule\n\n- `BrowserAnimationsModule,`\n- `TsExpansionPanelModule,`\n\n### CSS imports\n\nIn your top level stylesheet, add these imports:\n\n```css\n@import '~@terminus/design-tokens/css/library-design-tokens.css';\n@import '~@terminus/ui-styles/terminus-ui.css';\n``` \n\n### CSS resources\n\nLoad the needed font families by adding this link to the `` of your application:\n\n```css\n\n```\n\n## Usage\n\n### Panel\n\nThe most basic usage is a single panel with a trigger:\n\n```html\n\n \n Here is my trigger!\n \n\n

And here is my standard panel content.

\n\n```\n\n> NOTE: Without a trigger, the panel will not be visible.\n\n#### Title and description\n\nTrigger text can be split into `title` and `description` using the `TsExpansionPanelTitleComponent` and\n`TsExpansionPanelDescriptionComponent` respectively.\n\n```html\n\n\n Here is my trigger!\n\n\n\n\n\n \n My title\n \n\n \n My description\n \n\n```\n\n#### Disable a panel\n\nThe `isDisabled` flag will disable a panel and it's trigger:\n\n```html\n\n \n Here is my trigger!\n \n\n

I will never be seen.

\n\n```\n\n#### Default a panel open\n\nThe `isExpanded` flag will change the state of a panel. This can be used to default to a specific state or to dynamically change the state.\n\n```html\n\n \n Here is my trigger!\n \n\n

I'll be visible by default!

\n\n```\n\n#### Lazy loaded content\n\nPanel content can be lazily loaded by using a template with the `tsExpansionPanelContent` directive. The template will not be loaded until\nthe panel is opened for the first time. The content will remain in the DOM until the panel is destroyed.\n\n```html\n\n \n Here is my trigger!\n \n\n \n Here is my deferred template!\n \n\n```\n\n#### Transparent mode\n\nExpansion panel with transparent mode on has no box shadow and padding on the side. It's default to `false`.\n\n```html\n\n \n Here is my trigger!\n \n\n

And here is my standard panel content.

\n\n```\n\n#### Panel events\n\n| Event | Description | Payload |\n|:-----------------|:---------------------------------------------------|:----------|\n| `opened` | Fired when the panel is opened | `void` |\n| `afterExpand` | Fired after the panel expansion animation finishes | `void` |\n| `closed` | Fired when the panel is closed | `void` |\n| `afterCollapse` | Fired after the panel collapse animation finishes | `void` |\n| `expandedChange` | Fired when the panel state changes | `boolean` |\n| `destroyed` | Fired when the panel is destroyed | `void` |\n\n```html\n...\n```\n\n#### Custom trigger heights\n\nCustom heights can be set for a trigger's collapsed and/or expanded state.\n\n```html\n\n \n Panel Trigger (100px -> 200px)\n\n

And here is my standard panel content.

\n\n```\n\n#### Manual control\n\nPanels can be programmatically opened, closed or toggled through a reference to the instance:\n\n```typescript\n@ViewChild(TsExpansionPanelComponent, {static: false})\npublic panel: TsExpansionPanelComponent;\n\n...\n\npanel.open();\npanel.close();\npanel.toggle();\n```\n\n> NOTE: Disabled panels cannot be controlled with these methods. Disabled panels can _only_ be controlled via the `isExpanded` input.\n\n### Accordion\n\nAn accordion is created by wrapping two or more `TsExpansionPanelComponent`s inside a `TsAccordionComponent`.\n\n```html\n\n ...\n ...\n\n```\n\n#### Allow multiple panels to be open\n\nBy default an accordion can only have a single panel open at a time. This functionality can be change with the `multi` input.\n\n```html\n\n ...\n ...\n\n```\n\n#### Accordion events\n\n| Event | Description | Payload |\n|:------------|:--------------------------------------|:--------|\n| `destroyed` | Fired when the accordion is destroyed | `void` |\n\n```html\n...\n```\n\n#### Accordion as a stepper\n\nAn accordion can function as a stepper which can be useful for guided flows. To facilitate this we can use a combination of `hideToggle` and\nthe `ts-expansion-panel-action-row`.\n\n```html\n\n\n \n \n Step 1\n\n And here is my standard panel content.\n\n \n Next\n \n \n\n \n \n Step 2\n\n And here is my standard panel content.\n\n \n Previous\n Next\n \n \n\n \n \n Step 3\n\n And here is my standard panel content.\n\n \n Previous\n End\n \n \n\n```\n\n#### Hide toggle\n\nWhen an accordion is controlled programmatically, the toggle icon can be hidden to avoid confusion for the user. Setting `hideToggle` on the\naccordion will hide the toggle icon for *all panels within*.\n\n> NOTE: This should _only_ be used in cases when the accordion is functioning as a stepper.\n\n```html\n\n ...\n ...\n\n```\n\n#### Action row\n\nThe action row is useful when an accordion is functioning as a stepper. Controls added within the action row will be right aligned as panel\ncontrols.\n\n> NOTE: See [Accordion as a stepper](https://github.com/GetTerminus/terminus-ui/blob/release/projects/library/expansion-panel/src/expansion-panel.component.md#accordion-as-a-stepper) for a complete example.\n\n```html\n\n \n Step 1\n \n\n And here is my standard panel content.\n\n \n \n \n\n```\n\n#### Open or close all panels\n\nAn accordion can programmatically open or close all panels at once.\n\n```typescript\n@ViewChild(TsAccordionComponent, {static: false})\npublic accordion: TsAccordionComponent;\n\n...\n\naccordion.openAll();\naccordion.closeAll();\n```\n\n> NOTE: These methods will *not* change the state of disabled panels.\n\n## Test Helpers\n\nSome helpers are exposed to assist with testing. These are imported from `@terminus/ui-expansion-panel/testing`;\n\n[[source]][test-helpers-src]\n\n| Function |\n|--------------------------------|\n| `getAllPanelDebugElements` |\n| `getAllPanelInstances` |\n| `getPanelDebugElement` |\n| `getPanelInstance` |\n| `getPanelElement` |\n| `getPanelBodyElement` |\n| `getPanelBodyContentElement` |\n| `getAllAccordionDebugElements` |\n| `getAllAccordionInstances` |\n| `getAccordionInstance` |\n| `getAccordionDebugElement` |\n| `getAccordionElement` |\n| `getTriggerDebugElement` |\n| `getTriggerInstance` |\n| `getTriggerElement` |\n| `getTriggerTitleElement` |\n| `getTriggerDescriptionElement` |\n| `getPanelActionRow` |\n| `togglePanel` |\n\n\n[test-helpers-src]: testing/src/test-helpers.ts\n[license-url]: https://github.com/GetTerminus/terminus-oss/blob/release/LICENSE\n[license-image]: http://img.shields.io/badge/license-MIT-blue.svg\n[codecov-project]: https://codecov.io/gh/GetTerminus/terminus-oss\n[codecov-badge]: https://codecov.io/gh/GetTerminus/terminus-oss/branch/release/graph/badge.svg\n[npm-version-image]: http://img.shields.io/npm/v/@terminus/ui-button.svg\n[npm-package]: https://www.npmjs.com/package/@terminus/ui-button\n[github-action-badge]: https://github.com/GetTerminus/terminus-oss/workflows/Release%20CI/badge.svg\n[github-action-link]: https://github.com/GetTerminus/terminus-oss/actions?query=workflow%3A%22CI+Release%22\n[file-size-badge]: http://img.badgesize.io/https://unpkg.com/@terminus/ui-button/bundles/terminus-ui-button.umd.min.js?compression=gzip\n[raw-distribution-js]: https://unpkg.com/@terminus/ui-button/bundles/terminus-ui-button.umd.js\n","readmeFilename":"README.md","description":"

Expansion Panel

","_id":"@terminus/ui-expansion-panel@1.0.23","_nodeVersion":"12.18.3","_npmVersion":"lerna/3.22.1/node@v12.18.3+x64 (linux)","dist":{"integrity":"sha512-pljiBpcr5lrIwXUJopzRw+xh/6MQUeRMVq8djH5sWfrr4b53BQWFpsEncJlwlOiOL5nDUIcNLMnTuDohRd+Qig==","shasum":"70a7cefc4412fa05309df583178fa99c1cfbefb1","tarball":"https://registry.npmjs.org/@terminus/ui-expansion-panel/-/ui-expansion-panel-1.0.23.tgz","fileCount":117,"unpackedSize":760265,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfSUCSCRA9TVsSAnZWagAASDoP/iFSm8Ly4MYc6pMYbHOo\nz2fn8Jn8DAL3S3GC/9WabsEF43grXb3l/quLZGIVEtJ8gdDlH5JlWluEQT+k\nVaLi6jNpicdnKsBH5qr35htXNbJI8GMRBhowOqA6VoIBgwELTqeHEyDcgCb0\nPpySSc1MyGKaeSOVO+fS1A2wnmvATmVTpRTBTp4r9wGDwcbCyZT80dp1Q2nI\n/Y9rAELYGUDpk5+KlT5tvvwyK2mB7wauhZeJcW2Y0qMu3munQaWrhe+zO81f\nn1lVZF8XPaH98a0CmxZgJe+pjsFel2twQSAZZOlan8MDvUrK2UczIVelzKH1\nrXXJXuDw+1PaSsY1iTt30CPCjMrqdl/9vuvRbw5hnS4aCodZpoxNi71P6yhV\ndxbOE8HEWWOLPYpJm6woQCerj5VA5RBYZfPO1JA+/xWiN7OvmbWuAN1GsxlE\nZBjXwvswNoYhgUUG+yMFW+Y2yg9ROoVQ8wTt5kF/duoE45w3olnGdtQxDQqM\nqKrUEiGkvMzkmKzwERYV/WGwmhdhRpQQ46gpvNGIwCGnGNc9Ufl58pmTaFB1\nFCAzw6Npz2sF9+tIqh9PGai7OdwTEnjdG/oYqSp1Tuer1M1RQyyBdSQC7diA\nZ8E8EhBVUKy/hF80o+r5ae81tUBvMlYQlrRdeSMGMwjh5k9P52KzzTS8LsIl\ncYZ1\r\n=LrmQ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAznL0ZpJBcNULdOhYhMfIx5uNRWmgMYJWmbA8m2j+n+AiEAs6OQV+1MqdcbSc7TvVT+aGQAe/0cU8TbLeLcWzElCUE="}]},"maintainers":[{"name":"atlwendy","email":"atlwendy@gmail.com"},{"name":"benjamincharity","email":"ben@benjamincharity.com"},{"name":"bmalinconico-terminus","email":"brian.malinconico@terminus.com"},{"name":"terminus_devops","email":"devops@terminus.com"}],"_npmUser":{"name":"terminus_devops","email":"devops@terminus.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ui-expansion-panel_1.0.23_1598636177898_0.6231807320545173"},"_hasShrinkwrap":false},"1.0.24":{"name":"@terminus/ui-expansion-panel","version":"1.0.24","license":"MIT","author":{"name":"@terminus"},"private":false,"homepage":"https://github.com/GetTerminus/terminus-oss","repository":{"type":"git","url":"git+https://github.com/GetTerminus/terminus-oss.git"},"bugs":{"url":"https://github.com/GetTerminus/terminus-oss/issues"},"publishConfig":{"access":"public","tag":"next","directory":"../../../dist/libs/ui/expansion-panel"},"peerDependencies":{"@angular/animations":"^9.1.0","@angular/cdk":"^9.1.0","@angular/common":"^9.1.0","@angular/core":"^9.1.0","@angular/platform-browser":"^9.1.0","@terminus/design-tokens":"^3.1.0","@terminus/fe-utilities":"^1.1.0","rxjs":"^6.5.0"},"schematics":"./schematics/collection.json","main":"bundles/terminus-ui-expansion-panel.umd.js","module":"fesm5/terminus-ui-expansion-panel.js","es2015":"fesm2015/terminus-ui-expansion-panel.js","esm5":"esm5/terminus-ui-expansion-panel.js","esm2015":"esm2015/terminus-ui-expansion-panel.js","fesm5":"fesm5/terminus-ui-expansion-panel.js","fesm2015":"fesm2015/terminus-ui-expansion-panel.js","typings":"terminus-ui-expansion-panel.d.ts","metadata":"terminus-ui-expansion-panel.metadata.json","sideEffects":false,"dependencies":{"tslib":"^1.10.0","@angular/forms":"9.1.11","date-fns":"2.15.0","@angular/router":"9.1.11","ngx-webstorage-service":"4.1.0","ngx-clipboard":"13.0.1","@angular/flex-layout":"9.0.0-beta.31","@angular/material":"9.2.4","@terminus/ui-button":"2.0.20","@terminus/ui-icon":"2.0.11","@angular-devkit/schematics":"9.1.9","@schematics/angular":"9.1.12","@fortawesome/fontawesome-svg-core":"1.2.30","@fortawesome/angular-fontawesome":"0.6.0","@fortawesome/pro-solid-svg-icons":"5.14.0","@terminus/ui-spacing":"1.0.14","@terminus/ui-card":"2.0.13","@terminus/ui-utilities":"1.0.12"},"readme":"

Expansion Panel

\n\n[![CI/CD Status][github-action-badge]][github-action-link] [![Codecov][codecov-badge]][codecov-project] [![MIT License][license-image]][license-url] \n[![NPM version][npm-version-image]][npm-package] [![Library size][file-size-badge]][raw-distribution-js]\n\nExpansion panel & accordion components.\n\n\n\n## Table of Contents\n\n- [Installation](#installation)\n - [Packages that need to be installed](#packages-that-need-to-be-installed)\n - [Modules that need to be in NgModule](#modules-that-need-to-be-in-ngmodule)\n - [CSS imports](#css-imports)\n - [CSS resources](#css-resources)\n- [Usage](#usage)\n - [Panel](#panel)\n - [Title and description](#title-and-description)\n - [Disable a panel](#disable-a-panel)\n - [Default a panel open](#default-a-panel-open)\n - [Lazy loaded content](#lazy-loaded-content)\n - [Transparent mode](#transparent-mode)\n - [Panel events](#panel-events)\n - [Custom trigger heights](#custom-trigger-heights)\n - [Manual control](#manual-control)\n - [Accordion](#accordion)\n - [Allow multiple panels to be open](#allow-multiple-panels-to-be-open)\n - [Accordion events](#accordion-events)\n - [Accordion as a stepper](#accordion-as-a-stepper)\n - [Hide toggle](#hide-toggle)\n - [Action row](#action-row)\n - [Open or close all panels](#open-or-close-all-panels)\n- [Test Helpers](#test-helpers)\n\n\n\n## Installation\n\n### Packages that need to be installed\n\n- `@angular/cdk`\n- `@angular/common`\n- `@angular/core`\n- `@angular/flex-layout`\n- `@angular/forms`\n- `@angular/platform-browser`\n- `@terminus/design-tokens`\n- `@terminus/fe-utilities`\n- `@terminus/ui-utilities`\n- `@terminus/ui-expansion-panel`\n- `date-fns`\n\nUse the `ng add` command to quickly install all the needed dependencies:\n\n```bash\nng add @terminus/ui-expansion-panel\n```\n\n### Modules that need to be in NgModule\n\n- `BrowserAnimationsModule,`\n- `TsExpansionPanelModule,`\n\n### CSS imports\n\nIn your top level stylesheet, add these imports:\n\n```css\n@import '~@terminus/design-tokens/css/library-design-tokens.css';\n@import '~@terminus/ui-styles/terminus-ui.css';\n``` \n\n### CSS resources\n\nLoad the needed font families by adding this link to the `` of your application:\n\n```css\n\n```\n\n## Usage\n\n### Panel\n\nThe most basic usage is a single panel with a trigger:\n\n```html\n\n \n Here is my trigger!\n \n\n

And here is my standard panel content.

\n\n```\n\n> NOTE: Without a trigger, the panel will not be visible.\n\n#### Title and description\n\nTrigger text can be split into `title` and `description` using the `TsExpansionPanelTitleComponent` and\n`TsExpansionPanelDescriptionComponent` respectively.\n\n```html\n\n\n Here is my trigger!\n\n\n\n\n\n \n My title\n \n\n \n My description\n \n\n```\n\n#### Disable a panel\n\nThe `isDisabled` flag will disable a panel and it's trigger:\n\n```html\n\n \n Here is my trigger!\n \n\n

I will never be seen.

\n\n```\n\n#### Default a panel open\n\nThe `isExpanded` flag will change the state of a panel. This can be used to default to a specific state or to dynamically change the state.\n\n```html\n\n \n Here is my trigger!\n \n\n

I'll be visible by default!

\n\n```\n\n#### Lazy loaded content\n\nPanel content can be lazily loaded by using a template with the `tsExpansionPanelContent` directive. The template will not be loaded until\nthe panel is opened for the first time. The content will remain in the DOM until the panel is destroyed.\n\n```html\n\n \n Here is my trigger!\n \n\n \n Here is my deferred template!\n \n\n```\n\n#### Transparent mode\n\nExpansion panel with transparent mode on has no box shadow and padding on the side. It's default to `false`.\n\n```html\n\n \n Here is my trigger!\n \n\n

And here is my standard panel content.

\n\n```\n\n#### Panel events\n\n| Event | Description | Payload |\n|:-----------------|:---------------------------------------------------|:----------|\n| `opened` | Fired when the panel is opened | `void` |\n| `afterExpand` | Fired after the panel expansion animation finishes | `void` |\n| `closed` | Fired when the panel is closed | `void` |\n| `afterCollapse` | Fired after the panel collapse animation finishes | `void` |\n| `expandedChange` | Fired when the panel state changes | `boolean` |\n| `destroyed` | Fired when the panel is destroyed | `void` |\n\n```html\n...\n```\n\n#### Custom trigger heights\n\nCustom heights can be set for a trigger's collapsed and/or expanded state.\n\n```html\n\n \n Panel Trigger (100px -> 200px)\n\n

And here is my standard panel content.

\n\n```\n\n#### Manual control\n\nPanels can be programmatically opened, closed or toggled through a reference to the instance:\n\n```typescript\n@ViewChild(TsExpansionPanelComponent, {static: false})\npublic panel: TsExpansionPanelComponent;\n\n...\n\npanel.open();\npanel.close();\npanel.toggle();\n```\n\n> NOTE: Disabled panels cannot be controlled with these methods. Disabled panels can _only_ be controlled via the `isExpanded` input.\n\n### Accordion\n\nAn accordion is created by wrapping two or more `TsExpansionPanelComponent`s inside a `TsAccordionComponent`.\n\n```html\n\n ...\n ...\n\n```\n\n#### Allow multiple panels to be open\n\nBy default an accordion can only have a single panel open at a time. This functionality can be change with the `multi` input.\n\n```html\n\n ...\n ...\n\n```\n\n#### Accordion events\n\n| Event | Description | Payload |\n|:------------|:--------------------------------------|:--------|\n| `destroyed` | Fired when the accordion is destroyed | `void` |\n\n```html\n...\n```\n\n#### Accordion as a stepper\n\nAn accordion can function as a stepper which can be useful for guided flows. To facilitate this we can use a combination of `hideToggle` and\nthe `ts-expansion-panel-action-row`.\n\n```html\n\n\n \n \n Step 1\n\n And here is my standard panel content.\n\n \n Next\n \n \n\n \n \n Step 2\n\n And here is my standard panel content.\n\n \n Previous\n Next\n \n \n\n \n \n Step 3\n\n And here is my standard panel content.\n\n \n Previous\n End\n \n \n\n```\n\n#### Hide toggle\n\nWhen an accordion is controlled programmatically, the toggle icon can be hidden to avoid confusion for the user. Setting `hideToggle` on the\naccordion will hide the toggle icon for *all panels within*.\n\n> NOTE: This should _only_ be used in cases when the accordion is functioning as a stepper.\n\n```html\n\n ...\n ...\n\n```\n\n#### Action row\n\nThe action row is useful when an accordion is functioning as a stepper. Controls added within the action row will be right aligned as panel\ncontrols.\n\n> NOTE: See [Accordion as a stepper](https://github.com/GetTerminus/terminus-ui/blob/release/projects/library/expansion-panel/src/expansion-panel.component.md#accordion-as-a-stepper) for a complete example.\n\n```html\n\n \n Step 1\n \n\n And here is my standard panel content.\n\n \n \n \n\n```\n\n#### Open or close all panels\n\nAn accordion can programmatically open or close all panels at once.\n\n```typescript\n@ViewChild(TsAccordionComponent, {static: false})\npublic accordion: TsAccordionComponent;\n\n...\n\naccordion.openAll();\naccordion.closeAll();\n```\n\n> NOTE: These methods will *not* change the state of disabled panels.\n\n## Test Helpers\n\nSome helpers are exposed to assist with testing. These are imported from `@terminus/ui-expansion-panel/testing`;\n\n[[source]][test-helpers-src]\n\n| Function |\n|--------------------------------|\n| `getAllPanelDebugElements` |\n| `getAllPanelInstances` |\n| `getPanelDebugElement` |\n| `getPanelInstance` |\n| `getPanelElement` |\n| `getPanelBodyElement` |\n| `getPanelBodyContentElement` |\n| `getAllAccordionDebugElements` |\n| `getAllAccordionInstances` |\n| `getAccordionInstance` |\n| `getAccordionDebugElement` |\n| `getAccordionElement` |\n| `getTriggerDebugElement` |\n| `getTriggerInstance` |\n| `getTriggerElement` |\n| `getTriggerTitleElement` |\n| `getTriggerDescriptionElement` |\n| `getPanelActionRow` |\n| `togglePanel` |\n\n\n[test-helpers-src]: testing/src/test-helpers.ts\n[license-url]: https://github.com/GetTerminus/terminus-oss/blob/release/LICENSE\n[license-image]: http://img.shields.io/badge/license-MIT-blue.svg\n[codecov-project]: https://codecov.io/gh/GetTerminus/terminus-oss\n[codecov-badge]: https://codecov.io/gh/GetTerminus/terminus-oss/branch/release/graph/badge.svg\n[npm-version-image]: http://img.shields.io/npm/v/@terminus/ui-button.svg\n[npm-package]: https://www.npmjs.com/package/@terminus/ui-button\n[github-action-badge]: https://github.com/GetTerminus/terminus-oss/workflows/Release%20CI/badge.svg\n[github-action-link]: https://github.com/GetTerminus/terminus-oss/actions?query=workflow%3A%22CI+Release%22\n[file-size-badge]: http://img.badgesize.io/https://unpkg.com/@terminus/ui-button/bundles/terminus-ui-button.umd.min.js?compression=gzip\n[raw-distribution-js]: https://unpkg.com/@terminus/ui-button/bundles/terminus-ui-button.umd.js\n","readmeFilename":"README.md","description":"

Expansion Panel

","_id":"@terminus/ui-expansion-panel@1.0.24","_nodeVersion":"12.18.3","_npmVersion":"lerna/3.22.1/node@v12.18.3+x64 (linux)","dist":{"integrity":"sha512-MhUMJE7stdqdI0wO2VgO3ay06to9FwQG39zkDUHuicZtf6tx4gIgJe96B+VmbhLz9QUqJFR7CUxyKAuKIII3hg==","shasum":"2afa37d4f178710d4d821a8658c8c2ab4c08681c","tarball":"https://registry.npmjs.org/@terminus/ui-expansion-panel/-/ui-expansion-panel-1.0.24.tgz","fileCount":117,"unpackedSize":760530,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfUXkPCRA9TVsSAnZWagAAb5cP/0CvkxI2TePCvpsLB7D4\nSRdDTNHHHcx30a6OaIVGjkwiekq8YyBQyOb2R8GS83K7+/HiuCeYXGZ4+GdL\nFU2+66WAkRfLY5qIR3YEqDwsy9Z4V6n4dBWg5bFUhfKGEIT/h0W134QcQKH1\nFU3Pb2TK9eqmNU32POs2HpD1rslVnThPe0Ejn3h8+kd/Fg2F28C9RhuZ0L1f\neABIfn5uXt1ByiSKNuQTcgqevk9LHgT7h+J8iPGoqag3DxkgQA3ru2EKY1aO\n4cP2au1YqQ3czdtx7c3f8/lkk2H6/Or+NXEs4bYEi4UZNFZ3ro9H4J0aYjmD\nds0stGqUCQqYagFAdVM8+8eLDYb5/L0O6yQtsonLUDckEeezYFnqG2vG5vK3\nbVWDqHtyA8gTmnY37jF4d1IkixRpHuJv/ALtVIIfjbRw4lm4anyqQvPmJMUG\nAvNFxJCrBX+44IWnQp2ARxiQPncMJB9VTlTJ+woDpilCveked2CG1FfuhW7v\nZ+o+/Uel+FHkZ/Q+oI/RWCxJ1QmAzH9gVzWL4imjDZCBo+kVtFr8hQF2OyWq\nYbU0SXzIgIUUDAwSvn0PP0UJ/oR4b18f7qA+nrfJaGzKGndISZl4Dhe9rWUY\nAX+xLemXpyXPiGSClJjeJy1DwWuHedHk1Xg6Kz0gQlH1em3nqS+lvEC5A65k\nkGZl\r\n=yXVq\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDdYXj5LNi8Dsfs4megg7TwrANpzX2hF8qT6tREekuM7wIgQ6x/gGIBI6+zs7Ol9SYMRBJrdpXngayiwPWK0Q5lvGA="}]},"maintainers":[{"name":"atlwendy","email":"atlwendy@gmail.com"},{"name":"benjamincharity","email":"ben@benjamincharity.com"},{"name":"bmalinconico-terminus","email":"brian.malinconico@terminus.com"},{"name":"terminus_devops","email":"devops@terminus.com"}],"_npmUser":{"name":"terminus_devops","email":"devops@terminus.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ui-expansion-panel_1.0.24_1599174926990_0.07800274597021617"},"_hasShrinkwrap":false},"1.0.25":{"name":"@terminus/ui-expansion-panel","version":"1.0.25","license":"MIT","author":{"name":"@terminus"},"private":false,"homepage":"https://github.com/GetTerminus/terminus-oss","repository":{"type":"git","url":"git+https://github.com/GetTerminus/terminus-oss.git"},"bugs":{"url":"https://github.com/GetTerminus/terminus-oss/issues"},"publishConfig":{"access":"public","tag":"next","directory":"../../../dist/libs/ui/expansion-panel"},"peerDependencies":{"@angular/animations":"^9.1.0","@angular/cdk":"^9.1.0","@angular/common":"^9.1.0","@angular/core":"^9.1.0","@angular/platform-browser":"^9.1.0","@terminus/design-tokens":"^3.1.0","@terminus/fe-utilities":"^1.1.0","rxjs":"^6.5.0"},"schematics":"./schematics/collection.json","main":"bundles/terminus-ui-expansion-panel.umd.js","module":"fesm5/terminus-ui-expansion-panel.js","es2015":"fesm2015/terminus-ui-expansion-panel.js","esm5":"esm5/terminus-ui-expansion-panel.js","esm2015":"esm2015/terminus-ui-expansion-panel.js","fesm5":"fesm5/terminus-ui-expansion-panel.js","fesm2015":"fesm2015/terminus-ui-expansion-panel.js","typings":"terminus-ui-expansion-panel.d.ts","metadata":"terminus-ui-expansion-panel.metadata.json","sideEffects":false,"dependencies":{"tslib":"^1.10.0","@angular/forms":"9.1.11","date-fns":"2.15.0","@angular/router":"9.1.11","ngx-webstorage-service":"4.1.0","ngx-clipboard":"13.0.1","@angular/flex-layout":"9.0.0-beta.31","@angular/material":"9.2.4","@terminus/ui-button":"2.0.21","@terminus/ui-icon":"2.0.12","@angular-devkit/schematics":"9.1.9","@schematics/angular":"9.1.12","@fortawesome/fontawesome-svg-core":"1.2.30","@fortawesome/angular-fontawesome":"0.6.0","@fortawesome/pro-solid-svg-icons":"5.14.0","@terminus/ui-spacing":"1.0.15","@terminus/ui-card":"2.0.14","@terminus/ui-utilities":"1.0.13"},"readme":"

Expansion Panel

\n\n[![CI/CD Status][github-action-badge]][github-action-link] [![Codecov][codecov-badge]][codecov-project] [![MIT License][license-image]][license-url] \n[![NPM version][npm-version-image]][npm-package] [![Library size][file-size-badge]][raw-distribution-js]\n\nExpansion panel & accordion components.\n\n\n\n## Table of Contents\n\n- [Installation](#installation)\n - [Packages that need to be installed](#packages-that-need-to-be-installed)\n - [Modules that need to be in NgModule](#modules-that-need-to-be-in-ngmodule)\n - [CSS imports](#css-imports)\n - [CSS resources](#css-resources)\n- [Usage](#usage)\n - [Panel](#panel)\n - [Title and description](#title-and-description)\n - [Disable a panel](#disable-a-panel)\n - [Default a panel open](#default-a-panel-open)\n - [Lazy loaded content](#lazy-loaded-content)\n - [Transparent mode](#transparent-mode)\n - [Panel events](#panel-events)\n - [Custom trigger heights](#custom-trigger-heights)\n - [Manual control](#manual-control)\n - [Accordion](#accordion)\n - [Allow multiple panels to be open](#allow-multiple-panels-to-be-open)\n - [Accordion events](#accordion-events)\n - [Accordion as a stepper](#accordion-as-a-stepper)\n - [Hide toggle](#hide-toggle)\n - [Action row](#action-row)\n - [Open or close all panels](#open-or-close-all-panels)\n- [Test Helpers](#test-helpers)\n\n\n\n## Installation\n\n### Packages that need to be installed\n\n- `@angular/cdk`\n- `@angular/common`\n- `@angular/core`\n- `@angular/flex-layout`\n- `@angular/forms`\n- `@angular/platform-browser`\n- `@terminus/design-tokens`\n- `@terminus/fe-utilities`\n- `@terminus/ui-utilities`\n- `@terminus/ui-expansion-panel`\n- `date-fns`\n\nUse the `ng add` command to quickly install all the needed dependencies:\n\n```bash\nng add @terminus/ui-expansion-panel\n```\n\n### Modules that need to be in NgModule\n\n- `BrowserAnimationsModule,`\n- `TsExpansionPanelModule,`\n\n### CSS imports\n\nIn your top level stylesheet, add these imports:\n\n```css\n@import '~@terminus/design-tokens/css/library-design-tokens.css';\n@import '~@terminus/ui-styles/terminus-ui.css';\n``` \n\n### CSS resources\n\nLoad the needed font families by adding this link to the `` of your application:\n\n```css\n\n```\n\n## Usage\n\n### Panel\n\nThe most basic usage is a single panel with a trigger:\n\n```html\n\n \n Here is my trigger!\n \n\n

And here is my standard panel content.

\n\n```\n\n> NOTE: Without a trigger, the panel will not be visible.\n\n#### Title and description\n\nTrigger text can be split into `title` and `description` using the `TsExpansionPanelTitleComponent` and\n`TsExpansionPanelDescriptionComponent` respectively.\n\n```html\n\n\n Here is my trigger!\n\n\n\n\n\n \n My title\n \n\n \n My description\n \n\n```\n\n#### Disable a panel\n\nThe `isDisabled` flag will disable a panel and it's trigger:\n\n```html\n\n \n Here is my trigger!\n \n\n

I will never be seen.

\n\n```\n\n#### Default a panel open\n\nThe `isExpanded` flag will change the state of a panel. This can be used to default to a specific state or to dynamically change the state.\n\n```html\n\n \n Here is my trigger!\n \n\n

I'll be visible by default!

\n\n```\n\n#### Lazy loaded content\n\nPanel content can be lazily loaded by using a template with the `tsExpansionPanelContent` directive. The template will not be loaded until\nthe panel is opened for the first time. The content will remain in the DOM until the panel is destroyed.\n\n```html\n\n \n Here is my trigger!\n \n\n \n Here is my deferred template!\n \n\n```\n\n#### Transparent mode\n\nExpansion panel with transparent mode on has no box shadow and padding on the side. It's default to `false`.\n\n```html\n\n \n Here is my trigger!\n \n\n

And here is my standard panel content.

\n\n```\n\n#### Panel events\n\n| Event | Description | Payload |\n|:-----------------|:---------------------------------------------------|:----------|\n| `opened` | Fired when the panel is opened | `void` |\n| `afterExpand` | Fired after the panel expansion animation finishes | `void` |\n| `closed` | Fired when the panel is closed | `void` |\n| `afterCollapse` | Fired after the panel collapse animation finishes | `void` |\n| `expandedChange` | Fired when the panel state changes | `boolean` |\n| `destroyed` | Fired when the panel is destroyed | `void` |\n\n```html\n...\n```\n\n#### Custom trigger heights\n\nCustom heights can be set for a trigger's collapsed and/or expanded state.\n\n```html\n\n \n Panel Trigger (100px -> 200px)\n\n

And here is my standard panel content.

\n\n```\n\n#### Manual control\n\nPanels can be programmatically opened, closed or toggled through a reference to the instance:\n\n```typescript\n@ViewChild(TsExpansionPanelComponent, {static: false})\npublic panel: TsExpansionPanelComponent;\n\n...\n\npanel.open();\npanel.close();\npanel.toggle();\n```\n\n> NOTE: Disabled panels cannot be controlled with these methods. Disabled panels can _only_ be controlled via the `isExpanded` input.\n\n### Accordion\n\nAn accordion is created by wrapping two or more `TsExpansionPanelComponent`s inside a `TsAccordionComponent`.\n\n```html\n\n ...\n ...\n\n```\n\n#### Allow multiple panels to be open\n\nBy default an accordion can only have a single panel open at a time. This functionality can be change with the `multi` input.\n\n```html\n\n ...\n ...\n\n```\n\n#### Accordion events\n\n| Event | Description | Payload |\n|:------------|:--------------------------------------|:--------|\n| `destroyed` | Fired when the accordion is destroyed | `void` |\n\n```html\n...\n```\n\n#### Accordion as a stepper\n\nAn accordion can function as a stepper which can be useful for guided flows. To facilitate this we can use a combination of `hideToggle` and\nthe `ts-expansion-panel-action-row`.\n\n```html\n\n\n \n \n Step 1\n\n And here is my standard panel content.\n\n \n Next\n \n \n\n \n \n Step 2\n\n And here is my standard panel content.\n\n \n Previous\n Next\n \n \n\n \n \n Step 3\n\n And here is my standard panel content.\n\n \n Previous\n End\n \n \n\n```\n\n#### Hide toggle\n\nWhen an accordion is controlled programmatically, the toggle icon can be hidden to avoid confusion for the user. Setting `hideToggle` on the\naccordion will hide the toggle icon for *all panels within*.\n\n> NOTE: This should _only_ be used in cases when the accordion is functioning as a stepper.\n\n```html\n\n ...\n ...\n\n```\n\n#### Action row\n\nThe action row is useful when an accordion is functioning as a stepper. Controls added within the action row will be right aligned as panel\ncontrols.\n\n> NOTE: See [Accordion as a stepper](https://github.com/GetTerminus/terminus-ui/blob/release/projects/library/expansion-panel/src/expansion-panel.component.md#accordion-as-a-stepper) for a complete example.\n\n```html\n\n \n Step 1\n \n\n And here is my standard panel content.\n\n \n \n \n\n```\n\n#### Open or close all panels\n\nAn accordion can programmatically open or close all panels at once.\n\n```typescript\n@ViewChild(TsAccordionComponent, {static: false})\npublic accordion: TsAccordionComponent;\n\n...\n\naccordion.openAll();\naccordion.closeAll();\n```\n\n> NOTE: These methods will *not* change the state of disabled panels.\n\n## Test Helpers\n\nSome helpers are exposed to assist with testing. These are imported from `@terminus/ui-expansion-panel/testing`;\n\n[[source]][test-helpers-src]\n\n| Function |\n|--------------------------------|\n| `getAllPanelDebugElements` |\n| `getAllPanelInstances` |\n| `getPanelDebugElement` |\n| `getPanelInstance` |\n| `getPanelElement` |\n| `getPanelBodyElement` |\n| `getPanelBodyContentElement` |\n| `getAllAccordionDebugElements` |\n| `getAllAccordionInstances` |\n| `getAccordionInstance` |\n| `getAccordionDebugElement` |\n| `getAccordionElement` |\n| `getTriggerDebugElement` |\n| `getTriggerInstance` |\n| `getTriggerElement` |\n| `getTriggerTitleElement` |\n| `getTriggerDescriptionElement` |\n| `getPanelActionRow` |\n| `togglePanel` |\n\n\n[test-helpers-src]: testing/src/test-helpers.ts\n[license-url]: https://github.com/GetTerminus/terminus-oss/blob/release/LICENSE\n[license-image]: http://img.shields.io/badge/license-MIT-blue.svg\n[codecov-project]: https://codecov.io/gh/GetTerminus/terminus-oss\n[codecov-badge]: https://codecov.io/gh/GetTerminus/terminus-oss/branch/release/graph/badge.svg\n[npm-version-image]: http://img.shields.io/npm/v/@terminus/ui-button.svg\n[npm-package]: https://www.npmjs.com/package/@terminus/ui-button\n[github-action-badge]: https://github.com/GetTerminus/terminus-oss/workflows/Release%20CI/badge.svg\n[github-action-link]: https://github.com/GetTerminus/terminus-oss/actions?query=workflow%3A%22CI+Release%22\n[file-size-badge]: http://img.badgesize.io/https://unpkg.com/@terminus/ui-button/bundles/terminus-ui-button.umd.min.js?compression=gzip\n[raw-distribution-js]: https://unpkg.com/@terminus/ui-button/bundles/terminus-ui-button.umd.js\n","readmeFilename":"README.md","description":"

Expansion Panel

","_id":"@terminus/ui-expansion-panel@1.0.25","_nodeVersion":"12.18.3","_npmVersion":"lerna/3.22.1/node@v12.18.3+x64 (linux)","dist":{"integrity":"sha512-AOTxWWU8eolf4YMxnSC8USm8biVbmkOHaspv/+zsbyCkRYrI4prfBVvjgpCU3xrnyWd1UZ0a0vZdDQDOypimlw==","shasum":"f2659d77fed13556e432dd2a4bb0c829052c60ba","tarball":"https://registry.npmjs.org/@terminus/ui-expansion-panel/-/ui-expansion-panel-1.0.25.tgz","fileCount":117,"unpackedSize":760779,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfUlbqCRA9TVsSAnZWagAA0FsP/i9VuYGw8ioPjQ5Q6JuI\nMJFt9z/+6a/Dub3o0G/mo2m34O7C87EvjntcM/OTXD6PD+F0vIQeupQCgcYH\n6Av/S+3QyX8Wam4eG27AGwmjSd5Lod7lDdvZn2a7CcXM0OeB5ojawB1QTzOV\n9auY8uk1LXGExk6VXQso5iE2AJIKoIjI2L7MdifxU6u2dZ0xzRRLJL3lTwyj\n1oKfdAGtzPynFFuezyafK3jUcbCjkO0TNMvS0zf0ZBZVemxmk64Ma0JkHJPH\nU/KlFND2EIJdPhYj+6hvfHPimT60aY0b+c9JnUDcSBIyg74YQc7auk77uJ8o\nQ0rmfvbUhITojvipPoWkwAQTjMOfCSQYxayctd1I10htJB98+4kIPYWSH0hs\npwyX7cNfpx6ZgGXLvA4ITMSeP2xNk4//qO++SEDIT5AhNghzeOvAlULqB6+D\ngxBx8aNRFowt5DOb6+bYE07uZQhxernKam/OQHS2TApXKSQbK/iD0Cezw4A/\nPc0v4F2ADEBDgiFKYc1LUv8ZxG4Fdl8dWQNRbEILCOPrwz90JUZ/QatU75nK\nxtJJedn+sA4oRacDpvMiw3uYPoaZTcAA4/P8StMuuud/qNClxVjTA2QREpDl\nLRWY40vhvSYnNLUG/9+1S9sPl5Qbotz6Svc9OucVh6ssK8EpNd77+kI1/tIb\nM40Y\r\n=Hzgm\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCDDv91BRgC4gnDZqOVIMtRqvW85P1C0SaNlFfg56ZgjAIgYno5ZkbV/tFwxxa1IPe+xQnR8S/Bf0UE7rw52UB2+AA="}]},"maintainers":[{"name":"atlwendy","email":"atlwendy@gmail.com"},{"name":"benjamincharity","email":"ben@benjamincharity.com"},{"name":"bmalinconico-terminus","email":"brian.malinconico@terminus.com"},{"name":"terminus_devops","email":"devops@terminus.com"}],"_npmUser":{"name":"terminus_devops","email":"devops@terminus.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ui-expansion-panel_1.0.25_1599231722170_0.8331625069916042"},"_hasShrinkwrap":false},"1.1.0":{"name":"@terminus/ui-expansion-panel","version":"1.1.0","license":"MIT","author":{"name":"@terminus"},"private":false,"homepage":"https://github.com/GetTerminus/terminus-oss","repository":{"type":"git","url":"git+https://github.com/GetTerminus/terminus-oss.git"},"bugs":{"url":"https://github.com/GetTerminus/terminus-oss/issues"},"publishConfig":{"access":"public","tag":"next","directory":"../../../dist/libs/ui/expansion-panel"},"peerDependencies":{"@angular/animations":"^9.1.0","@angular/cdk":"^9.2.4","@angular/common":"^9.1.0","@angular/core":"^9.1.0","@angular/platform-browser":"^9.1.0","@terminus/design-tokens":"^3.1.0","@terminus/fe-utilities":"^1.1.0","rxjs":"^6.5.0"},"schematics":"./schematics/collection.json","main":"bundles/terminus-ui-expansion-panel.umd.js","module":"fesm5/terminus-ui-expansion-panel.js","es2015":"fesm2015/terminus-ui-expansion-panel.js","esm5":"esm5/terminus-ui-expansion-panel.js","esm2015":"esm2015/terminus-ui-expansion-panel.js","fesm5":"fesm5/terminus-ui-expansion-panel.js","fesm2015":"fesm2015/terminus-ui-expansion-panel.js","typings":"terminus-ui-expansion-panel.d.ts","metadata":"terminus-ui-expansion-panel.metadata.json","sideEffects":false,"dependencies":{"tslib":"^1.10.0","@angular/forms":"9.1.11","date-fns":"2.15.0","@angular/router":"9.1.11","ngx-webstorage-service":"4.1.0","ngx-clipboard":"13.0.1","@angular/flex-layout":"9.0.0-beta.31","@angular/material":"9.2.4","@terminus/ui-button":"2.1.0","@terminus/ui-icon":"2.1.0","@angular-devkit/schematics":"9.1.9","@schematics/angular":"9.1.12","@fortawesome/fontawesome-svg-core":"1.2.30","@fortawesome/angular-fontawesome":"0.6.0","@fortawesome/pro-solid-svg-icons":"5.14.0","@terminus/ui-spacing":"1.1.0","@terminus/ui-card":"2.1.0","@terminus/ui-utilities":"1.1.0"},"readme":"

Expansion Panel

\n\n[![CI/CD Status][github-action-badge]][github-action-link] [![Codecov][codecov-badge]][codecov-project] [![MIT License][license-image]][license-url] \n[![NPM version][npm-version-image]][npm-package] [![Library size][file-size-badge]][raw-distribution-js]\n\nExpansion panel & accordion components.\n\n\n\n## Table of Contents\n\n- [Installation](#installation)\n - [Packages that need to be installed](#packages-that-need-to-be-installed)\n - [Modules that need to be in NgModule](#modules-that-need-to-be-in-ngmodule)\n - [CSS imports](#css-imports)\n - [CSS resources](#css-resources)\n- [Usage](#usage)\n - [Panel](#panel)\n - [Title and description](#title-and-description)\n - [Disable a panel](#disable-a-panel)\n - [Default a panel open](#default-a-panel-open)\n - [Lazy loaded content](#lazy-loaded-content)\n - [Transparent mode](#transparent-mode)\n - [Panel events](#panel-events)\n - [Custom trigger heights](#custom-trigger-heights)\n - [Manual control](#manual-control)\n - [Accordion](#accordion)\n - [Allow multiple panels to be open](#allow-multiple-panels-to-be-open)\n - [Accordion events](#accordion-events)\n - [Accordion as a stepper](#accordion-as-a-stepper)\n - [Hide toggle](#hide-toggle)\n - [Action row](#action-row)\n - [Open or close all panels](#open-or-close-all-panels)\n- [Test Helpers](#test-helpers)\n\n\n\n## Installation\n\n### Packages that need to be installed\n\n- `@angular/cdk`\n- `@angular/common`\n- `@angular/core`\n- `@angular/flex-layout`\n- `@angular/forms`\n- `@angular/platform-browser`\n- `@terminus/design-tokens`\n- `@terminus/fe-utilities`\n- `@terminus/ui-utilities`\n- `@terminus/ui-expansion-panel`\n- `date-fns`\n\nUse the `ng add` command to quickly install all the needed dependencies:\n\n```bash\nng add @terminus/ui-expansion-panel\n```\n\n### Modules that need to be in NgModule\n\n- `BrowserAnimationsModule,`\n- `TsExpansionPanelModule,`\n\n### CSS imports\n\nIn your top level stylesheet, add these imports:\n\n```css\n@import '~@terminus/design-tokens/css/library-design-tokens.css';\n@import '~@terminus/ui-styles/terminus-ui.css';\n``` \n\n### CSS resources\n\nLoad the needed font families by adding this link to the `` of your application:\n\n```css\n\n```\n\n## Usage\n\n### Panel\n\nThe most basic usage is a single panel with a trigger:\n\n```html\n\n \n Here is my trigger!\n \n\n

And here is my standard panel content.

\n\n```\n\n> NOTE: Without a trigger, the panel will not be visible.\n\n#### Title and description\n\nTrigger text can be split into `title` and `description` using the `TsExpansionPanelTitleComponent` and\n`TsExpansionPanelDescriptionComponent` respectively.\n\n```html\n\n\n Here is my trigger!\n\n\n\n\n\n \n My title\n \n\n \n My description\n \n\n```\n\n#### Disable a panel\n\nThe `isDisabled` flag will disable a panel and it's trigger:\n\n```html\n\n \n Here is my trigger!\n \n\n

I will never be seen.

\n\n```\n\n#### Default a panel open\n\nThe `isExpanded` flag will change the state of a panel. This can be used to default to a specific state or to dynamically change the state.\n\n```html\n\n \n Here is my trigger!\n \n\n

I'll be visible by default!

\n\n```\n\n#### Lazy loaded content\n\nPanel content can be lazily loaded by using a template with the `tsExpansionPanelContent` directive. The template will not be loaded until\nthe panel is opened for the first time. The content will remain in the DOM until the panel is destroyed.\n\n```html\n\n \n Here is my trigger!\n \n\n \n Here is my deferred template!\n \n\n```\n\n#### Transparent mode\n\nExpansion panel with transparent mode on has no box shadow and padding on the side. It's default to `false`.\n\n```html\n\n \n Here is my trigger!\n \n\n

And here is my standard panel content.

\n\n```\n\n#### Panel events\n\n| Event | Description | Payload |\n|:-----------------|:---------------------------------------------------|:----------|\n| `opened` | Fired when the panel is opened | `void` |\n| `afterExpand` | Fired after the panel expansion animation finishes | `void` |\n| `closed` | Fired when the panel is closed | `void` |\n| `afterCollapse` | Fired after the panel collapse animation finishes | `void` |\n| `expandedChange` | Fired when the panel state changes | `boolean` |\n| `destroyed` | Fired when the panel is destroyed | `void` |\n\n```html\n...\n```\n\n#### Custom trigger heights\n\nCustom heights can be set for a trigger's collapsed and/or expanded state.\n\n```html\n\n \n Panel Trigger (100px -> 200px)\n\n

And here is my standard panel content.

\n\n```\n\n#### Manual control\n\nPanels can be programmatically opened, closed or toggled through a reference to the instance:\n\n```typescript\n@ViewChild(TsExpansionPanelComponent, {static: false})\npublic panel: TsExpansionPanelComponent;\n\n...\n\npanel.open();\npanel.close();\npanel.toggle();\n```\n\n> NOTE: Disabled panels cannot be controlled with these methods. Disabled panels can _only_ be controlled via the `isExpanded` input.\n\n### Accordion\n\nAn accordion is created by wrapping two or more `TsExpansionPanelComponent`s inside a `TsAccordionComponent`.\n\n```html\n\n ...\n ...\n\n```\n\n#### Allow multiple panels to be open\n\nBy default an accordion can only have a single panel open at a time. This functionality can be change with the `multi` input.\n\n```html\n\n ...\n ...\n\n```\n\n#### Accordion events\n\n| Event | Description | Payload |\n|:------------|:--------------------------------------|:--------|\n| `destroyed` | Fired when the accordion is destroyed | `void` |\n\n```html\n...\n```\n\n#### Accordion as a stepper\n\nAn accordion can function as a stepper which can be useful for guided flows. To facilitate this we can use a combination of `hideToggle` and\nthe `ts-expansion-panel-action-row`.\n\n```html\n\n\n \n \n Step 1\n\n And here is my standard panel content.\n\n \n Next\n \n \n\n \n \n Step 2\n\n And here is my standard panel content.\n\n \n Previous\n Next\n \n \n\n \n \n Step 3\n\n And here is my standard panel content.\n\n \n Previous\n End\n \n \n\n```\n\n#### Hide toggle\n\nWhen an accordion is controlled programmatically, the toggle icon can be hidden to avoid confusion for the user. Setting `hideToggle` on the\naccordion will hide the toggle icon for *all panels within*.\n\n> NOTE: This should _only_ be used in cases when the accordion is functioning as a stepper.\n\n```html\n\n ...\n ...\n\n```\n\n#### Action row\n\nThe action row is useful when an accordion is functioning as a stepper. Controls added within the action row will be right aligned as panel\ncontrols.\n\n> NOTE: See [Accordion as a stepper](https://github.com/GetTerminus/terminus-ui/blob/release/projects/library/expansion-panel/src/expansion-panel.component.md#accordion-as-a-stepper) for a complete example.\n\n```html\n\n \n Step 1\n \n\n And here is my standard panel content.\n\n \n \n \n\n```\n\n#### Open or close all panels\n\nAn accordion can programmatically open or close all panels at once.\n\n```typescript\n@ViewChild(TsAccordionComponent, {static: false})\npublic accordion: TsAccordionComponent;\n\n...\n\naccordion.openAll();\naccordion.closeAll();\n```\n\n> NOTE: These methods will *not* change the state of disabled panels.\n\n## Test Helpers\n\nSome helpers are exposed to assist with testing. These are imported from `@terminus/ui-expansion-panel/testing`;\n\n[[source]][test-helpers-src]\n\n| Function |\n|--------------------------------|\n| `getAllPanelDebugElements` |\n| `getAllPanelInstances` |\n| `getPanelDebugElement` |\n| `getPanelInstance` |\n| `getPanelElement` |\n| `getPanelBodyElement` |\n| `getPanelBodyContentElement` |\n| `getAllAccordionDebugElements` |\n| `getAllAccordionInstances` |\n| `getAccordionInstance` |\n| `getAccordionDebugElement` |\n| `getAccordionElement` |\n| `getTriggerDebugElement` |\n| `getTriggerInstance` |\n| `getTriggerElement` |\n| `getTriggerTitleElement` |\n| `getTriggerDescriptionElement` |\n| `getPanelActionRow` |\n| `togglePanel` |\n\n\n[test-helpers-src]: testing/src/test-helpers.ts\n[license-url]: https://github.com/GetTerminus/terminus-oss/blob/release/LICENSE\n[license-image]: http://img.shields.io/badge/license-MIT-blue.svg\n[codecov-project]: https://codecov.io/gh/GetTerminus/terminus-oss\n[codecov-badge]: https://codecov.io/gh/GetTerminus/terminus-oss/branch/release/graph/badge.svg\n[npm-version-image]: http://img.shields.io/npm/v/@terminus/ui-button.svg\n[npm-package]: https://www.npmjs.com/package/@terminus/ui-button\n[github-action-badge]: https://github.com/GetTerminus/terminus-oss/workflows/Release%20CI/badge.svg\n[github-action-link]: https://github.com/GetTerminus/terminus-oss/actions?query=workflow%3A%22CI+Release%22\n[file-size-badge]: http://img.badgesize.io/https://unpkg.com/@terminus/ui-button/bundles/terminus-ui-button.umd.min.js?compression=gzip\n[raw-distribution-js]: https://unpkg.com/@terminus/ui-button/bundles/terminus-ui-button.umd.js\n","readmeFilename":"README.md","description":"

Expansion Panel

","_id":"@terminus/ui-expansion-panel@1.1.0","_nodeVersion":"12.18.3","_npmVersion":"lerna/3.22.1/node@v12.18.3+x64 (linux)","dist":{"integrity":"sha512-UqMVlD0SlErs0n4e0PB89OwyEvSm7onwBDhPt0X89HOCOFaT08bc4pXT+mWfues+3x9/AfV88vIMoXORb03+ZQ==","shasum":"aa760b2301ec3c46412b973fe8661808f319b5f4","tarball":"https://registry.npmjs.org/@terminus/ui-expansion-panel/-/ui-expansion-panel-1.1.0.tgz","fileCount":117,"unpackedSize":761274,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfV9LkCRA9TVsSAnZWagAAehUP+QGAyQhXqcggJxJM2Uo5\nLqLAYFmlqmiz84gh/PlacikgeV4K2XtiAkEhwhELpLmiWVUroL+0fqt4lMM6\newVubIQaK2iCBGdwuBTGpeQERzNhKXusggUBG8OQil6u+zidiXvmUCDmx5H+\nqSZhzKBS1Y4djivAEvOBT6qh1oV1xwXe0hnDOJ8kEotIeCBP1uMMT4CEm5ab\nb1jYmnOBo5mI0HWqPHufty/OCedFOPso79e9LKdYk9+jzATVuTSZiotwNUvA\nadIUxIHS+zeUsmyDmh6fVkQzmebJrN6DRBFMdrbmvsrX8IsYS5I/SQAcNKtq\nbky4VLU2rqUOizPxJSFBX1EWzvS9vXi69nu8jG82sKC7I1bGye0n1x5LbSdb\n81A18WLM2fLUazJYiwUnpDuOQ4MhnyKfmImJY75WFdn7tv4hhpkc5hNzW9+F\nsiLWio6z+UctvB9VkAPXIzv2RG0AhihNdu0f+3WgDLoP+6wkH9MG3sQDXsMY\ndrl2xVIS0ro3g5g7j7awRPo73vSlxXYPQjbw+P3VIdkTM6rNf2Q54AFtErMt\nxAgkIjW6nc8xPceiI/z8jU60Vokev93yVKdGXiE3Tyw2GAi2mqRWmpJ8oN2E\nV0S5yxwnIkI8jpNEGKEJ2/B/I1jArCzSQKUHBsC0LLOlgAtDTewHUvKrXM0R\nWvBc\r\n=HLl3\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCYXHT1RKfcTrbgNpuF+0oTDzDF1qEBWGfjeKJZgoMryQIhAJ2XlxX4F2Lf0WPtdT7UpMdHvW/oKCMkfmwX+XOplHZC"}]},"maintainers":[{"name":"terminus_devops","email":"devops@terminus.com"},{"name":"atlwendy","email":"atlwendy@gmail.com"},{"name":"bmalinconico-terminus","email":"brian.malinconico@terminus.com"},{"name":"benjamincharity","email":"ben@benjamincharity.com"}],"_npmUser":{"name":"terminus_devops","email":"devops@terminus.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ui-expansion-panel_1.1.0_1599591139838_0.8690129400385971"},"_hasShrinkwrap":false},"1.1.1":{"name":"@terminus/ui-expansion-panel","version":"1.1.1","license":"MIT","author":{"name":"@terminus"},"private":false,"homepage":"https://github.com/GetTerminus/terminus-oss","repository":{"type":"git","url":"git+https://github.com/GetTerminus/terminus-oss.git"},"bugs":{"url":"https://github.com/GetTerminus/terminus-oss/issues"},"publishConfig":{"access":"public","tag":"next","directory":"../../../dist/libs/ui/expansion-panel"},"peerDependencies":{"@angular/animations":"^9.1.0","@angular/cdk":"^9.2.4","@angular/common":"^9.1.0","@angular/core":"^9.1.0","@angular/platform-browser":"^9.1.0","@terminus/design-tokens":"^3.1.0","@terminus/fe-utilities":"^1.1.0","rxjs":"^6.5.0"},"schematics":"./schematics/collection.json","main":"bundles/terminus-ui-expansion-panel.umd.js","module":"fesm5/terminus-ui-expansion-panel.js","es2015":"fesm2015/terminus-ui-expansion-panel.js","esm5":"esm5/terminus-ui-expansion-panel.js","esm2015":"esm2015/terminus-ui-expansion-panel.js","fesm5":"fesm5/terminus-ui-expansion-panel.js","fesm2015":"fesm2015/terminus-ui-expansion-panel.js","typings":"terminus-ui-expansion-panel.d.ts","metadata":"terminus-ui-expansion-panel.metadata.json","sideEffects":false,"dependencies":{"tslib":"^1.10.0","@angular/forms":"9.1.11","date-fns":"2.15.0","@angular/router":"9.1.11","ngx-webstorage-service":"4.1.0","ngx-clipboard":"13.0.1","@angular/flex-layout":"9.0.0-beta.31","@angular/material":"9.2.4","@terminus/ui-button":"2.1.1","@terminus/ui-icon":"2.1.1","@angular-devkit/schematics":"9.1.9","@schematics/angular":"9.1.12","@fortawesome/fontawesome-svg-core":"1.2.30","@fortawesome/angular-fontawesome":"0.6.0","@fortawesome/pro-solid-svg-icons":"5.14.0","@terminus/ui-spacing":"1.1.1","@terminus/ui-card":"2.1.1","@terminus/ui-utilities":"1.1.0"},"description":"

Expansion Panel

","_id":"@terminus/ui-expansion-panel@1.1.1","_nodeVersion":"12.18.3","_npmVersion":"lerna/3.22.1/node@v12.18.3+x64 (linux)","dist":{"integrity":"sha512-jIr5zhzY5WEchnejBjP/9wgwd0tij5KPuLeVWcT4u7pApM6mRBpoQOuh05n/LaTBAt+1B5hGRmtSBE98jdL1Yw==","shasum":"55e1390a04c34ff79b21879c56b862079e1fd27f","tarball":"https://registry.npmjs.org/@terminus/ui-expansion-panel/-/ui-expansion-panel-1.1.1.tgz","fileCount":117,"unpackedSize":761498,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfW7VPCRA9TVsSAnZWagAA0WYQAKLMM83YpSGCczBZ4New\no4UNlm1IRaAMhnvS2dyTUxciWH4GqXM0si6hPmvAN7yHB1D7fHc1GTA8wRkE\n87GmcW+OEClna1nZVOY1oRCVNothbaOP+U1fXCD5t3qqpeFmXlZydUawdFym\nlvTyiZAJXxNdFnkZmVqwbY25jm9kfbRM7I2Lv/fYoRPI+2QiYa9Ft9J5ivVn\n3KhcEvmF4I+aHBYOTQ6cmlaztQ5fRO7hJxPk3xSebBsumxDnDZfZBNsFEr3K\ncwr9wPwhE/PrA22CN22DirNghKlEpixF7HMwjrjx80V1ShlGDpB5qHhjk7MH\n/XCv8Huq9zPfSNhcv3zRr5q6xdD0S89ASpYE7vX7PpVJ5iOkpE7T2nvT1a8A\nvVz3CKNca/TBkX5bTVdqAYiLf+6hlL0mnz4NDRPefcdZSX4VMd+/xHEYvtsa\n2naNXXra41Clbwap3cmwjRbyom7Cr/K0ygfO8v49eNAtTnbOotLmdbIk+J1w\nEQxFV6ulI43SR1Mwz9GLVmwPLzKHdfuaqfVlR3c5+Q29F6+JYjZsneKsdnmG\nKW5UCSzpmqwVeYhN05+Mk58uNIti0M16Jon1RMc1tL4mWrFZOHNOKLtJN5Sh\nPRTtjd0lPE+8fkIAa+kZEPkKZWlnhRCN9KM0v2p5mon+vITJ+eB9ipKSAnfo\nE7Mz\r\n=w4KC\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAee7KTjsxt2fgHzIJCPFpxXUwKhhdZWR9oo1aa8wZ5lAiAfjNn7yskoJlLD0lEwAMN+72U/lezTI3Br7NUaVECaqQ=="}]},"maintainers":[{"name":"terminus_devops","email":"devops@terminus.com"},{"name":"atlwendy","email":"atlwendy@gmail.com"},{"name":"bmalinconico-terminus","email":"brian.malinconico@terminus.com"},{"name":"benjamincharity","email":"ben@benjamincharity.com"}],"_npmUser":{"name":"terminus_devops","email":"devops@terminus.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ui-expansion-panel_1.1.1_1599845710597_0.6072912020514225"},"_hasShrinkwrap":false},"1.1.2":{"name":"@terminus/ui-expansion-panel","version":"1.1.2","license":"MIT","author":{"name":"@terminus"},"private":false,"homepage":"https://github.com/GetTerminus/terminus-oss","repository":{"type":"git","url":"git+https://github.com/GetTerminus/terminus-oss.git"},"bugs":{"url":"https://github.com/GetTerminus/terminus-oss/issues"},"publishConfig":{"access":"public","tag":"next","directory":"../../../dist/libs/ui/expansion-panel"},"peerDependencies":{"@angular/animations":"^9.1.0","@angular/cdk":"^9.2.4","@angular/common":"^9.1.0","@angular/core":"^9.1.0","@angular/platform-browser":"^9.1.0","@terminus/design-tokens":"^3.1.0","@terminus/fe-utilities":"^1.1.0","rxjs":"^6.5.0"},"schematics":"./schematics/collection.json","main":"bundles/terminus-ui-expansion-panel.umd.js","module":"fesm5/terminus-ui-expansion-panel.js","es2015":"fesm2015/terminus-ui-expansion-panel.js","esm5":"esm5/terminus-ui-expansion-panel.js","esm2015":"esm2015/terminus-ui-expansion-panel.js","fesm5":"fesm5/terminus-ui-expansion-panel.js","fesm2015":"fesm2015/terminus-ui-expansion-panel.js","typings":"terminus-ui-expansion-panel.d.ts","metadata":"terminus-ui-expansion-panel.metadata.json","sideEffects":false,"dependencies":{"tslib":"^1.10.0","@angular/forms":"9.1.11","date-fns":"2.15.0","@angular/router":"9.1.11","ngx-webstorage-service":"4.1.0","ngx-clipboard":"13.0.1","@angular/flex-layout":"9.0.0-beta.31","@angular/material":"9.2.4","@terminus/ui-button":"2.1.2","@terminus/ui-icon":"2.1.2","@angular-devkit/schematics":"9.1.9","@schematics/angular":"9.1.12","@fortawesome/fontawesome-svg-core":"1.2.30","@fortawesome/angular-fontawesome":"0.6.0","@fortawesome/pro-solid-svg-icons":"5.14.0","@terminus/ui-spacing":"1.1.2","@terminus/ui-card":"2.1.2","@terminus/ui-utilities":"1.1.0"},"readme":"

Expansion Panel

\n\n[![CI/CD Status][github-action-badge]][github-action-link] [![Codecov][codecov-badge]][codecov-project] [![MIT License][license-image]][license-url] \n[![NPM version][npm-version-image]][npm-package] [![Library size][file-size-badge]][raw-distribution-js]\n\nExpansion panel & accordion components.\n\n\n\n## Table of Contents\n\n- [Installation](#installation)\n - [Packages that need to be installed](#packages-that-need-to-be-installed)\n - [Modules that need to be in NgModule](#modules-that-need-to-be-in-ngmodule)\n - [CSS imports](#css-imports)\n - [CSS resources](#css-resources)\n- [Usage](#usage)\n - [Panel](#panel)\n - [Title and description](#title-and-description)\n - [Disable a panel](#disable-a-panel)\n - [Default a panel open](#default-a-panel-open)\n - [Lazy loaded content](#lazy-loaded-content)\n - [Transparent mode](#transparent-mode)\n - [Panel events](#panel-events)\n - [Custom trigger heights](#custom-trigger-heights)\n - [Manual control](#manual-control)\n - [Accordion](#accordion)\n - [Allow multiple panels to be open](#allow-multiple-panels-to-be-open)\n - [Accordion events](#accordion-events)\n - [Accordion as a stepper](#accordion-as-a-stepper)\n - [Hide toggle](#hide-toggle)\n - [Action row](#action-row)\n - [Open or close all panels](#open-or-close-all-panels)\n- [Test Helpers](#test-helpers)\n\n\n\n## Installation\n\n### Packages that need to be installed\n\n- `@angular/cdk`\n- `@angular/common`\n- `@angular/core`\n- `@angular/flex-layout`\n- `@angular/forms`\n- `@angular/platform-browser`\n- `@terminus/design-tokens`\n- `@terminus/fe-utilities`\n- `@terminus/ui-utilities`\n- `@terminus/ui-expansion-panel`\n- `date-fns`\n\nUse the `ng add` command to quickly install all the needed dependencies:\n\n```bash\nng add @terminus/ui-expansion-panel\n```\n\n### Modules that need to be in NgModule\n\n- `BrowserAnimationsModule,`\n- `TsExpansionPanelModule,`\n\n### CSS imports\n\nIn your top level stylesheet, add these imports:\n\n```css\n@import '~@terminus/design-tokens/css/library-design-tokens.css';\n@import '~@terminus/ui-styles/terminus-ui.css';\n``` \n\n### CSS resources\n\nLoad the needed font families by adding this link to the `` of your application:\n\n```css\n\n```\n\n## Usage\n\n### Panel\n\nThe most basic usage is a single panel with a trigger:\n\n```html\n\n \n Here is my trigger!\n \n\n

And here is my standard panel content.

\n\n```\n\n> NOTE: Without a trigger, the panel will not be visible.\n\n#### Title and description\n\nTrigger text can be split into `title` and `description` using the `TsExpansionPanelTitleComponent` and\n`TsExpansionPanelDescriptionComponent` respectively.\n\n```html\n\n\n Here is my trigger!\n\n\n\n\n\n \n My title\n \n\n \n My description\n \n\n```\n\n#### Disable a panel\n\nThe `isDisabled` flag will disable a panel and it's trigger:\n\n```html\n\n \n Here is my trigger!\n \n\n

I will never be seen.

\n\n```\n\n#### Default a panel open\n\nThe `isExpanded` flag will change the state of a panel. This can be used to default to a specific state or to dynamically change the state.\n\n```html\n\n \n Here is my trigger!\n \n\n

I'll be visible by default!

\n\n```\n\n#### Lazy loaded content\n\nPanel content can be lazily loaded by using a template with the `tsExpansionPanelContent` directive. The template will not be loaded until\nthe panel is opened for the first time. The content will remain in the DOM until the panel is destroyed.\n\n```html\n\n \n Here is my trigger!\n \n\n \n Here is my deferred template!\n \n\n```\n\n#### Transparent mode\n\nExpansion panel with transparent mode on has no box shadow and padding on the side. It's default to `false`.\n\n```html\n\n \n Here is my trigger!\n \n\n

And here is my standard panel content.

\n\n```\n\n#### Panel events\n\n| Event | Description | Payload |\n|:-----------------|:---------------------------------------------------|:----------|\n| `opened` | Fired when the panel is opened | `void` |\n| `afterExpand` | Fired after the panel expansion animation finishes | `void` |\n| `closed` | Fired when the panel is closed | `void` |\n| `afterCollapse` | Fired after the panel collapse animation finishes | `void` |\n| `expandedChange` | Fired when the panel state changes | `boolean` |\n| `destroyed` | Fired when the panel is destroyed | `void` |\n\n```html\n...\n```\n\n#### Custom trigger heights\n\nCustom heights can be set for a trigger's collapsed and/or expanded state.\n\n```html\n\n \n Panel Trigger (100px -> 200px)\n\n

And here is my standard panel content.

\n\n```\n\n#### Manual control\n\nPanels can be programmatically opened, closed or toggled through a reference to the instance:\n\n```typescript\n@ViewChild(TsExpansionPanelComponent, {static: false})\npublic panel: TsExpansionPanelComponent;\n\n...\n\npanel.open();\npanel.close();\npanel.toggle();\n```\n\n> NOTE: Disabled panels cannot be controlled with these methods. Disabled panels can _only_ be controlled via the `isExpanded` input.\n\n### Accordion\n\nAn accordion is created by wrapping two or more `TsExpansionPanelComponent`s inside a `TsAccordionComponent`.\n\n```html\n\n ...\n ...\n\n```\n\n#### Allow multiple panels to be open\n\nBy default an accordion can only have a single panel open at a time. This functionality can be change with the `multi` input.\n\n```html\n\n ...\n ...\n\n```\n\n#### Accordion events\n\n| Event | Description | Payload |\n|:------------|:--------------------------------------|:--------|\n| `destroyed` | Fired when the accordion is destroyed | `void` |\n\n```html\n...\n```\n\n#### Accordion as a stepper\n\nAn accordion can function as a stepper which can be useful for guided flows. To facilitate this we can use a combination of `hideToggle` and\nthe `ts-expansion-panel-action-row`.\n\n```html\n\n\n \n \n Step 1\n\n And here is my standard panel content.\n\n \n Next\n \n \n\n \n \n Step 2\n\n And here is my standard panel content.\n\n \n Previous\n Next\n \n \n\n \n \n Step 3\n\n And here is my standard panel content.\n\n \n Previous\n End\n \n \n\n```\n\n#### Hide toggle\n\nWhen an accordion is controlled programmatically, the toggle icon can be hidden to avoid confusion for the user. Setting `hideToggle` on the\naccordion will hide the toggle icon for *all panels within*.\n\n> NOTE: This should _only_ be used in cases when the accordion is functioning as a stepper.\n\n```html\n\n ...\n ...\n\n```\n\n#### Action row\n\nThe action row is useful when an accordion is functioning as a stepper. Controls added within the action row will be right aligned as panel\ncontrols.\n\n> NOTE: See [Accordion as a stepper](https://github.com/GetTerminus/terminus-ui/blob/release/projects/library/expansion-panel/src/expansion-panel.component.md#accordion-as-a-stepper) for a complete example.\n\n```html\n\n \n Step 1\n \n\n And here is my standard panel content.\n\n \n \n \n\n```\n\n#### Open or close all panels\n\nAn accordion can programmatically open or close all panels at once.\n\n```typescript\n@ViewChild(TsAccordionComponent, {static: false})\npublic accordion: TsAccordionComponent;\n\n...\n\naccordion.openAll();\naccordion.closeAll();\n```\n\n> NOTE: These methods will *not* change the state of disabled panels.\n\n## Test Helpers\n\nSome helpers are exposed to assist with testing. These are imported from `@terminus/ui-expansion-panel/testing`;\n\n[[source]][test-helpers-src]\n\n| Function |\n|--------------------------------|\n| `getAllPanelDebugElements` |\n| `getAllPanelInstances` |\n| `getPanelDebugElement` |\n| `getPanelInstance` |\n| `getPanelElement` |\n| `getPanelBodyElement` |\n| `getPanelBodyContentElement` |\n| `getAllAccordionDebugElements` |\n| `getAllAccordionInstances` |\n| `getAccordionInstance` |\n| `getAccordionDebugElement` |\n| `getAccordionElement` |\n| `getTriggerDebugElement` |\n| `getTriggerInstance` |\n| `getTriggerElement` |\n| `getTriggerTitleElement` |\n| `getTriggerDescriptionElement` |\n| `getPanelActionRow` |\n| `togglePanel` |\n\n\n[test-helpers-src]: testing/src/test-helpers.ts\n[license-url]: https://github.com/GetTerminus/terminus-oss/blob/release/LICENSE\n[license-image]: http://img.shields.io/badge/license-MIT-blue.svg\n[codecov-project]: https://codecov.io/gh/GetTerminus/terminus-oss\n[codecov-badge]: https://codecov.io/gh/GetTerminus/terminus-oss/branch/release/graph/badge.svg\n[npm-version-image]: http://img.shields.io/npm/v/@terminus/ui-button.svg\n[npm-package]: https://www.npmjs.com/package/@terminus/ui-button\n[github-action-badge]: https://github.com/GetTerminus/terminus-oss/workflows/Release%20CI/badge.svg\n[github-action-link]: https://github.com/GetTerminus/terminus-oss/actions?query=workflow%3A%22CI+Release%22\n[file-size-badge]: http://img.badgesize.io/https://unpkg.com/@terminus/ui-button/bundles/terminus-ui-button.umd.min.js?compression=gzip\n[raw-distribution-js]: https://unpkg.com/@terminus/ui-button/bundles/terminus-ui-button.umd.js\n","readmeFilename":"README.md","description":"

Expansion Panel

","_id":"@terminus/ui-expansion-panel@1.1.2","_nodeVersion":"12.18.3","_npmVersion":"lerna/3.22.1/node@v12.18.3+x64 (linux)","dist":{"integrity":"sha512-zG3djxSl7iaLK4pMHC9DZtrpCtmgAgZrEQek9E4Qn+O/Rnwhzgfr6mWgHpRzsJiSUoteTRcOjofGoUg2R2ROcA==","shasum":"f198444672dce2d5e419d44258683c762450f9ed","tarball":"https://registry.npmjs.org/@terminus/ui-expansion-panel/-/ui-expansion-panel-1.1.2.tgz","fileCount":117,"unpackedSize":763642,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfX6qfCRA9TVsSAnZWagAAvRsP/3zVpJX1hzHuyx0qhiYj\nxqRYIK414orBqgSlFHoWkOCac0nXR28l1X59+L9VuoI2aoHv3v7b5v4zk+9f\nBh6T9gGZMlYm+JClsBd607pwWnmCSeBWjWLR5XLUV6ny0sV6JjsId2TIhoHr\nCBuEpC6giLo1YuwwH+QbRxQvwArnU0nrVUktyBsJ/qrsxYWJZLsv5jSZbTjN\npRIhYY2O4OLGjl1yJgVvrWLEoLZW3mdPfEq94NxiBysNmgk10JAplYSlGgHu\nrceXmVa2+yl6F13/LF+O1DrpSchdVz/ScXI0WzjWm67iSeCpdWraRBnkGmXW\nykI8fGKUrE/C+ik35ypQI/6ZE0KPkwjLV8Pc8Z61kYzTmsotvcdyMM2UuoX4\nvkHLx6eVIMWiSuOdOn5thHtaTK5Gy4xsNUNjSmjd8Yx3QrJW5CA4sJtZpAio\nSPdCsKGj0oxJQeBr222yvkbBrQa4nEJ5kFgipX2dRA8sbxxvik3n2VfsOZ6L\nSsYPhfsh+GNN888MV841P3Y6Da2YIxY49KFATVhbbZDqmNkdXGUeIUaOeh48\nTjThjP8BxNgXNzIrXNi2OvcUMUEjJ+rut3yYBCJ+Q2MPymbeF48+JwT+JqTX\nJ/9kGqUoMD7jtavPI2AH1CzIdMwpQKRdYHJOZywMbxnHNa1cVDg9UJ5GDKjL\n/iWB\r\n=jNu5\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIB1wwwCM5VPgv+BCFV7JtMl95VB3uuPzobszxMvk0PdLAiBCm5KFsDskvtHNj+Js5rF3ECBSxj4iWcdzO+xqIeCogA=="}]},"maintainers":[{"name":"terminus_devops","email":"devops@terminus.com"},{"name":"atlwendy","email":"atlwendy@gmail.com"},{"name":"bmalinconico-terminus","email":"brian.malinconico@terminus.com"},{"name":"benjamincharity","email":"ben@benjamincharity.com"}],"_npmUser":{"name":"terminus_devops","email":"devops@terminus.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ui-expansion-panel_1.1.2_1600105118483_0.12496486472737045"},"_hasShrinkwrap":false},"1.1.3":{"name":"@terminus/ui-expansion-panel","version":"1.1.3","license":"MIT","author":{"name":"@terminus"},"private":false,"homepage":"https://github.com/GetTerminus/terminus-oss","repository":{"type":"git","url":"git+https://github.com/GetTerminus/terminus-oss.git"},"bugs":{"url":"https://github.com/GetTerminus/terminus-oss/issues"},"publishConfig":{"access":"public","tag":"next","directory":"../../../dist/libs/ui/expansion-panel"},"peerDependencies":{"@angular/animations":"^9.1.0","@angular/cdk":"^9.2.4","@angular/common":"^9.1.0","@angular/core":"^9.1.0","@angular/platform-browser":"^9.1.0","@terminus/design-tokens":"^3.1.0","@terminus/fe-utilities":"^1.1.0","rxjs":"^6.5.0"},"schematics":"./schematics/collection.json","main":"bundles/terminus-ui-expansion-panel.umd.js","module":"fesm5/terminus-ui-expansion-panel.js","es2015":"fesm2015/terminus-ui-expansion-panel.js","esm5":"esm5/terminus-ui-expansion-panel.js","esm2015":"esm2015/terminus-ui-expansion-panel.js","fesm5":"fesm5/terminus-ui-expansion-panel.js","fesm2015":"fesm2015/terminus-ui-expansion-panel.js","typings":"terminus-ui-expansion-panel.d.ts","metadata":"terminus-ui-expansion-panel.metadata.json","sideEffects":false,"dependencies":{"tslib":"^1.10.0","@angular/forms":"9.1.11","date-fns":"2.16.1","@angular/router":"9.1.11","ngx-webstorage-service":"4.1.0","ngx-clipboard":"13.0.1","@angular/flex-layout":"9.0.0-beta.31","@angular/material":"9.2.4","@terminus/ui-button":"2.1.3","@terminus/ui-icon":"2.1.2","@angular-devkit/schematics":"9.1.9","@schematics/angular":"9.1.12","@fortawesome/fontawesome-svg-core":"1.2.30","@fortawesome/angular-fontawesome":"0.6.0","@fortawesome/pro-solid-svg-icons":"5.14.0","@terminus/ui-spacing":"1.1.2","@terminus/ui-card":"3.0.0","@terminus/ui-utilities":"1.1.0"},"description":"

Expansion Panel

","_id":"@terminus/ui-expansion-panel@1.1.3","_nodeVersion":"12.18.4","_npmVersion":"lerna/3.22.1/node@v12.18.4+x64 (linux)","dist":{"integrity":"sha512-aM0eMFDK/fhtcNSou2/LoM4g2T6vDlUeG9h8Bp2SWUmIWbGW3PH5sDNUN98XInqCym5sO9kgbOU1JqHtb1nhCA==","shasum":"b3ca9ea3d9ae3a7981992c22b822f4c81d12b7cc","tarball":"https://registry.npmjs.org/@terminus/ui-expansion-panel/-/ui-expansion-panel-1.1.3.tgz","fileCount":117,"unpackedSize":772347,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfden1CRA9TVsSAnZWagAArh4QAJNVxdDZIoQezaNrVDQn\n8E5Hnm8sy323NdR0fEp4TFT+yAVNUpahxsNBd0J7tw9R3DvI5XIAuagCKQ33\n6KxH/pahB5bglZwyMqjiNbso9/312vHSkF0iUmYHFSnHU0S3Z2JmtYktqUKi\nG2r0VOeN2AwYzU40YiT1AfpJhfySV5hakV+j/ET+SpqNSOoWKnS8551uSi4M\nF7qhgN5Q2lbWXJEqoKUFQuIfjz13GHPsjtXzGyiKIQgUSbhO63Cmlguo08at\nCeMnPqfRQnJRUhAVSIAmXGRypxfARsPNC1JixdvmONfyOFaD+eVM0jAWTULG\nRH2XU31XJ9+phGgykcs6b6VYYlGEYevmCbMO5h9A28FBCP7B0nhLU1QL67U0\na9RUSyhux9MEzDmy/XcivVgULTblctUSJp3XghAV6zxkhRT3bjUHMmRR2u7S\nRuJeONz9fpAnISsWMIbIWad6njldEq3KKSsItIyraDwAH1xZlmZaQM543StL\nAxD5x6QpZDHM6aR9fxaCfrUbNsLlYfwpoGFe1p4dJPYuHzuo1V6xlztzcsSa\nXPYjxktV1vnzuY32O52Yck3K+XkLk+uP3l+CG6nDn95uWzBrf0mN0JH1YqmR\nzsY+LKGX307FCjStNe4p3qyoMBMfL746B7UBJTAdxknR2xQEwn1Pay4SQ5Ad\nGNN/\r\n=yISV\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBfqsd4eakA0U1G+lI7xk0795MH3MtUBs/HEbnijm+jYAiEAqK4LPlC6JoL+sqzHTcnKFKJk9fd60N5zM4G0WlLDf9s="}]},"maintainers":[{"name":"terminus_devops","email":"devops@terminus.com"},{"name":"atlwendy","email":"atlwendy@gmail.com"},{"name":"bmalinconico-terminus","email":"brian.malinconico@terminus.com"},{"name":"benjamincharity","email":"ben@benjamincharity.com"}],"_npmUser":{"name":"terminus_devops","email":"devops@terminus.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ui-expansion-panel_1.1.3_1601563124777_0.5477945476901944"},"_hasShrinkwrap":false},"1.1.4":{"name":"@terminus/ui-expansion-panel","version":"1.1.4","license":"MIT","author":{"name":"@terminus"},"private":false,"homepage":"https://github.com/GetTerminus/terminus-oss","repository":{"type":"git","url":"git+https://github.com/GetTerminus/terminus-oss.git"},"bugs":{"url":"https://github.com/GetTerminus/terminus-oss/issues"},"publishConfig":{"access":"public","tag":"next","directory":"../../../dist/libs/ui/expansion-panel"},"peerDependencies":{"@angular/animations":"^9.1.0","@angular/cdk":"^9.2.4","@angular/common":"^9.1.0","@angular/core":"^9.1.0","@angular/forms":"^9.1.0","@angular/platform-browser":"^9.1.0","@terminus/design-tokens":"^3.1.0","@terminus/fe-utilities":"^1.1.0","date-fns":"^2.16.1","rxjs":"^6.5.0"},"schematics":"./schematics/collection.json","main":"bundles/terminus-ui-expansion-panel.umd.js","module":"fesm5/terminus-ui-expansion-panel.js","es2015":"fesm2015/terminus-ui-expansion-panel.js","esm5":"esm5/terminus-ui-expansion-panel.js","esm2015":"esm2015/terminus-ui-expansion-panel.js","fesm5":"fesm5/terminus-ui-expansion-panel.js","fesm2015":"fesm2015/terminus-ui-expansion-panel.js","typings":"terminus-ui-expansion-panel.d.ts","metadata":"terminus-ui-expansion-panel.metadata.json","sideEffects":false,"dependencies":{"tslib":"^1.10.0","@angular-devkit/schematics":"9.1.9","@schematics/angular":"9.1.12"},"description":"

Expansion Panel

","_id":"@terminus/ui-expansion-panel@1.1.4","_nodeVersion":"12.19.0","_npmVersion":"lerna/3.22.1/node@v12.19.0+x64 (linux)","dist":{"integrity":"sha512-6vUkFMubzeCC3M1QxhCPtAzVGxITtd0KHZ81PNcXGlCBsQgVJOuCGKkJM25/W4vTYA+YY51EBZ4MzZFy1u0EKA==","shasum":"b47b081b2d6b3d1b620917c44d3c296781c4ed2e","tarball":"https://registry.npmjs.org/@terminus/ui-expansion-panel/-/ui-expansion-panel-1.1.4.tgz","fileCount":117,"unpackedSize":773109,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfq9MICRA9TVsSAnZWagAAzSUP/RFPxsVjfdZWeRHt3egF\n3lKCQROdAwzDo0TMY6weCXsBSf/ldZQLm2x1DRdgIOf2EN9aFINPTGLBe63r\nNsb+g0189ALLj8MEFNBSKqRerTBkqTRELe0zTGLtrjQ1pFXWxe76thkjVgHr\npvibjw1FMpO76UjEOAc6hlUCJqRdXIWWbpMupOLrF2lhwstSugL2X1JZPhtE\nOpOT9f1wkJw7qIGdvRScGpgDntHi6CKKxJJ4fs/G65m1/37WlsWXrzv/i9BU\nJ21XSjwNp5ELRzyXYjFkG0te1ybqPtggqAYpx42bP+UIThQTnkEPCfVm0S+b\nWXpPHkCy8I60JUHSb7sLqvCnwi1GZOnIN1V3YNH+GIZUpt1DRlre95bxDACX\n0zR7/iF1mjEDpBlb+u0IezUB0va/pdSIiZhyTv58Y/FdgfPXR+st0fc5EJkj\nUJ3lLRYjMo7i+3h+wE+fZbFOmmpXMcyOHnWzgRTVq2swpE7PZ3ZI6J1ou62E\nhTzLVxY1Y0+tPjYR4ZXr547C+y+lupOrNAcP7z4H/qjJTjsy8HbO91TRX0KM\nhiez3NqzET2jywJGm1MgNHlpApwzGmWdwAV4T91/KoVBLnL/Ii0n3OLPk/hF\n3THM/SomQ8+H5qygGnZb2ci87e4UbWG7kTBHLUSJgjZCewP0ZKo6VTtYuBer\nsacu\r\n=l3Sp\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFHGLJmF0ilFTQ6dpCET6+JAUo8jR44yyf+s3nNyMiCJAiEA68QDz5K9LttnCrIC0fCH1BVSOUHrl/cl0wsDKDrd6cI="}]},"_npmUser":{"name":"terminus_devops","email":"devops@terminus.com"},"directories":{},"maintainers":[{"name":"terminus_devops","email":"devops@terminus.com"},{"name":"atlwendy","email":"atlwendy@gmail.com"},{"name":"bmalinconico-terminus","email":"brian.malinconico@terminus.com"},{"name":"benjamincharity","email":"ben@benjamincharity.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ui-expansion-panel_1.1.4_1605096200440_0.3922336566317599"},"_hasShrinkwrap":false},"1.1.5":{"name":"@terminus/ui-expansion-panel","version":"1.1.5","license":"MIT","author":{"name":"@terminus"},"private":false,"homepage":"https://github.com/GetTerminus/terminus-oss","repository":{"type":"git","url":"git+https://github.com/GetTerminus/terminus-oss.git"},"bugs":{"url":"https://github.com/GetTerminus/terminus-oss/issues"},"publishConfig":{"access":"public","tag":"next","directory":"../../../dist/libs/ui/expansion-panel"},"peerDependencies":{"@angular/animations":"^9.1.0","@angular/cdk":"^9.2.4","@angular/common":"^9.1.0","@angular/core":"^9.1.0","@angular/forms":"^9.1.0","@angular/platform-browser":"^9.1.0","@terminus/design-tokens":"^3.1.0","@terminus/fe-utilities":"^1.1.0","@terminus/ui-styles":"^1.1.0","date-fns":"^2.16.1","rxjs":"^6.5.0"},"schematics":"./schematics/collection.json","main":"bundles/terminus-ui-expansion-panel.umd.js","module":"fesm5/terminus-ui-expansion-panel.js","es2015":"fesm2015/terminus-ui-expansion-panel.js","esm5":"esm5/terminus-ui-expansion-panel.js","esm2015":"esm2015/terminus-ui-expansion-panel.js","fesm5":"fesm5/terminus-ui-expansion-panel.js","fesm2015":"fesm2015/terminus-ui-expansion-panel.js","typings":"terminus-ui-expansion-panel.d.ts","metadata":"terminus-ui-expansion-panel.metadata.json","sideEffects":false,"dependencies":{"tslib":"^1.10.0","@angular-devkit/schematics":"9.1.9","@schematics/angular":"9.1.12"},"description":"

Expansion Panel

","_id":"@terminus/ui-expansion-panel@1.1.5","_nodeVersion":"12.19.0","_npmVersion":"lerna/3.22.1/node@v12.19.0+x64 (linux)","dist":{"integrity":"sha512-cuSr1+kqqtnzEkOIwkm3BRnd11DYwI8r99qggj45kPuoB+0zjZFVXEcu4SR9JYmSVRIBBm+M0jGcmQPhLRf6dQ==","shasum":"36360968d51f597d09d2fca779e3b31bd73c849b","tarball":"https://registry.npmjs.org/@terminus/ui-expansion-panel/-/ui-expansion-panel-1.1.5.tgz","fileCount":117,"unpackedSize":773523,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfrB2lCRA9TVsSAnZWagAANpUP/jvrJ8ujMu80dwHsVbxP\na3JfMCi/ywHshlmxFvlTWSSkFt9090sCcJ0T9s+LdN8xAAkfbY54Z/H4uUFj\nSHvMCzEXvQ2H70JKH3z5VeoE8Jr4JDEhr/fUx7QfI1UjLw0tBzqWdKJIOmTa\noEmPhukbq7G1iF6/DNDIdE0LiLGvP8YesByuo47cKs8KsHu76tipPodErS34\n4h2xjoOwxK9OlWInveJ5ZbtF2rpkAVrlAjbP/w+zAS6GTk/tgDySjOoNY7aJ\nIGGHy9GLGpq8bSXuk6U526YUTWmp46MEPJXIMTi9Ft4eTwgWoztWpWKJfeOk\nBTGDViUYsIWv+8/uNAIF42Z35oDZI86E/UTLuGxsASNiKx8oGSLohDsk8tNa\n290SnkANZROnnw7erMKsHnPOu2pVZdrsmjwj92Ue26jgsh8iRru+kfTZ9FAv\n2lmSx0SjAlh7wH2hhe33LIwZ47VkpDZHc3sFdIWS9Gf3wxnOTERX5XVBAzqf\nL4CLigIbr2aTUtkmmLZGnHm00DA7PhEqIMvyxCs/uyVCs4IL02sRP/QHDZRD\nD8rltvr3KF1DuaLr2ZOHWpV+cHkpzCfgO46hq0uGXToBKvwCf/ka6qpRVxXS\nOeHsz0zI17bovpVmfF2gX+ZEb7Al/WpF64JzPO7BA5nbTW6hF3uYKmwWIich\nj7E7\r\n=6r9U\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFadLS8eyyYxh/97VfCimkYFEaQo6bjTt0/5OFKRBLRaAiEA/cVQB2aHauiBYhvCGUj1VK1BFdCq+Sae5Pr4qdRcCGE="}]},"_npmUser":{"name":"terminus_devops","email":"devops@terminus.com"},"directories":{},"maintainers":[{"name":"terminus_devops","email":"devops@terminus.com"},{"name":"atlwendy","email":"atlwendy@gmail.com"},{"name":"bmalinconico-terminus","email":"brian.malinconico@terminus.com"},{"name":"benjamincharity","email":"ben@benjamincharity.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ui-expansion-panel_1.1.5_1605115300724_0.743622245311272"},"_hasShrinkwrap":false},"2.0.0":{"name":"@terminus/ui-expansion-panel","version":"2.0.0","license":"MIT","author":{"name":"@terminus"},"private":false,"homepage":"https://github.com/GetTerminus/terminus-oss","repository":{"type":"git","url":"git+https://github.com/GetTerminus/terminus-oss.git"},"bugs":{"url":"https://github.com/GetTerminus/terminus-oss/issues"},"publishConfig":{"access":"public","tag":"next","directory":"../../../dist/libs/ui/expansion-panel"},"dependencies":{"tslib":"^2.0.3","@angular-devkit/schematics":"11.0.4","@schematics/angular":"11.0.4"},"peerDependencies":{"@angular/animations":"^11.0.4","@angular/cdk":"^11.0.3","@angular/common":"^11.0.4","@angular/core":"^11.0.4","@angular/forms":"^11.0.4","@angular/platform-browser":"^11.0.4","@terminus/design-tokens":"^3.1.0","@terminus/fe-utilities":"^2.0.0","@terminus/ui-styles":"^2.0.0","date-fns":"^2.16.1","rxjs":"^6.6.3"},"schematics":"./schematics/collection.json","main":"bundles/terminus-ui-expansion-panel.umd.js","module":"fesm2015/terminus-ui-expansion-panel.js","es2015":"fesm2015/terminus-ui-expansion-panel.js","esm2015":"esm2015/terminus-ui-expansion-panel.js","fesm2015":"fesm2015/terminus-ui-expansion-panel.js","typings":"terminus-ui-expansion-panel.d.ts","metadata":"terminus-ui-expansion-panel.metadata.json","sideEffects":false,"description":"

Expansion Panel

","_id":"@terminus/ui-expansion-panel@2.0.0","_nodeVersion":"12.20.0","_npmVersion":"lerna/3.22.1/node@v12.20.0+x64 (linux)","dist":{"integrity":"sha512-ZeSFrIGxJVeUNoxAH3dnS7Ksp8lRQJevEBs5dID6AmHHnqDq9JPviuoyfMARWwEmXlysk8K6vhz+9TmvZGi/fQ==","shasum":"e396da3a0567062eed59e2f388c5c9ff87919492","tarball":"https://registry.npmjs.org/@terminus/ui-expansion-panel/-/ui-expansion-panel-2.0.0.tgz","fileCount":83,"unpackedSize":546972,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf2hfDCRA9TVsSAnZWagAA1pUP/ideSy7nFaCqO4gz9b+M\nLrgZ3G6ppRLvGxdequvHGYf6sQA4jZV8JXsTxaklU7KKx1SNYNDwXZuvz7k1\nFBIsqriFjSjxVA0XJlplSQz4TjbscDjshoi3ND+lCcyaSofwEY2lwDnzP3fe\nauM8p4lXwns8ZkWkplHmfi/m6byi1nSr+lpCiqogQJs2uyTyAFxVgRGBClv/\nhHHMKnQ4MF9YdSXA6JKu4UtX6GpWJMCYJfJ6Ci+cRlG+mw0Zl6MgoG2M88Ce\nS/4oW0WKRMLijK5ZRnm50Ryq98ISc9g5ZLRcLt5IRX4im86+GgaB8a+E+K/y\nf+CUtHZWIpAmfuTvP87VwspJ6Q/3FWBCEbNq/Yem2Kp/9+gj3qb7VQJWB8dS\nBK6qL8BPX3K83JiRx+PSoXLWaZpJmjshLNpFti/60VVS1PjIyFmt7tiFjQ7b\neNGW+0gXLDJM4aorSAsoKf5UjBirOfBN1zBONmhFUBGQyI+NpHLfvJtV8jgE\n46Fq0eLjqN0MuzJO/JlCvV1Rn1tQEqQTOQ4VmywiYb1pK3th0yUEGJpji166\n53Oqso2y5N5MDwH9a6mXuwwJuSBMzUlpTnZmrUva2SH7h1wGqEInHolxREHt\nqe44oZX/CJQqLHktWRKCRXhvGIaBUNpulI5l87clTJqMoexhhsguoEuz1BFR\nXPpT\r\n=t7yc\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEgx1v5HzizX25m/f5pzP4TQlHvQzH99B1fnUsvuyrkWAiEAinDG4gdd/1tuuTrhMOj7NR79i22rZJ3WGFjXXci9z9k="}]},"_npmUser":{"name":"terminus_devops","email":"devops@terminus.com"},"directories":{},"maintainers":[{"name":"benjamincharity","email":"ben@benjamincharity.com"},{"name":"bmalinconico-terminus","email":"brian.malinconico@terminus.com"},{"name":"atlwendy","email":"atlwendy@gmail.com"},{"name":"terminus_devops","email":"devops@terminus.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ui-expansion-panel_2.0.0_1608128451289_0.866396918747391"},"_hasShrinkwrap":false},"2.0.1":{"name":"@terminus/ui-expansion-panel","version":"2.0.1","license":"MIT","author":{"name":"@terminus"},"private":false,"homepage":"https://github.com/GetTerminus/terminus-oss","repository":{"type":"git","url":"git+https://github.com/GetTerminus/terminus-oss.git"},"bugs":{"url":"https://github.com/GetTerminus/terminus-oss/issues"},"publishConfig":{"access":"public","tag":"next","directory":"../../../dist/libs/ui/expansion-panel"},"dependencies":{"tslib":"^2.0.3","@angular-devkit/schematics":"11.0.4","@schematics/angular":"11.0.4"},"peerDependencies":{"@angular/animations":"^11.0.4","@angular/cdk":"^11.0.3","@angular/common":"^11.0.4","@angular/core":"^11.0.4","@angular/forms":"^11.0.4","@angular/platform-browser":"^11.0.4","@terminus/design-tokens":"^3.1.0","@terminus/fe-utilities":"^2.0.0","@terminus/ui-styles":"^2.0.0","date-fns":"^2.16.1","rxjs":"^6.6.3"},"schematics":"./schematics/collection.json","main":"bundles/terminus-ui-expansion-panel.umd.js","module":"fesm2015/terminus-ui-expansion-panel.js","es2015":"fesm2015/terminus-ui-expansion-panel.js","esm2015":"esm2015/terminus-ui-expansion-panel.js","fesm2015":"fesm2015/terminus-ui-expansion-panel.js","typings":"terminus-ui-expansion-panel.d.ts","metadata":"terminus-ui-expansion-panel.metadata.json","sideEffects":false,"readme":"

Expansion Panel

\n\n[![CI/CD Status][github-action-badge]][github-action-link] [![Codecov][codecov-badge]][codecov-project] [![MIT License][license-image]][license-url] \n[![NPM version][npm-version-image]][npm-package] [![Library size][file-size-badge]][raw-distribution-js]\n\nExpansion panel & accordion components.\n\n\n\n## Table of Contents\n\n- [Installation](#installation)\n - [CSS imports](#css-imports)\n - [CSS resources](#css-resources)\n- [Usage](#usage)\n - [Panel](#panel)\n - [Title and description](#title-and-description)\n - [Disable a panel](#disable-a-panel)\n - [Default a panel open](#default-a-panel-open)\n - [Lazy loaded content](#lazy-loaded-content)\n - [Transparent mode](#transparent-mode)\n - [Panel events](#panel-events)\n - [Custom trigger heights](#custom-trigger-heights)\n - [Manual control](#manual-control)\n - [Accordion](#accordion)\n - [Allow multiple panels to be open](#allow-multiple-panels-to-be-open)\n - [Accordion events](#accordion-events)\n - [Accordion as a stepper](#accordion-as-a-stepper)\n - [Hide toggle](#hide-toggle)\n - [Action row](#action-row)\n - [Open or close all panels](#open-or-close-all-panels)\n- [Test Helpers](#test-helpers)\n\n\n\n## Installation\n\nUse the `ng add` command to quickly install all the needed dependencies:\n\n```bash\nng add @terminus/ui-expansion-panel\n```\n\n### CSS imports\n\nIn your top-level stylesheet, add these imports:\n\n```css\n@import '~@terminus/design-tokens/css/library-design-tokens.css';\n@import '~@terminus/ui-styles/terminus-ui.css';\n``` \n\n### CSS resources\n\nLoad the needed font families by adding this link to the `` of your application:\n\n```css\n\n```\n\n## Usage\n\n### Panel\n\nThe most basic usage is a single panel with a trigger:\n\n```html\n\n \n Here is my trigger!\n \n\n

And here is my standard panel content.

\n\n```\n\n> NOTE: Without a trigger, the panel will not be visible.\n\n#### Title and description\n\nTrigger text can be split into `title` and `description` using the `TsExpansionPanelTitleComponent` and\n`TsExpansionPanelDescriptionComponent` respectively.\n\n```html\n\n\n Here is my trigger!\n\n\n\n\n\n \n My title\n \n\n \n My description\n \n\n```\n\n#### Disable a panel\n\nThe `isDisabled` flag will disable a panel and it's trigger:\n\n```html\n\n \n Here is my trigger!\n \n\n

I will never be seen.

\n\n```\n\n#### Default a panel open\n\nThe `isExpanded` flag will change the state of a panel. This can be used to default to a specific state or to dynamically change the state.\n\n```html\n\n \n Here is my trigger!\n \n\n

I'll be visible by default!

\n\n```\n\n#### Lazy loaded content\n\nPanel content can be lazily loaded by using a template with the `tsExpansionPanelContent` directive. The template will not be loaded until\nthe panel is opened for the first time. The content will remain in the DOM until the panel is destroyed.\n\n```html\n\n \n Here is my trigger!\n \n\n \n Here is my deferred template!\n \n\n```\n\n#### Transparent mode\n\nExpansion panel with transparent mode on has no box shadow and padding on the side. It's default to `false`.\n\n```html\n\n \n Here is my trigger!\n \n\n

And here is my standard panel content.

\n\n```\n\n#### Panel events\n\n| Event | Description | Payload |\n|:-----------------|:---------------------------------------------------|:----------|\n| `opened` | Fired when the panel is opened | `void` |\n| `afterExpand` | Fired after the panel expansion animation finishes | `void` |\n| `closed` | Fired when the panel is closed | `void` |\n| `afterCollapse` | Fired after the panel collapse animation finishes | `void` |\n| `expandedChange` | Fired when the panel state changes | `boolean` |\n| `destroyed` | Fired when the panel is destroyed | `void` |\n\n```html\n...\n```\n\n#### Custom trigger heights\n\nCustom heights can be set for a trigger's collapsed and/or expanded state.\n\n```html\n\n \n Panel Trigger (100px -> 200px)\n\n

And here is my standard panel content.

\n\n```\n\n#### Manual control\n\nPanels can be programmatically opened, closed or toggled through a reference to the instance:\n\n```typescript\n@ViewChild(TsExpansionPanelComponent, {static: false})\npublic panel: TsExpansionPanelComponent;\n\n...\n\npanel.open();\npanel.close();\npanel.toggle();\n```\n\n> NOTE: Disabled panels cannot be controlled with these methods. Disabled panels can _only_ be controlled via the `isExpanded` input.\n\n### Accordion\n\nAn accordion is created by wrapping two or more `TsExpansionPanelComponent`s inside a `TsAccordionComponent`.\n\n```html\n\n ...\n ...\n\n```\n\n#### Allow multiple panels to be open\n\nBy default an accordion can only have a single panel open at a time. This functionality can be change with the `multi` input.\n\n```html\n\n ...\n ...\n\n```\n\n#### Accordion events\n\n| Event | Description | Payload |\n|:------------|:--------------------------------------|:--------|\n| `destroyed` | Fired when the accordion is destroyed | `void` |\n\n```html\n...\n```\n\n#### Accordion as a stepper\n\nAn accordion can function as a stepper which can be useful for guided flows. To facilitate this we can use a combination of `hideToggle` and\nthe `ts-expansion-panel-action-row`.\n\n```html\n\n\n \n \n Step 1\n\n And here is my standard panel content.\n\n \n Next\n \n \n\n \n \n Step 2\n\n And here is my standard panel content.\n\n \n Previous\n Next\n \n \n\n \n \n Step 3\n\n And here is my standard panel content.\n\n \n Previous\n End\n \n \n\n```\n\n#### Hide toggle\n\nWhen an accordion is controlled programmatically, the toggle icon can be hidden to avoid confusion for the user. Setting `hideToggle` on the\naccordion will hide the toggle icon for *all panels within*.\n\n> NOTE: This should _only_ be used in cases when the accordion is functioning as a stepper.\n\n```html\n\n ...\n ...\n\n```\n\n#### Action row\n\nThe action row is useful when an accordion is functioning as a stepper. Controls added within the action row will be right aligned as panel\ncontrols.\n\n> NOTE: See [Accordion as a stepper](https://github.com/GetTerminus/terminus-ui/blob/release/projects/library/expansion-panel/src/expansion-panel.component.md#accordion-as-a-stepper) for a complete example.\n\n```html\n\n \n Step 1\n \n\n And here is my standard panel content.\n\n \n \n \n\n```\n\n#### Open or close all panels\n\nAn accordion can programmatically open or close all panels at once.\n\n```typescript\n@ViewChild(TsAccordionComponent, {static: false})\npublic accordion: TsAccordionComponent;\n\n...\n\naccordion.openAll();\naccordion.closeAll();\n```\n\n> NOTE: These methods will *not* change the state of disabled panels.\n\n## Test Helpers\n\nSome helpers are exposed to assist with testing. These are imported from `@terminus/ui-expansion-panel/testing`;\n\n[[source]][test-helpers-src]\n\n| Function |\n|--------------------------------|\n| `getAllPanelDebugElements` |\n| `getAllPanelInstances` |\n| `getPanelDebugElement` |\n| `getPanelInstance` |\n| `getPanelElement` |\n| `getPanelBodyElement` |\n| `getPanelBodyContentElement` |\n| `getAllAccordionDebugElements` |\n| `getAllAccordionInstances` |\n| `getAccordionInstance` |\n| `getAccordionDebugElement` |\n| `getAccordionElement` |\n| `getTriggerDebugElement` |\n| `getTriggerInstance` |\n| `getTriggerElement` |\n| `getTriggerTitleElement` |\n| `getTriggerDescriptionElement` |\n| `getPanelActionRow` |\n| `togglePanel` |\n\n\n[test-helpers-src]: testing/src/test-helpers.ts\n[license-url]: https://github.com/GetTerminus/terminus-oss/blob/release/LICENSE\n[license-image]: http://img.shields.io/badge/license-MIT-blue.svg\n[codecov-project]: https://codecov.io/gh/GetTerminus/terminus-oss\n[codecov-badge]: https://codecov.io/gh/GetTerminus/terminus-oss/branch/release/graph/badge.svg\n[npm-version-image]: http://img.shields.io/npm/v/@terminus/ui-expansion-panel.svg\n[npm-package]: https://www.npmjs.com/package/@terminus/ui-expansion-panel\n[github-action-badge]: https://github.com/GetTerminus/terminus-oss/workflows/Release%20CI/badge.svg\n[github-action-link]: https://github.com/GetTerminus/terminus-oss/actions?query=workflow%3A%22CI+Release%22\n[file-size-badge]: http://img.badgesize.io/https://unpkg.com/@terminus/ui-button/bundles/terminus-ui-expansion-panel.umd.min.js?compression=gzip\n[raw-distribution-js]: https://unpkg.com/@terminus/ui-button/bundles/terminus-ui-expansion-panel.umd.js\n","readmeFilename":"README.md","description":"

Expansion Panel

","_id":"@terminus/ui-expansion-panel@2.0.1","_nodeVersion":"12.20.0","_npmVersion":"lerna/3.22.1/node@v12.20.0+x64 (linux)","dist":{"integrity":"sha512-2RQSZQsdeOn7BmXyYPMVgWorBlKzWWgVF6fymJ4guef9KEp/dVZ4S2kUJYvY2BdTkxEEZWiUZBsBF2onAHY3sA==","shasum":"40e727fdcd1b43f043abc04bf41642982b860db9","tarball":"https://registry.npmjs.org/@terminus/ui-expansion-panel/-/ui-expansion-panel-2.0.1.tgz","fileCount":83,"unpackedSize":547232,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgCuUhCRA9TVsSAnZWagAAuW4QAJI9mty3IEfDHyObK7gt\ncVfXGYIPU34HR1c3MFh8N60mjkNihX7CjAWESPPG+OzSAYz+gc4V4XB9jcb9\nnYwoJUaC1rgwDZzrhbUxKdmtyasS3pRPFIJ4ua8wlandH1Anq5l9Gxa7q+CJ\nzBpE5mvu9IEyeUaloMTCypGmwWxYBuCtCNALq9wKpsytsvmjcMDxpd4XzUZD\nkMWS9zMqaMfyGqJlvnAs4Pf7ZA24nD2SDu7+VaEItxmpoAfOgBpvWK8DijnL\nKt3uEcrTP7mxuXAnBmgnKYVecJJ/EYKQMApDAy0fG+GoSFL5Kgd2ZHvU3L6C\nn0z3Qvp5RTOZ7CSl/EhEkTdgAIKDPGM/PI9IofM/ZpQgefaoQ3yxP3KT3WPp\nsUX1SfoEx6SIBbSwdzZBfm6bFm8cthMBrL8m3CUxXhYmPFTJYr3g2IE706Fn\nl+yjPyIcilME4KGF8opkushDnUfhAy/l6V9erC+QG196QMwd3lyx4a9Vqs0t\nl9rY+0sjy3ccfhmhrGsP0YkYLU00gtgBveK4nwaWgeAIRuCM7iwd9AD+56Os\nJ4tS5ougwwn3s5aM3O3bzYxvMWIBa+R/UMuAvjwhraqeRGX4ZisakXfpzsTt\nPt7Kvvae0tjfu3E3sFUQiSjF01nM3/gDvRnfwZG44NWpMIcpcCh0/79wdAgm\nR3EV\r\n=dQsy\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIB2qFgUDQzrqMzyMjqxFbkYOnBwOTHE/zL6GqRbg0vXoAiEAw5440EfEpnNCSs0LcbY05txmFCCbCCI71EUVQaWpS5Q="}]},"_npmUser":{"name":"terminus_devops","email":"devops@terminus.com"},"directories":{},"maintainers":[{"name":"benjamincharity","email":"ben@benjamincharity.com"},{"name":"bmalinconico-terminus","email":"brian.malinconico@terminus.com"},{"name":"atlwendy","email":"atlwendy@gmail.com"},{"name":"terminus_devops","email":"devops@terminus.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ui-expansion-panel_2.0.1_1611326752761_0.7345381350995848"},"_hasShrinkwrap":false}},"time":{"created":"2020-06-02T05:27:25.573Z","0.0.1":"2020-06-02T05:27:25.973Z","modified":"2022-04-07T05:16:11.991Z","1.0.0":"2020-06-04T18:23:55.199Z","1.0.1":"2020-06-05T02:16:36.194Z","1.0.2":"2020-06-10T18:56:01.351Z","1.0.3":"2020-06-11T14:18:19.029Z","1.0.4":"2020-06-23T15:35:02.271Z","1.0.5":"2020-07-07T15:38:51.868Z","1.0.6":"2020-07-13T19:24:01.153Z","1.0.7":"2020-07-13T22:22:48.887Z","1.0.8":"2020-07-24T13:11:50.707Z","1.0.9":"2020-07-27T19:39:53.801Z","1.0.10":"2020-07-28T15:29:09.609Z","1.0.11":"2020-07-31T14:00:35.918Z","1.0.12":"2020-08-05T19:12:03.077Z","1.0.13":"2020-08-06T17:16:15.275Z","1.0.14":"2020-08-10T16:20:23.650Z","1.0.15":"2020-08-10T17:41:34.541Z","1.0.16":"2020-08-10T19:31:00.745Z","1.0.17":"2020-08-14T15:30:11.165Z","1.0.18":"2020-08-21T11:51:11.077Z","1.0.19":"2020-08-21T14:40:24.620Z","1.0.20":"2020-08-25T15:30:53.453Z","1.0.21":"2020-08-26T15:51:37.042Z","1.0.22":"2020-08-28T14:09:01.318Z","1.0.23":"2020-08-28T17:36:18.148Z","1.0.24":"2020-09-03T23:15:27.164Z","1.0.25":"2020-09-04T15:02:02.389Z","1.1.0":"2020-09-08T18:52:20.065Z","1.1.1":"2020-09-11T17:35:10.791Z","1.1.2":"2020-09-14T17:38:38.615Z","1.1.3":"2020-10-01T14:38:44.928Z","1.1.4":"2020-11-11T12:03:20.626Z","1.1.5":"2020-11-11T17:21:40.885Z","2.0.0":"2020-12-16T14:20:51.437Z","2.0.1":"2021-01-22T14:45:52.881Z"},"maintainers":[{"email":"brian.malinconico@terminus.com","name":"bmalinconico-terminus"},{"email":"atlwendy@gmail.com","name":"atlwendy"},{"email":"devops@terminus.com","name":"terminus_devops"}],"description":"

Expansion Panel

","homepage":"https://github.com/GetTerminus/terminus-oss","repository":{"type":"git","url":"git+https://github.com/GetTerminus/terminus-oss.git"},"author":{"name":"@terminus"},"bugs":{"url":"https://github.com/GetTerminus/terminus-oss/issues"},"license":"MIT","readme":"

Expansion Panel

\n\n[![CI/CD Status][github-action-badge]][github-action-link] [![Codecov][codecov-badge]][codecov-project] [![MIT License][license-image]][license-url] \n[![NPM version][npm-version-image]][npm-package] [![Library size][file-size-badge]][raw-distribution-js]\n\nExpansion panel & accordion components.\n\n\n\n## Table of Contents\n\n- [Installation](#installation)\n - [CSS imports](#css-imports)\n - [CSS resources](#css-resources)\n- [Usage](#usage)\n - [Panel](#panel)\n - [Title and description](#title-and-description)\n - [Disable a panel](#disable-a-panel)\n - [Default a panel open](#default-a-panel-open)\n - [Lazy loaded content](#lazy-loaded-content)\n - [Transparent mode](#transparent-mode)\n - [Panel events](#panel-events)\n - [Custom trigger heights](#custom-trigger-heights)\n - [Manual control](#manual-control)\n - [Accordion](#accordion)\n - [Allow multiple panels to be open](#allow-multiple-panels-to-be-open)\n - [Accordion events](#accordion-events)\n - [Accordion as a stepper](#accordion-as-a-stepper)\n - [Hide toggle](#hide-toggle)\n - [Action row](#action-row)\n - [Open or close all panels](#open-or-close-all-panels)\n- [Test Helpers](#test-helpers)\n\n\n\n## Installation\n\nUse the `ng add` command to quickly install all the needed dependencies:\n\n```bash\nng add @terminus/ui-expansion-panel\n```\n\n### CSS imports\n\nIn your top-level stylesheet, add these imports:\n\n```css\n@import '~@terminus/design-tokens/css/library-design-tokens.css';\n@import '~@terminus/ui-styles/terminus-ui.css';\n``` \n\n### CSS resources\n\nLoad the needed font families by adding this link to the `` of your application:\n\n```css\n\n```\n\n## Usage\n\n### Panel\n\nThe most basic usage is a single panel with a trigger:\n\n```html\n\n \n Here is my trigger!\n \n\n

And here is my standard panel content.

\n\n```\n\n> NOTE: Without a trigger, the panel will not be visible.\n\n#### Title and description\n\nTrigger text can be split into `title` and `description` using the `TsExpansionPanelTitleComponent` and\n`TsExpansionPanelDescriptionComponent` respectively.\n\n```html\n\n\n Here is my trigger!\n\n\n\n\n\n \n My title\n \n\n \n My description\n \n\n```\n\n#### Disable a panel\n\nThe `isDisabled` flag will disable a panel and it's trigger:\n\n```html\n\n \n Here is my trigger!\n \n\n

I will never be seen.

\n\n```\n\n#### Default a panel open\n\nThe `isExpanded` flag will change the state of a panel. This can be used to default to a specific state or to dynamically change the state.\n\n```html\n\n \n Here is my trigger!\n \n\n

I'll be visible by default!

\n\n```\n\n#### Lazy loaded content\n\nPanel content can be lazily loaded by using a template with the `tsExpansionPanelContent` directive. The template will not be loaded until\nthe panel is opened for the first time. The content will remain in the DOM until the panel is destroyed.\n\n```html\n\n \n Here is my trigger!\n \n\n \n Here is my deferred template!\n \n\n```\n\n#### Transparent mode\n\nExpansion panel with transparent mode on has no box shadow and padding on the side. It's default to `false`.\n\n```html\n\n \n Here is my trigger!\n \n\n

And here is my standard panel content.

\n\n```\n\n#### Panel events\n\n| Event | Description | Payload |\n|:-----------------|:---------------------------------------------------|:----------|\n| `opened` | Fired when the panel is opened | `void` |\n| `afterExpand` | Fired after the panel expansion animation finishes | `void` |\n| `closed` | Fired when the panel is closed | `void` |\n| `afterCollapse` | Fired after the panel collapse animation finishes | `void` |\n| `expandedChange` | Fired when the panel state changes | `boolean` |\n| `destroyed` | Fired when the panel is destroyed | `void` |\n\n```html\n...\n```\n\n#### Custom trigger heights\n\nCustom heights can be set for a trigger's collapsed and/or expanded state.\n\n```html\n\n \n Panel Trigger (100px -> 200px)\n\n

And here is my standard panel content.

\n\n```\n\n#### Manual control\n\nPanels can be programmatically opened, closed or toggled through a reference to the instance:\n\n```typescript\n@ViewChild(TsExpansionPanelComponent, {static: false})\npublic panel: TsExpansionPanelComponent;\n\n...\n\npanel.open();\npanel.close();\npanel.toggle();\n```\n\n> NOTE: Disabled panels cannot be controlled with these methods. Disabled panels can _only_ be controlled via the `isExpanded` input.\n\n### Accordion\n\nAn accordion is created by wrapping two or more `TsExpansionPanelComponent`s inside a `TsAccordionComponent`.\n\n```html\n\n ...\n ...\n\n```\n\n#### Allow multiple panels to be open\n\nBy default an accordion can only have a single panel open at a time. This functionality can be change with the `multi` input.\n\n```html\n\n ...\n ...\n\n```\n\n#### Accordion events\n\n| Event | Description | Payload |\n|:------------|:--------------------------------------|:--------|\n| `destroyed` | Fired when the accordion is destroyed | `void` |\n\n```html\n...\n```\n\n#### Accordion as a stepper\n\nAn accordion can function as a stepper which can be useful for guided flows. To facilitate this we can use a combination of `hideToggle` and\nthe `ts-expansion-panel-action-row`.\n\n```html\n\n\n \n \n Step 1\n\n And here is my standard panel content.\n\n \n Next\n \n \n\n \n \n Step 2\n\n And here is my standard panel content.\n\n \n Previous\n Next\n \n \n\n \n \n Step 3\n\n And here is my standard panel content.\n\n \n Previous\n End\n \n \n\n```\n\n#### Hide toggle\n\nWhen an accordion is controlled programmatically, the toggle icon can be hidden to avoid confusion for the user. Setting `hideToggle` on the\naccordion will hide the toggle icon for *all panels within*.\n\n> NOTE: This should _only_ be used in cases when the accordion is functioning as a stepper.\n\n```html\n\n ...\n ...\n\n```\n\n#### Action row\n\nThe action row is useful when an accordion is functioning as a stepper. Controls added within the action row will be right aligned as panel\ncontrols.\n\n> NOTE: See [Accordion as a stepper](https://github.com/GetTerminus/terminus-ui/blob/release/projects/library/expansion-panel/src/expansion-panel.component.md#accordion-as-a-stepper) for a complete example.\n\n```html\n\n \n Step 1\n \n\n And here is my standard panel content.\n\n \n \n \n\n```\n\n#### Open or close all panels\n\nAn accordion can programmatically open or close all panels at once.\n\n```typescript\n@ViewChild(TsAccordionComponent, {static: false})\npublic accordion: TsAccordionComponent;\n\n...\n\naccordion.openAll();\naccordion.closeAll();\n```\n\n> NOTE: These methods will *not* change the state of disabled panels.\n\n## Test Helpers\n\nSome helpers are exposed to assist with testing. These are imported from `@terminus/ui-expansion-panel/testing`;\n\n[[source]][test-helpers-src]\n\n| Function |\n|--------------------------------|\n| `getAllPanelDebugElements` |\n| `getAllPanelInstances` |\n| `getPanelDebugElement` |\n| `getPanelInstance` |\n| `getPanelElement` |\n| `getPanelBodyElement` |\n| `getPanelBodyContentElement` |\n| `getAllAccordionDebugElements` |\n| `getAllAccordionInstances` |\n| `getAccordionInstance` |\n| `getAccordionDebugElement` |\n| `getAccordionElement` |\n| `getTriggerDebugElement` |\n| `getTriggerInstance` |\n| `getTriggerElement` |\n| `getTriggerTitleElement` |\n| `getTriggerDescriptionElement` |\n| `getPanelActionRow` |\n| `togglePanel` |\n\n\n[test-helpers-src]: testing/src/test-helpers.ts\n[license-url]: https://github.com/GetTerminus/terminus-oss/blob/release/LICENSE\n[license-image]: http://img.shields.io/badge/license-MIT-blue.svg\n[codecov-project]: https://codecov.io/gh/GetTerminus/terminus-oss\n[codecov-badge]: https://codecov.io/gh/GetTerminus/terminus-oss/branch/release/graph/badge.svg\n[npm-version-image]: http://img.shields.io/npm/v/@terminus/ui-button.svg\n[npm-package]: https://www.npmjs.com/package/@terminus/ui-button\n[github-action-badge]: https://github.com/GetTerminus/terminus-oss/workflows/Release%20CI/badge.svg\n[github-action-link]: https://github.com/GetTerminus/terminus-oss/actions?query=workflow%3A%22CI+Release%22\n[file-size-badge]: http://img.badgesize.io/https://unpkg.com/@terminus/ui-button/bundles/terminus-ui-button.umd.min.js?compression=gzip\n[raw-distribution-js]: https://unpkg.com/@terminus/ui-button/bundles/terminus-ui-button.umd.js\n","readmeFilename":"README.md"}