{"_id":"@brightlayer-ui/ng-progress-icons","_rev":"6-8b21318905eb776c03069481a3f906ed","name":"@brightlayer-ui/ng-progress-icons","dist-tags":{"beta":"2.0.0-beta.1","latest":"1.2.1","alpha":"3.0.0-alpha.0"},"versions":{"1.2.1-beta.0":{"name":"@brightlayer-ui/ng-progress-icons","version":"1.2.1-beta.0","description":"Angular progress icons for Brightlayer UI applications","main":"bundles/brightlayer-ui-ng-progress-icons.umd.js","dependencies":{"color":"^3.1.2","tslib":"^1.9.0"},"devDependencies":{"@angular-devkit/build-angular":"0.803.29","@angular-devkit/build-ng-packagr":"~0.801.2","@angular/animations":"^8.1.2","@angular/cli":"~8.1.2","@angular/common":"^8.1.2","@angular/compiler":"^8.1.2","@angular/compiler-cli":"^8.1.2","@angular/core":"^8.1.2","@angular/forms":"^8.1.2","@angular/language-service":"^8.1.2","@angular/platform-browser":"^8.1.2","@angular/platform-browser-dynamic":"^8.1.2","@brightlayer-ui/eslint-config":"^2.0.2","@brightlayer-ui/prettier-config":"^1.0.2","@types/jasmine":"~3.3.14","@types/jasminewd2":"~2.0.3","@types/node":"~12.6.8","@typescript-eslint/eslint-plugin":"^3.9.1","@typescript-eslint/parser":"^3.9.1","codelyzer":"^5.0.1","eslint":"^7.7.0","eslint-config-prettier":"^6.11.0","jasmine-core":"~3.4.0","jasmine-spec-reporter":"~4.2.1","karma":"^4.2.0","karma-chrome-launcher":"~3.0.0","karma-coverage-istanbul-reporter":"~2.0.0","karma-jasmine":"~2.0.1","karma-jasmine-html-reporter":"^1.4.2","ng-packagr":"^5.1.0","prettier":"^2.0.5","protractor":"~5.4.0","ts-node":"~8.3.0","tsickle":"^0.35.0","tslib":"^1.9.0","tslint":"~5.18.0","typescript":"~3.4.0","yarn-audit-fix":"^3.2.7","zone.js":"~0.10.2"},"peerDependencies":{"@angular/common":">=6.0.0","@angular/core":">=6.0.0"},"repository":{"type":"git","url":"git+https://github.com/brightlayer-ui/icons.git"},"keywords":["progress","icons","brightlayer-ui"],"author":{"name":"Brightlayer UI","email":"brightlayer-ui@eaton.com"},"license":"BSD-3-Clause","bugs":{"url":"https://github.com/brightlayer-ui/icons/issues"},"homepage":"https://github.com/brightlayer-ui/icons#readme","module":"fesm5/brightlayer-ui-ng-progress-icons.js","es2015":"fesm2015/brightlayer-ui-ng-progress-icons.js","esm5":"esm5/brightlayer-ui-ng-progress-icons.js","esm2015":"esm2015/brightlayer-ui-ng-progress-icons.js","fesm5":"fesm5/brightlayer-ui-ng-progress-icons.js","fesm2015":"fesm2015/brightlayer-ui-ng-progress-icons.js","typings":"brightlayer-ui-ng-progress-icons.d.ts","metadata":"brightlayer-ui-ng-progress-icons.metadata.json","sideEffects":false,"prettier":"@brightlayer-ui/prettier-config","_id":"@brightlayer-ui/ng-progress-icons@1.2.1-beta.0","_nodeVersion":"14.17.6","_npmVersion":"6.14.15","dist":{"integrity":"sha512-rL9qd7ehmO6HLRHHSmMW16IL8TCuRbE9maxUfDfYMbyEJzVFZYXel1lNJXLKgkfyO3IiIB1Ovhichd/l9oAgbg==","shasum":"b6a8a049a18d2ffe4d2563c43e6d8abdaf12469e","tarball":"https://registry.npmjs.org/@brightlayer-ui/ng-progress-icons/-/ng-progress-icons-1.2.1-beta.0.tgz","fileCount":38,"unpackedSize":413936,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCVCnSv8gZV1FuM4yL0dUHzsP/d/9mFG1d61oPzU+7IIQIhAN5wJi6jIdd6a9pVM7GbxsC2nFJaZuy9qeYHy7Qz2xHz"}]},"_npmUser":{"name":"brightlayerui","email":"brightlayer-ui@eaton.com"},"directories":{},"maintainers":[{"name":"brightlayerui","email":"brightlayer-ui@eaton.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ng-progress-icons_1.2.1-beta.0_1634840865079_0.24154764702700682"},"_hasShrinkwrap":false},"1.2.1":{"name":"@brightlayer-ui/ng-progress-icons","version":"1.2.1","description":"Angular progress icons for Brightlayer UI applications","main":"bundles/brightlayer-ui-ng-progress-icons.umd.js","dependencies":{"color":"^3.1.2","tslib":"^1.9.0"},"devDependencies":{"@angular-devkit/build-angular":"0.803.29","@angular-devkit/build-ng-packagr":"~0.801.2","@angular/animations":"^8.1.2","@angular/cli":"~8.1.2","@angular/common":"^8.1.2","@angular/compiler":"^8.1.2","@angular/compiler-cli":"^8.1.2","@angular/core":"^8.1.2","@angular/forms":"^8.1.2","@angular/language-service":"^8.1.2","@angular/platform-browser":"^8.1.2","@angular/platform-browser-dynamic":"^8.1.2","@brightlayer-ui/eslint-config":"^2.0.2","@brightlayer-ui/prettier-config":"^1.0.2","@types/jasmine":"~3.3.14","@types/jasminewd2":"~2.0.3","@types/node":"~12.6.8","@typescript-eslint/eslint-plugin":"^3.9.1","@typescript-eslint/parser":"^3.9.1","codelyzer":"^5.0.1","eslint":"^7.7.0","eslint-config-prettier":"^6.11.0","jasmine-core":"~3.4.0","jasmine-spec-reporter":"~4.2.1","karma":"^4.2.0","karma-chrome-launcher":"~3.0.0","karma-coverage-istanbul-reporter":"~2.0.0","karma-jasmine":"~2.0.1","karma-jasmine-html-reporter":"^1.4.2","ng-packagr":"^5.1.0","prettier":"^2.0.5","protractor":"~5.4.0","ts-node":"~8.3.0","tsickle":"^0.35.0","tslib":"^1.9.0","tslint":"~5.18.0","typescript":"~3.4.0","yarn-audit-fix":"^3.2.7","zone.js":"~0.10.2"},"peerDependencies":{"@angular/common":">=6.0.0","@angular/core":">=6.0.0"},"repository":{"type":"git","url":"git+https://github.com/brightlayer-ui/icons.git"},"keywords":["progress","icons","brightlayer-ui"],"author":{"name":"Brightlayer UI","email":"brightlayer-ui@eaton.com"},"license":"BSD-3-Clause","bugs":{"url":"https://github.com/brightlayer-ui/icons/issues"},"homepage":"https://github.com/brightlayer-ui/icons#readme","module":"fesm5/brightlayer-ui-ng-progress-icons.js","es2015":"fesm2015/brightlayer-ui-ng-progress-icons.js","esm5":"esm5/brightlayer-ui-ng-progress-icons.js","esm2015":"esm2015/brightlayer-ui-ng-progress-icons.js","fesm5":"fesm5/brightlayer-ui-ng-progress-icons.js","fesm2015":"fesm2015/brightlayer-ui-ng-progress-icons.js","typings":"brightlayer-ui-ng-progress-icons.d.ts","metadata":"brightlayer-ui-ng-progress-icons.metadata.json","sideEffects":false,"prettier":"@brightlayer-ui/prettier-config","_id":"@brightlayer-ui/ng-progress-icons@1.2.1","_nodeVersion":"14.17.6","_npmVersion":"6.14.15","dist":{"integrity":"sha512-2YWkQaNfSjQmwr5BXF+xpW/ARzokbTVPDkTcV3+ynh7TkKeXQICk1NxkF8ykhWpvS66lLOOYzYyS99/7EHx1eQ==","shasum":"1a10cac9f19b47a2019fc5c81bfb267474bed7dc","tarball":"https://registry.npmjs.org/@brightlayer-ui/ng-progress-icons/-/ng-progress-icons-1.2.1.tgz","fileCount":38,"unpackedSize":413929,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhzaAzCRA9TVsSAnZWagAAu3oP/j7QExMvu6/MRR/8zmzc\n+b7/wO5HmbuhWaJezco5pZ+pXKNyralhXkxXQ1zJ/IuocubOsVAjfzg9NyUm\n8XhQ22J2C1IDqAOY7YOVlbkoaIIPVqqTQ1jjsO5XD9QSrqrBvCu19Q6EILeG\n+Vop7w780e72veEryiPgiqpgr62RtbFyQI96ombhjbxRf5BYNWiI7BpkjjwQ\nBBOprrp4l7HZuM8Rgs9crdMzdTCKyXRV8Tm0i+QPrgT/o2rN0gQNHVDuDbOQ\nm75XtWZSkCRNHVH/l6N5NzHu+6raQStvBD+jjgbrtCUDQc2VDnfqgwJxGSy0\n/4TuybAadf2coK/9/obvlzDNEa38/pTgUr+auJfpsYeGDPRFcCxNmt6jhUk6\n59VGs3+269rfRNatJ2kA+OPmQkkXAhzPGg4bXgMGVl3lvX8GxsKGNJCqp48/\n3t/ib8ixWNWDZfd0mDAH86qlNx87VEKxy/ge0Jc2NYPjggRdGj+RL3QIjGfA\nt3+9PAJqcWyyScWNpLgL7THKWTg6Gm46MxFrlPZc5H/qoFsTvh5k1dhlvE0R\nCAAsplLPpCO3wEQQtvb+9e1du1Ys87vTPlcm4W14ZlrJCFEVk2hXuRKglFq/\nvjoNw0Q0heUk9qGslTPkp2bSOdtITYPKn+DKUuUKKuBkZHPl9TkRbIFFEZ6S\nKKiw\r\n=ECEG\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFOIxQlBM2GOhL9s7qNNEQxotjAxuF9RTi45Fr7j0gXZAiEAizSn9PoZOknnLxh2ODM+85sA7bg3oJEFPStsbd7N5zE="}]},"_npmUser":{"name":"brightlayerui","email":"brightlayer-ui@eaton.com"},"directories":{},"maintainers":[{"name":"brightlayerui","email":"brightlayer-ui@eaton.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ng-progress-icons_1.2.1_1635326401472_0.10245293837435199"},"_hasShrinkwrap":false},"2.0.0-beta.0":{"name":"@brightlayer-ui/ng-progress-icons","version":"2.0.0-beta.0","description":"Angular progress icons for Brightlayer UI applications","main":"bundles/brightlayer-ui-ng-progress-icons.umd.js","dependencies":{"color":"^3.1.2","tslib":"^2.3.0"},"peerDependencies":{"@angular/common":">=14.0.0","@angular/core":">=14.0.0"},"repository":{"type":"git","url":"git+https://github.com/etn-ccis/blui-progress-icons.git"},"keywords":["progress","icons","brightlayer-ui"],"author":{"name":"Brightlayer UI","email":"brightlayer-ui@eaton.com"},"license":"BSD-3-Clause","bugs":{"url":"https://github.com/etn-ccis/blui-progress-icons/issues"},"homepage":"https://github.com/etn-ccis/blui-progress-icons#readme","module":"fesm2015/brightlayer-ui-ng-progress-icons.mjs","es2015":"fesm2015/brightlayer-ui-ng-progress-icons.js","esm5":"esm5/brightlayer-ui-ng-progress-icons.js","esm2015":"esm2015/brightlayer-ui-ng-progress-icons.js","fesm5":"fesm5/brightlayer-ui-ng-progress-icons.js","fesm2015":"fesm2015/brightlayer-ui-ng-progress-icons.mjs","typings":"index.d.ts","metadata":"brightlayer-ui-ng-progress-icons.metadata.json","sideEffects":false,"es2020":"fesm2020/brightlayer-ui-ng-progress-icons.mjs","esm2020":"esm2020/brightlayer-ui-ng-progress-icons.mjs","fesm2020":"fesm2020/brightlayer-ui-ng-progress-icons.mjs","exports":{"./package.json":{"default":"./package.json"},".":{"types":"./index.d.ts","esm2020":"./esm2020/brightlayer-ui-ng-progress-icons.mjs","es2020":"./fesm2020/brightlayer-ui-ng-progress-icons.mjs","es2015":"./fesm2015/brightlayer-ui-ng-progress-icons.mjs","node":"./fesm2015/brightlayer-ui-ng-progress-icons.mjs","default":"./fesm2020/brightlayer-ui-ng-progress-icons.mjs"}},"readme":"# Brightlayer UI Progress Icons\n\n[![](https://img.shields.io/npm/v/@brightlayer-ui/ng-progress-icons.svg?label=@brightlayer-ui/ng-progress-icons&style=flat)](https://www.npmjs.com/package/@brightlayer-ui/ng-progress-icons)\n[![](https://img.shields.io/npm/v/@brightlayer-ui/react-progress-icons.svg?label=@brightlayer-ui/react-progress-icons&style=flat)](https://www.npmjs.com/package/@brightlayer-ui/react-progress-icons)\n[![](https://img.shields.io/npm/v/@brightlayer-ui/react-native-progress-icons.svg?label=@brightlayer-ui/react-native-progress-icons&style=flat)](https://www.npmjs.com/package/@brightlayer-ui/react-native-progress-icons)\n\n<img width=\"100%\" style=\"max-width: 600px\" alt=\"Progress icons\" src=\"https://raw.githubusercontent.com/etn-ccis/blui-progress-icons/master/assets/progress-icons.png\" />\n\nThis is a library of icons with dynamic fill capabilities that can be used to show progress (similar to a traditional progress spinner or bar). These can be used to show health, battery life, etc.\n\nCurrently, we have icons available for:\n\n-   battery\n-   heart\n-   pie\n-   ups\n\n## Installation\n\nTo install the Brightlayer UI progress icons from NPM as a dependency for your project, you can run one of the following commands in your project root:\n\n```\nyarn add @brightlayer-ui/ng-progress-icons // for Angular components\n```\n\n## Using the progress icons in your application\n\nThe progress icon components can be imported and used like you would use any other component. You can manually set the desired color for the icon, otherwise it will inherit the text color of its parent container;\n\n```ts\n// app.module.ts\nimport { NgProgressIconsModule } from '@brightlayer-ui/ng-progress-icons';\n\n...\nimports: [\n    NgProgressIconsModule\n],\n```\n\n```html\n<!-- app.component.html -->\n<battery-progress percent=\"80\" size=\"36\" color=\"green\" [charging]=\"true\" [outlined]=\"true\"></battery-progress>\n<heart-progress percent=\"99\" size=\"36\" color=\"pink\" [outlined]=\"true\"></heart-progress>\n<pie-progress percent=\"30\" size=\"36\" color=\"#0000ff\" ring=\"4\" [outlined]=\"true\"></pie-progress>\n<ups-progress percent=\"10\" size=\"36\" color=\"#0000ff\" [outlined]=\"true\"></ups-progress>\n```\n\n## API\n\n### Shared Attributes\n\nThese props are available on all of the progress icons in this package.\n\n<div style=\"overflow: auto;\">\n\n| @Input           | Description                            | Type                               | Required | Default        |\n| ---------------- | -------------------------------------- | ---------------------------------- | -------- | -------------- |\n| backgroundColor  | Background color for the unfilled area | `string`                           | no       |                |\n| color            | The color used for the icon fill       | `string`                           | no       | 'currentColor' |\n| labelColor       | Label text color                       | `string`                           | no       |                |\n| labelPosition    | Where to display the text label        | `top, bottom, center, right, left` | no       | `center`       |\n| labelSize        | Size of the label in px                | `number`                           | no       | `size/4`       |\n| outlined         | Whether to use the outlined style      | `boolean`                          | no       | false          |\n| percent          | The amount to fill the icon (0-100)    | `number`                           | no       | 100            |\n| showPercentLabel | Option to show percentage overlay      | `boolean`                          | no       | false          |\n| size             | The size of the icon (in px)           | `number`                           | no       | 24             |\n\n</div>\n\nAny other props supplied will be provided to the root element (`svg`).\n\n### Battery Attributes\n\nThe battery supports all of the shared attributes above and the following additional attribute:\n\n| @Input   | Description                            | Type      | Required | Default |\n| -------- | -------------------------------------- | --------- | -------- | ------- |\n| charging | Whether to show the charging indicator | `boolean` | no       | false   |\n\n### Pie Attributes\n\nThe pie supports all of the shared attributes above and the following additional attribute:\n\n| @Input | Description                                                        | Type     | Required | Default |\n| ------ | ------------------------------------------------------------------ | -------- | -------- | ------- |\n| ring   | The thickness of the outer ring (1 = thin ring, 10 = full circle ) | `number` | no       | 10      |\n\n## Building & Packaging\n\nThese progress icons are currently created manually by modifying the svg files from the design folder with various clip paths and fill algorithms. They are then packaged up for distribution via npm.\n\nThe Angular icons are built using the library packages built into the Angular CLI ([read more](https://github.com/angular/angular-cli/wiki/stories-create-library)).\n\nTo create a new component:\n\n```sh\ncd icons/progress/angular\nng generate component component-name --project=ng-progress-icons\n```\n\nAnd then to create the /dist version:\n\n```sh\nng build ng-progress-icons\nor\nyarn build\n```\n\nOnce you have built the library, you can publish to npm via:\n\n```sh\ncd dist/ng-progress-icons\nnpm version patch\nnpm publish\n```\n","readmeFilename":"README.md","_id":"@brightlayer-ui/ng-progress-icons@2.0.0-beta.0","_nodeVersion":"14.19.0","_npmVersion":"6.14.16","dist":{"integrity":"sha512-KjF5L4V/LCi91fXE5BpaQORuXMXzq4zCuAXOYD1ywwfMb9tLRaTPcqjMaNHULZlxbt4FGJOJT6D9rcPSSeKGVQ==","shasum":"843dd0c34c7ccd905b59677f63aabfe9ff4cfe64","tarball":"https://registry.npmjs.org/@brightlayer-ui/ng-progress-icons/-/ng-progress-icons-2.0.0-beta.0.tgz","fileCount":24,"unpackedSize":257661,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDnr04NlHCRhf+IJcJi/zW58DLGlesyaZwOG5iR2zOgsAiEAxyhxGVbAGXe2UY/89Bnf8gU/eKJy6zPcgJFc85SSfbA="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjx/L0ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr/KQ//c5gNC6K3rlNEL+BRBazXwqnKBS1M22gNFEVnqX4fP3B2R0m/\r\n2EQHkbcAdKdrQ3f6XqLiwAnOS0W0qR99TIZUNq7eZ1jUVoGYvfTx3715R1t1\r\n3J2bOGU3Jjf6OgmpFy1D0Y488OdW084EdiC5BMe2lmzO5pirz0HXF5PIWq2z\r\nU4yBSALRa9gUHAlCciNe9YKXfr5X60KirAW848fZWTf10TsV6cw5DpCaPjgV\r\nf21BJSHDavb7gCNbxWAbGEclmuOcusoqhnzqJQxxaWEfjVYcKozN2l0qYP05\r\nhKkoAaRnRjAVYqZ/4vxCxtBKxRlGprf+VWGnDjIaJrmEpntAOe3P4pisPdfd\r\nvfbg94wvOQqZ+1c91DJbWu3VxpzHhHSkxJ2Lhp28m8tLmPCwILraMqGk8/cI\r\n+qiLGt2UbgEScDiLrxj/8irKTo33YXILhNa6LhtxZBajuP+b8DaxqhxrYvcP\r\nS2ZAEZfuMe9eXP/OI4tufGNIyoDP1CqR4iK4QSPTsvn6O2rKVueXDPGU8x/m\r\nMeI18t2JYlwsPs0U41Xk1OyRxdOCT+DUwYH87qutWVY66DoCFkib9RMxDygu\r\nS/iisxF0Ze5H1y4yWsvbVRwUddajIu8aT7QvWXu6l6ALpjFu1umBsXARIQ9J\r\nKUPyAwSnAKBdCUlAbnshU9wtGQb0X6h1jvo=\r\n=DiC0\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"brightlayerui","email":"brightlayer-ui@eaton.com"},"directories":{},"maintainers":[{"name":"brightlayerui","email":"brightlayer-ui@eaton.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ng-progress-icons_2.0.0-beta.0_1674048244418_0.9938886212495055"},"_hasShrinkwrap":false},"3.0.0-alpha.0":{"name":"@brightlayer-ui/ng-progress-icons","version":"3.0.0-alpha.0","description":"Angular progress icons for Brightlayer UI applications","main":"bundles/brightlayer-ui-ng-progress-icons.umd.js","dependencies":{"color":"^3.1.2","tslib":"^2.3.0"},"peerDependencies":{},"repository":{"type":"git","url":"git+https://github.com/etn-ccis/blui-progress-icons.git"},"keywords":["progress","icons","brightlayer-ui"],"author":{"name":"Brightlayer UI","email":"brightlayer-ui@eaton.com"},"license":"BSD-3-Clause","bugs":{"url":"https://github.com/etn-ccis/blui-progress-icons/issues"},"homepage":"https://github.com/etn-ccis/blui-progress-icons#readme","module":"fesm2015/brightlayer-ui-ng-progress-icons.mjs","es2015":"fesm2015/brightlayer-ui-ng-progress-icons.js","esm5":"esm5/brightlayer-ui-ng-progress-icons.js","esm2015":"esm2015/brightlayer-ui-ng-progress-icons.js","fesm5":"fesm5/brightlayer-ui-ng-progress-icons.js","fesm2015":"fesm2015/brightlayer-ui-ng-progress-icons.mjs","typings":"index.d.ts","metadata":"brightlayer-ui-ng-progress-icons.metadata.json","sideEffects":false,"es2020":"fesm2020/brightlayer-ui-ng-progress-icons.mjs","esm2020":"esm2020/brightlayer-ui-ng-progress-icons.mjs","fesm2020":"fesm2020/brightlayer-ui-ng-progress-icons.mjs","exports":{"./package.json":{"default":"./package.json"},".":{"types":"./index.d.ts","esm2020":"./esm2020/brightlayer-ui-ng-progress-icons.mjs","es2020":"./fesm2020/brightlayer-ui-ng-progress-icons.mjs","es2015":"./fesm2015/brightlayer-ui-ng-progress-icons.mjs","node":"./fesm2015/brightlayer-ui-ng-progress-icons.mjs","default":"./fesm2020/brightlayer-ui-ng-progress-icons.mjs"}},"readme":"# Brightlayer UI Progress Icons\n\n[![](https://img.shields.io/npm/v/@brightlayer-ui/ng-progress-icons.svg?label=@brightlayer-ui/ng-progress-icons&style=flat)](https://www.npmjs.com/package/@brightlayer-ui/ng-progress-icons)\n[![](https://img.shields.io/npm/v/@brightlayer-ui/react-progress-icons.svg?label=@brightlayer-ui/react-progress-icons&style=flat)](https://www.npmjs.com/package/@brightlayer-ui/react-progress-icons)\n[![](https://img.shields.io/npm/v/@brightlayer-ui/react-native-progress-icons.svg?label=@brightlayer-ui/react-native-progress-icons&style=flat)](https://www.npmjs.com/package/@brightlayer-ui/react-native-progress-icons)\n\n<img width=\"100%\" style=\"max-width: 600px\" alt=\"Progress icons\" src=\"https://raw.githubusercontent.com/etn-ccis/blui-progress-icons/master/assets/progress-icons.png\" />\n\nThis is a library of icons with dynamic fill capabilities that can be used to show progress (similar to a traditional progress spinner or bar). These can be used to show health, battery life, etc.\n\nCurrently, we have icons available for:\n\n-   battery\n-   heart\n-   pie\n-   ups\n\n## Installation\n\nTo install the Brightlayer UI progress icons from NPM as a dependency for your project, you can run one of the following commands in your project root:\n\n```\nyarn add @brightlayer-ui/ng-progress-icons // for Angular components\n```\n\n## Using the progress icons in your application\n\nThe progress icon components can be imported and used like you would use any other component. You can manually set the desired color for the icon, otherwise it will inherit the text color of its parent container;\n\n```ts\n// app.module.ts\nimport { NgProgressIconsModule } from '@brightlayer-ui/ng-progress-icons';\n\n...\nimports: [\n    NgProgressIconsModule\n],\n```\n\n```html\n<!-- app.component.html -->\n<battery-progress percent=\"80\" size=\"36\" color=\"green\" [charging]=\"true\" [outlined]=\"true\"></battery-progress>\n<heart-progress percent=\"99\" size=\"36\" color=\"pink\" [outlined]=\"true\"></heart-progress>\n<pie-progress percent=\"30\" size=\"36\" color=\"#0000ff\" ring=\"4\" [outlined]=\"true\"></pie-progress>\n<ups-progress percent=\"10\" size=\"36\" color=\"#0000ff\" [outlined]=\"true\"></ups-progress>\n```\n\n## API\n\n### Shared Attributes\n\nThese props are available on all of the progress icons in this package.\n\n<div style=\"overflow: auto;\">\n\n| @Input           | Description                            | Type                               | Required | Default        |\n| ---------------- | -------------------------------------- | ---------------------------------- | -------- | -------------- |\n| backgroundColor  | Background color for the unfilled area | `string`                           | no       |                |\n| color            | The color used for the icon fill       | `string`                           | no       | 'currentColor' |\n| labelColor       | Label text color                       | `string`                           | no       |                |\n| labelPosition    | Where to display the text label        | `top, bottom, center, right, left` | no       | `center`       |\n| labelSize        | Size of the label in px                | `number`                           | no       | `size/4`       |\n| outlined         | Whether to use the outlined style      | `boolean`                          | no       | false          |\n| percent          | The amount to fill the icon (0-100)    | `number`                           | no       | 100            |\n| showPercentLabel | Option to show percentage overlay      | `boolean`                          | no       | false          |\n| size             | The size of the icon (in px)           | `number`                           | no       | 24             |\n\n</div>\n\nAny other props supplied will be provided to the root element (`svg`).\n\n### Battery Attributes\n\nThe battery supports all of the shared attributes above and the following additional attribute:\n\n| @Input   | Description                            | Type      | Required | Default |\n| -------- | -------------------------------------- | --------- | -------- | ------- |\n| charging | Whether to show the charging indicator | `boolean` | no       | false   |\n\n### Pie Attributes\n\nThe pie supports all of the shared attributes above and the following additional attribute:\n\n| @Input | Description                                                        | Type     | Required | Default |\n| ------ | ------------------------------------------------------------------ | -------- | -------- | ------- |\n| ring   | The thickness of the outer ring (1 = thin ring, 10 = full circle ) | `number` | no       | 10      |\n\n## Building & Packaging\n\nThese progress icons are currently created manually by modifying the svg files from the design folder with various clip paths and fill algorithms. They are then packaged up for distribution via npm.\n\nThe Angular icons are built using the library packages built into the Angular CLI ([read more](https://github.com/angular/angular-cli/wiki/stories-create-library)).\n\nTo create a new component:\n\n```sh\ncd icons/progress/angular\nng generate component component-name --project=ng-progress-icons\n```\n\nAnd then to create the /dist version:\n\n```sh\nng build ng-progress-icons\nor\nyarn build\n```\n\nOnce you have built the library, you can publish to npm via:\n\n```sh\ncd dist/ng-progress-icons\nnpm version patch\nnpm publish\n```\n","readmeFilename":"README.md","gitHead":"1b9911e38d2811dbe10458d6387c3e97688e2b71","_id":"@brightlayer-ui/ng-progress-icons@3.0.0-alpha.0","_nodeVersion":"16.17.1","_npmVersion":"8.15.0","dist":{"integrity":"sha512-3mBOpBrDBgFHkLdLoTlpWzfjBcw1e35RzUX7YpszUfmQzh9/YTYmYALYzArR8+HFyeL/M/fcIhVJyRhnTOpQGg==","shasum":"efd12dfb4de3f339f93f350f3f5078868138f390","tarball":"https://registry.npmjs.org/@brightlayer-ui/ng-progress-icons/-/ng-progress-icons-3.0.0-alpha.0.tgz","fileCount":24,"unpackedSize":257570,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCiwwXPILNlG20a3bWHcx0NBgybgnf6VfiWNpMg8ET0sgIgL7L+tORjyien9DLucHMpoS5NxIcU/JyaSP3Kr2PBYmw="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkAflSACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpwZQ//R/6zhg/gvJ0nPeGNu87W3GGe/ToWIheS4AsMSYvp5fvS37Zz\r\nLfE5TTYYO8DZXqwkyO159fgGMz/j9G4CtKtjvBE51BWCJxYBSehgb5LZbNbj\r\n+kfCuAVmniNG08rSguHEsM03JbBm70ZeRiAhd9VIKTzGse1zLu97xZSG6PWb\r\nMMt7P/ZW0DUxKQBAwxCoawb4M02sFZxsaa3oWiulTEHw1Se7Y2bVwrhejWP7\r\nImT59iE6IgAHkbUhV0H88u4Q+YfH5ZXnnmH4bstkzhV02FV3nH0cDQXTwxSl\r\nis0+p3zeb/QID6ifAfqYeKx//CgHBkRIsNdkylsTPT1poDFB0WfJ8YOzIwDH\r\nxxQYn/s3+gQSd8hNUbOUCNLgvLBRvFfc+NvFpdwFmU+2EPqsh5yzTtAqGfXt\r\nzqtI6zJyB2m3sT0wX3jI9jUWyRCTRZZC4DZ0PYximX74h33ZmHARuag4esLP\r\njSsgsNFkb7xRs+M+hdyTWz/nInAmjRIQE+aLASn1/8hdixIlmf6QtjM6x+et\r\nT6umNwHbdYWY9UQgqXiNJdR11XkIABjvUs+nRdeGXxBj01IA39ZPl73/Hjj6\r\nWZCoQjz+ATvQGvzljodrka6GRCdAEiStRzkalkwz5MRwbuFDmUN67TLiC8t4\r\nUvF9cAo+01tajw7CSyOGKTOdYCPujJl5Z4Y=\r\n=2VNH\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"brightlayerui","email":"brightlayer-ui@eaton.com"},"directories":{},"maintainers":[{"name":"brightlayerui","email":"brightlayer-ui@eaton.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ng-progress-icons_3.0.0-alpha.0_1677850961799_0.7835446591388806"},"_hasShrinkwrap":false},"2.0.0-beta.1":{"name":"@brightlayer-ui/ng-progress-icons","version":"2.0.0-beta.1","description":"Angular progress icons for Brightlayer UI applications","main":"bundles/brightlayer-ui-ng-progress-icons.umd.js","dependencies":{"color":"^3.1.2","tslib":"^2.3.0"},"peerDependencies":{"@angular/common":">=14.0.0","@angular/core":">=14.0.0"},"repository":{"type":"git","url":"git+https://github.com/etn-ccis/blui-progress-icons.git"},"keywords":["progress","icons","brightlayer-ui"],"author":{"name":"Brightlayer UI","email":"brightlayer-ui@eaton.com"},"license":"BSD-3-Clause","bugs":{"url":"https://github.com/etn-ccis/blui-progress-icons/issues"},"homepage":"https://github.com/etn-ccis/blui-progress-icons#readme","module":"fesm2015/brightlayer-ui-ng-progress-icons.mjs","es2015":"fesm2015/brightlayer-ui-ng-progress-icons.js","esm5":"esm5/brightlayer-ui-ng-progress-icons.js","esm2015":"esm2015/brightlayer-ui-ng-progress-icons.js","fesm5":"fesm5/brightlayer-ui-ng-progress-icons.js","fesm2015":"fesm2015/brightlayer-ui-ng-progress-icons.mjs","typings":"index.d.ts","metadata":"brightlayer-ui-ng-progress-icons.metadata.json","sideEffects":false,"es2020":"fesm2020/brightlayer-ui-ng-progress-icons.mjs","esm2020":"esm2020/brightlayer-ui-ng-progress-icons.mjs","fesm2020":"fesm2020/brightlayer-ui-ng-progress-icons.mjs","exports":{"./package.json":{"default":"./package.json"},".":{"types":"./index.d.ts","esm2020":"./esm2020/brightlayer-ui-ng-progress-icons.mjs","es2020":"./fesm2020/brightlayer-ui-ng-progress-icons.mjs","es2015":"./fesm2015/brightlayer-ui-ng-progress-icons.mjs","node":"./fesm2015/brightlayer-ui-ng-progress-icons.mjs","default":"./fesm2020/brightlayer-ui-ng-progress-icons.mjs"}},"_id":"@brightlayer-ui/ng-progress-icons@2.0.0-beta.1","readme":"# Brightlayer UI Progress Icons\n\n[![](https://img.shields.io/npm/v/@brightlayer-ui/ng-progress-icons.svg?label=@brightlayer-ui/ng-progress-icons&style=flat)](https://www.npmjs.com/package/@brightlayer-ui/ng-progress-icons)\n[![](https://img.shields.io/npm/v/@brightlayer-ui/react-progress-icons.svg?label=@brightlayer-ui/react-progress-icons&style=flat)](https://www.npmjs.com/package/@brightlayer-ui/react-progress-icons)\n[![](https://img.shields.io/npm/v/@brightlayer-ui/react-native-progress-icons.svg?label=@brightlayer-ui/react-native-progress-icons&style=flat)](https://www.npmjs.com/package/@brightlayer-ui/react-native-progress-icons)\n\n<img width=\"100%\" style=\"max-width: 600px\" alt=\"Progress icons\" src=\"https://raw.githubusercontent.com/etn-ccis/blui-progress-icons/master/assets/progress-icons.png\" />\n\nThis is a library of icons with dynamic fill capabilities that can be used to show progress (similar to a traditional progress spinner or bar). These can be used to show health, battery life, etc.\n\nCurrently, we have icons available for:\n\n-   battery\n-   heart\n-   pie\n-   ups\n\n## Installation\n\nTo install the Brightlayer UI progress icons from NPM as a dependency for your project, you can run one of the following commands in your project root:\n\n```\nyarn add @brightlayer-ui/ng-progress-icons // for Angular components\n```\n\n## Using the progress icons in your application\n\nThe progress icon components can be imported and used like you would use any other component. You can manually set the desired color for the icon, otherwise it will inherit the text color of its parent container;\n\n```ts\n// app.module.ts\nimport { NgProgressIconsModule } from '@brightlayer-ui/ng-progress-icons';\n\n...\nimports: [\n    NgProgressIconsModule\n],\n```\n\n```html\n<!-- app.component.html -->\n<battery-progress percent=\"80\" size=\"36\" color=\"green\" [charging]=\"true\" [outlined]=\"true\"></battery-progress>\n<heart-progress percent=\"99\" size=\"36\" color=\"pink\" [outlined]=\"true\"></heart-progress>\n<pie-progress percent=\"30\" size=\"36\" color=\"#0000ff\" ring=\"4\" [outlined]=\"true\"></pie-progress>\n<ups-progress percent=\"10\" size=\"36\" color=\"#0000ff\" [outlined]=\"true\"></ups-progress>\n```\n\n## API\n\n### Shared Attributes\n\nThese props are available on all of the progress icons in this package.\n\n<div style=\"overflow: auto;\">\n\n| @Input           | Description                            | Type                               | Required | Default        |\n| ---------------- | -------------------------------------- | ---------------------------------- | -------- | -------------- |\n| backgroundColor  | Background color for the unfilled area | `string`                           | no       |                |\n| color            | The color used for the icon fill       | `string`                           | no       | 'currentColor' |\n| labelColor       | Label text color                       | `string`                           | no       |                |\n| labelPosition    | Where to display the text label        | `top, bottom, center, right, left` | no       | `center`       |\n| labelSize        | Size of the label in px                | `number`                           | no       | `size/4`       |\n| outlined         | Whether to use the outlined style      | `boolean`                          | no       | false          |\n| percent          | The amount to fill the icon (0-100)    | `number`                           | no       | 100            |\n| showPercentLabel | Option to show percentage overlay      | `boolean`                          | no       | false          |\n| size             | The size of the icon (in px)           | `number`                           | no       | 24             |\n\n</div>\n\nAny other props supplied will be provided to the root element (`svg`).\n\n### Battery Attributes\n\nThe battery supports all of the shared attributes above and the following additional attribute:\n\n| @Input   | Description                            | Type      | Required | Default |\n| -------- | -------------------------------------- | --------- | -------- | ------- |\n| charging | Whether to show the charging indicator | `boolean` | no       | false   |\n\n### Pie Attributes\n\nThe pie supports all of the shared attributes above and the following additional attribute:\n\n| @Input | Description                                                        | Type     | Required | Default |\n| ------ | ------------------------------------------------------------------ | -------- | -------- | ------- |\n| ring   | The thickness of the outer ring (1 = thin ring, 10 = full circle ) | `number` | no       | 10      |\n\n## Building & Packaging\n\nThese progress icons are currently created manually by modifying the svg files from the design folder with various clip paths and fill algorithms. They are then packaged up for distribution via npm.\n\nThe Angular icons are built using the library packages built into the Angular CLI ([read more](https://github.com/angular/angular-cli/wiki/stories-create-library)).\n\nTo create a new component:\n\n```sh\ncd icons/progress/angular\nng generate component component-name --project=ng-progress-icons\n```\n\nAnd then to create the /dist version:\n\n```sh\nng build ng-progress-icons\nor\nyarn build\n```\n\nOnce you have built the library, you can publish to npm via:\n\n```sh\ncd dist/ng-progress-icons\nnpm version patch\nnpm publish\n```\n","readmeFilename":"README.md","gitHead":"a6eecead90134623cb340c57f8f1ad10b1ab5818","_nodeVersion":"18.20.2","_npmVersion":"10.5.0","dist":{"integrity":"sha512-kWC41uUML9Jg7Cb7JDPRD9a2l1nJ0mZWyfrow6DG2nyWOQoQ5rK+T8uF4Ha5qLDBiHuN9Ppht9mL3BMqOriYJA==","shasum":"17c59a88fe65c75e7105213ea14266b12ed3f41e","tarball":"https://registry.npmjs.org/@brightlayer-ui/ng-progress-icons/-/ng-progress-icons-2.0.0-beta.1.tgz","fileCount":24,"unpackedSize":257661,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC0unmlnxEKbxiczYqjDVTnnb+R9hFS9e+8Mh/3o7SCjwIgSSEsPZCrn0ZqmavkSEsY9XIrbPFFPKRqXDOp9DfylsE="}]},"_npmUser":{"name":"brightlayerui","email":"brightlayer-ui@eaton.com"},"directories":{},"maintainers":[{"name":"brightlayerui","email":"brightlayer-ui@eaton.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ng-progress-icons_2.0.0-beta.1_1714652673485_0.4416714778451787"},"_hasShrinkwrap":false}},"time":{"created":"2021-10-21T18:27:45.011Z","1.2.1-beta.0":"2021-10-21T18:27:45.345Z","modified":"2024-05-02T12:24:33.890Z","1.2.1":"2021-10-27T09:20:01.725Z","2.0.0-beta.0":"2023-01-18T13:24:04.615Z","3.0.0-alpha.0":"2023-03-03T13:42:41.988Z","2.0.0-beta.1":"2024-05-02T12:24:33.696Z"},"maintainers":[{"name":"brightlayerui","email":"brightlayer-ui@eaton.com"}],"description":"Angular progress icons for Brightlayer UI applications","homepage":"https://github.com/brightlayer-ui/icons#readme","keywords":["progress","icons","brightlayer-ui"],"repository":{"type":"git","url":"git+https://github.com/brightlayer-ui/icons.git"},"author":{"name":"Brightlayer UI","email":"brightlayer-ui@eaton.com"},"bugs":{"url":"https://github.com/brightlayer-ui/icons/issues"},"license":"BSD-3-Clause","readme":"","readmeFilename":""}