{"_id":"@bellese/hqr-component-library","_rev":"11-5b13872b5c5bf9a3a0289da60ec188cd","name":"@bellese/hqr-component-library","dist-tags":{"latest":"1.1.61"},"versions":{"1.1.60":{"name":"@bellese/hqr-component-library","version":"1.1.60","license":"MIT","scripts":{"ng":"ng","start":"ng serve","build":"ng build --prod","test":"ng test","lint":"ng lint","e2e":"ng e2e","packagr":"ng-packagr -p ng-package.json"},"private":false,"devDependencies":{"@angular/cli":"^1.7.4","@angular/common":"^5.2.0","@angular/compiler":"^5.2.10","@angular/compiler-cli":"^5.2.0","@angular/core":"^6.0.0","@angular/language-service":"^5.2.0","@cmsgov/design-system-core":"^1.21.0","@cmsgov/design-system-layout":"^1.21.0","@types/jasmine":"^2.8.7","@types/jasminewd2":"~2.0.2","@types/node":"^6.0.108","codelyzer":"^4.3.0","jasmine-core":"~2.8.0","jasmine-spec-reporter":"~4.2.1","karma":"^2.0.2","karma-chrome-launcher":"~2.2.0","karma-coverage-istanbul-reporter":"^1.2.1","karma-jasmine":"^1.1.2","karma-jasmine-html-reporter":"^0.2.2","ng-packagr":"^2.4.2","protractor":"~5.1.2","ts-node":"~4.1.0","tslint":"~5.9.1","typescript":"~2.5.3"},"dependencies":{"@angular/animations":"^6.0.0","@angular/cli":"^1.7.3","@angular/common":"^5.2.9","@angular/compiler":"^5.2.9","@angular/compiler-cli":"^5.2.9","@angular/core":"^5.2.9","@angular/forms":"^5.2.9","@angular/http":"^5.2.9","@angular/platform-browser":"^5.2.9","@angular/platform-browser-dynamic":"^5.2.9","@angular/router":"^6.0.1","@angular/tsc-wrapped":"^4.4.6","moment":"^2.22.2","ngx-pagination":"^3.1.1","npm":"^6.0.1","rxjs":"^5.5.6","sw-toolbox":"3.6.0","zone.js":"0.8.18"},"gitHead":"1a4c3a120e62d0dadb8739ff6756e1fdcb36c387","description":"## Step 1 - Installation","_id":"@bellese/hqr-component-library@1.1.60","_npmVersion":"6.1.0","_nodeVersion":"8.11.2","_npmUser":{"name":"aroberts01","email":"aroberts@bellese.io"},"dist":{"integrity":"sha512-vulsMJrQHiUy9vnf0YCE1d/NW8h+8Gr4pXfHk9Ghilb/triFegGCTc5+tNWyY0DCf8hme3TODCToketTP2bYJw==","shasum":"976eec21e8048a99e4133cf7e19014bc6b8bd2eb","tarball":"https://registry.npmjs.org/@bellese/hqr-component-library/-/hqr-component-library-1.1.60.tgz","fileCount":252,"unpackedSize":1430698,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbKUgcCRA9TVsSAnZWagAA2OwP/2HMYnxkpzOXWINAiqSx\nLSb5AnIhATh78eJ3Ta/91+qzq7W5i4muNB8rhjzpW86UksaOEjFwdd7GrlX7\n3HP40+vPC5YfN2jOFiU2Y99BeIWHxPTlcp1xhe5IhIbKR4xjPyhFZy5kdBXE\nqtd1OAt52wBCSAlo1M0l9qOTF77K7JxaLoja58IWkFNVY+10NT/6Ms0sMIKc\nWYPhsbYJBo63dwH7auI0iqM5JRr6qm2wThvmiWxvRGGa5AsZia0jIea2cGCV\nzeNnaJNwgmRuv+yYAKpxWOiw40HvvSrxdvtBV/E0Jr6FQ0InyqaGyDb2dTjn\n9qoWbbfDwFe+xx7Vubb+Vs4sMbQipfPQWvnkCZDDXe3ZsOc901Vc0FEYbVjK\n0v4XVriZvAVWqs+GvEEUisoLXzsArzVJkiMnslXEKX+QfPT660iEV+g5SmdJ\n0HwX+BHyCf8DNvZoEoYJDGwyCJgnFhEc3pDSyDQbEOZCAyzJKveL9FX5yXVT\nb4fy8RgLvENFs6g/qgegW5rShg+AjhONTh3SLKK4jGbiaeTC0Jp1TvjddyGG\ng1OITZIlz6FwVR5a3Z3LLpFOpvySp9o23LCHX76a/saFObA0TsiP9KUg51kk\n9YamqmuUnjCX4oPoccFdapepFKHxcIQ79F9SG28kGdpCWqcDkKFwCjmWkmna\n2voT\r\n=/rDG\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEGW9WE4TKgZrtXc+IUITPza2F+JYZ6FbI+2CSbP7MPcAiEA8yA/yKL+b2BLfjZhG++wV2RGBr9G/ExFk+7jH6imC4s="}]},"maintainers":[{"name":"aroberts01","email":"aroberts@bellese.io"},{"name":"joffutt4","email":"joffutt4@gmail.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/hqr-component-library_1.1.60_1529432090658_0.9766953121380351"},"_hasShrinkwrap":false,"deprecated":"Library name change"},"1.1.61":{"name":"@bellese/hqr-component-library","version":"1.1.61","license":"MIT","private":false,"devDependencies":{"@angular/cli":"^1.7.4","@angular/common":"^5.2.0","@angular/compiler":"^5.2.10","@angular/compiler-cli":"^5.2.0","@angular/core":"^6.0.0","@angular/language-service":"^5.2.0","@cmsgov/design-system-core":"^1.21.0","@cmsgov/design-system-layout":"^1.21.0","@types/jasmine":"^2.8.7","@types/jasminewd2":"~2.0.2","@types/node":"^6.0.108","codelyzer":"^4.3.0","jasmine-core":"~2.8.0","jasmine-spec-reporter":"~4.2.1","karma":"^2.0.2","karma-chrome-launcher":"~2.2.0","karma-coverage-istanbul-reporter":"^1.2.1","karma-jasmine":"^1.1.2","karma-jasmine-html-reporter":"^0.2.2","ng-packagr":"^2.4.2","protractor":"~5.1.2","ts-node":"~4.1.0","tslint":"~5.9.1","typescript":"~2.5.3"},"dependencies":{"@angular/animations":"^6.0.0","@angular/cli":"^1.7.3","@angular/common":"^5.2.9","@angular/compiler":"^5.2.9","@angular/compiler-cli":"^5.2.9","@angular/core":"^5.2.9","@angular/forms":"^5.2.9","@angular/http":"^5.2.9","@angular/platform-browser":"^5.2.9","@angular/platform-browser-dynamic":"^5.2.9","@angular/router":"^6.0.1","@angular/tsc-wrapped":"^4.4.6","moment":"^2.22.2","ngx-pagination":"^3.1.1","npm":"^6.0.1","rxjs":"^5.5.6","sw-toolbox":"3.6.0","zone.js":"0.8.18","tslib":"^1.7.1"},"main":"bundles/bellese-hqr-component-library.umd.js","module":"esm5/bellese-hqr-component-library.js","es2015":"esm2015/bellese-hqr-component-library.js","typings":"bellese-hqr-component-library.d.ts","metadata":"bellese-hqr-component-library.metadata.json","description":"## Step 1 - Installation","_id":"@bellese/hqr-component-library@1.1.61","_npmVersion":"6.1.0","_nodeVersion":"8.11.2","_npmUser":{"name":"aroberts01","email":"aroberts@bellese.io"},"dist":{"integrity":"sha512-VPBogGQPr2IwNZnMPj5GvIlRC0QIDwm9YeL2QhMluVF3k8P5byjRlfhkcKTqv+NglE3mdHpzLYBjSzcTBeduAA==","shasum":"9c91164eab1a546689a83a6763702fa0fc79fa4d","tarball":"https://registry.npmjs.org/@bellese/hqr-component-library/-/hqr-component-library-1.1.61.tgz","fileCount":51,"unpackedSize":616188,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbKVs3CRA9TVsSAnZWagAAWgQQAIYCkTtNZyhv1PKk8N6L\nXg/bX9gTj6IVwErGHc80lbkIzPCs+c8mqC9B6MTdSI+3NAcjqOv6jc1/Xxs8\nXDHp57ULj+4f6rL5wy+38PWoZYngBZ1x5RxAw6bC/pjNgAqvw8r5LC5y6oXZ\nyWypscVWUXJIg2xIAsYz9z2tua6K3oNM7Cjb/qA15Z5zg5/cN84HOZ+e83KY\nfXR3ydtiJ9r6rlRbx2i1LpaHNayygcfFwrh3Xh+a8l8Gc2KCHIev/LSC1KXU\n0Jh+jgh0f5edp5eYM6Sp/CR7qCM2EdgKlDa+WglO+lLPzgJSFnrLPc9jLFp+\nkh2UVxxiVHXgiDRxXXoLGR4i3ci5zEf2xYa5jQq8TpzXdXNwLNTcglcDLR6D\nOGUz+OIXa0OKyuwumQmC5LPngTGtHesKo3iFKTudRBv7xHASSR5akqZKVUZe\nnxkcEH6cuu/TOey6xVidgS7AvvPGttDnmjpbHmAlPigs9GKnZP1ypDXeEuQ1\nrb7DlFYZGojrtt61uycDXViJ0cDKZyUnaOs3sBE12xd1p7CzxaMrvROOJTZF\nbh+ImxlFPEBoisyXPgPmauyjKX31ua9FUJFCZRgzhT7HKOzRdBvtYoCHCo7o\njC+oupPkjBvmd+JIq8HgoAusCOYV6/U9igkdNBljUQ+YSPRzSrsiXM6IeJia\nAp47\r\n=lpVd\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBD+QAcjewAux4Jib+6H7Jxxe8eedSdg8Gypa6hhcKhBAiBDEQgY7fzVEaq2/4MgVPH84E2bZubrWG95jnIVmyI3+A=="}]},"maintainers":[{"email":"aroberts@bellese.io","name":"aroberts01"},{"email":"er47217@umbc.edu","name":"jackclopez"},{"email":"joffutt4@gmail.com","name":"joffutt4"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/hqr-component-library_1.1.61_1529436983150_0.8537074795575517"},"_hasShrinkwrap":false,"deprecated":"Library name change"}},"time":{"created":"2018-06-19T18:14:50.433Z","1.1.60":"2018-06-19T18:14:50.775Z","modified":"2022-04-04T18:20:03.239Z","1.1.61":"2018-06-19T19:36:23.286Z"},"maintainers":[{"email":"scott@scotthamrick.com","name":"cshamrick"},{"email":"joffutt4@gmail.com","name":"joffutt4"},{"email":"joshglazer@gmail.com","name":"joshglazer"},{"email":"lbarbula@bellese.io","name":"lbarbula-bellese"},{"email":"iadams@bellese.io","name":"ijadams504"},{"email":"jyu@bellese.io","name":"johnyubellese"},{"email":"mark@bymark.co","name":"funkybunch"}],"description":"## Step 1 - Installation","license":"MIT","readme":"# HQRComponentLibrary\n\n## Step 1 - Installation\n\nRun `npm i hqr-component-library` to install\n\n## Step 2 - Installing [CMS Design System](https://design.cms.gov/)\n\nRun `npm i @cmsgov/design-system-core` and\n`npm i @cmsgov/design-system-layout`\n\nOnce you have downloaded both packages, copy the design system's `fonts`, `images`, and `dist` directories (`dist` is located inside of the `design-system-core` `design-system-layout` directories) inside of `@cms/gov` in your application's `node_modules`.\n\nPaste these directories into your Angular application's `assets` folder.\n\nFile structure:\n\n```\n├── assets/\n ├── css/\n ├── images/\n └── fonts/\n └── dist/\n ├── layout/\n └── dist/\n```\n\nReference the styles in `.angular-cli.json`\n\n```\n \"styles\": [\n \"styles.css\",\n \"assets/css/dist/index.css\",\n \"assets/layout/dist/index.css\"\n ],\n```\n\n## Importing Components\n\n```\n//app.module.ts\nimport { AccordionModule } from 'hqr-component-library'\nimport { StarModule } from 'hqr-component-library'\nimport { DropdownModule } from 'hqr-component-library'\nimport { SpinnerModule } from \"./modules/spinner/spinner.module\"\nimport { TableModule } from \"./modules/table/table.module\"\nimport { ModalModule } from \"./modules/modal/modal.module\"\nimport { ButtonModule } from \"./modules/button/button.module\"\nimport { DirectiveModule } from \"./directives/directive.module\" <-- DirectiveModule required for the Modal Component\nimport { PagingModule } from './modules/paging/paging.module'\n```\n\n## Accordion Component Example\n\n```\n//app.component.html\n\n \n \n
{{item.title}}
// <-- header goes here\n \n \n
your content
// <-- content goes here\n \n \n\n```\n\n## Star Rating Component Example\n\n`starAmount` is the amount of stars you want displayed, this is defaulted to `5` so unless you need more than `5` you will not need to pass anything for this input. `rating` is the amount of stars that will be filled. For example, a starAmount of 5 with a rating of 2 is 2 out of 5 stars. `width` and `height` are defaulted to `30px`, but you can pass a custom width and height be sure to detail the value as px.\n\n```\n//app.component.html\n\n\n```\n\n## Dropdown Component Example\n\n`options` expects an array of options for the dropdown menu. `labelName` can be provided, but is not required.\n\n```\n//app.component.html\n\n\n```\n\n## Spinner Component Example\n\nSpinner component sizes are `small` and `big`. Providing no size the spinner will appear as its default size. Colors include `success`, `primary`, and `muted`.\n\n```\n\n\n```\n\n## Data Table Component Example\n\nThe table is built with many features. Each table is built to call the needed components based on the data received. Every table requires 3 items to start:\n\n* `headers` : the column headers used in the table\n* `dataRows` : the table data used in each column\n* `tableSummary` : the 508 summary to explain the purpose and describe the table. _BE DETAILED_\n\n### Optional :\n\n* `searchable` : this input is `true` or `false` and will present a global table search\n* `tableTitle`: this input will allow a caption to show up within the table itself giving the table a name\n* `pagination`: this input will allow the option for pagination to work within the table, accepts `true` or `false`\n* `starRating` : this input is set to `false`. Use this input to put a star rating on the table. All you need to pass is `starRating` with a number, the table will build the rest.\n\n```\n\n\n```\n\n### Required Data Structure for Table :\n\n#### Table Headers :\n\nThe data provided to `headers` in the table component has to include `header` and `prop`. These two keys are used to label the table header and to put the data in the right place by the prop. `prop` has to match the same `prop` used for the data elements. _If it doesn’t match the data will not show up._\n\nInclude \"sort\" in the `el` property in order to enable sorting for that column. When enabled the header will render as a sortable header with the proper `aria-label` included and a sort indicator svg indicating ascending or descending data. If \"sort\" is not provided, you will just get a normal header.\n\n```\n//app.component.ts\nheaders = [\n {\n header: {\n value: \"Col 1\",\n prop: \"val1\", <-- must match the property value in dataRows\n el: \"sort\"\n }\n },\n {\n header: {\n value: \"Col 2\",\n prop: \"val2\",\n el: \"sort\"\n }\n },\n {\n header: {\n value: \"Col 3\",\n prop: \"val3\",\n el: \"sort\"\n }\n }\n];\n```\n\n#### Table Data :\n\nTable data is where the JSON structure really comes into play. The data structure has to make sure that the key value pair is really the data prop followed by an object with three parameters:\n\n* Value - `value` is the actual value populated in the data cell\n* El - what helps the user choose between elements to include in the cell (ex: `link`, `date`, `checkbox`, `button`, and `default`)\n* Attr - `attr` is the specific content needed to render the element. (ex: `info` and `footnote`)\n\n```\n//app.component.ts\n\ndataRows = [\n {\n val1: {\n value: \"100%\",\n el: \"default\",\n attr: \"\"\n },\n val2: {\n value: \"88%\",\n el: \"default\",\n attr: \"\"\n },\n val3: {\n value: \"1%\",\n el: \"default\",\n attr: \"\"\n }\n },\n {\n val1: {\n value: \"56%\",\n el: \"default\",\n attr: \"\"\n },\n val2: {\n value: \"34%\",\n el: \"default\",\n attr: \"\"\n },\n val3: {\n value: \"4%\",\n el: \"default\",\n attr: \"\"\n }\n },\n {\n val1: {\n value: \"44%\",\n el: \"default\",\n attr: \"\"\n },\n val2: {\n value: \"89%\",\n el: \"default\",\n attr: \"\"\n },\n val3: {\n value: \"12%\",\n el: \"default\",\n attr: \"\"\n }\n }\n]\n```\n### Row Header\n\nIn order to have headers that are displayed vertically within the table, set `row_Header` as the property that defines each row. \n\n```\nrow_Header: {\n value: \"12%\",\n el: \"default\"\n}\n```\n\n### Using a Modal within the Data Table\n\nIn order to enable a modal(s) within the data table component, include a `modal` property within your `dataRows` data where needed. `el` property must have a value of `button`. `attr` property must have a value of `info` or `footnote`. \n\n`modal` must be an array with two objects including properties `heading` and `paragraph`.\n\n\n```\nval1: {\n value: \"12%\",\n el: \"button\",\n attr: \"info\", <-- could also be \"footnote\"\n modal: [\n { heading: \"Heading\" },\n { paragraph: \"Content of modal goes here\"}\n ]\n}\n```\n\n## Pagination Component\n\nThe pagination component utilizes the [ngx-pagination](http://michaelbromley.github.io/ngx-pagination/#/) library. In order to paginate a list, a `paginate` pipe must be added to your list items. You can also configure `itemsPerPage` to display the amount of list items you'd like per page. \n\n```\n