├── .editorconfig
├── .firebaserc
├── .github
    └── workflows
    │   └── main.yml
├── .gitignore
├── .prettierignore
├── .prettierrc
├── CHANGELOG.md
├── LICENSE
├── README.md
├── assets
    └── demo
    │   └── instagram.jpg
├── firebase.json
├── package-lock.json
├── package.json
├── src
    ├── components.d.ts
    ├── components
    │   └── web-photo-filter
    │   │   ├── readme.md
    │   │   ├── web-photo-filter.scss
    │   │   └── web-photo-filter.tsx
    ├── index.html
    ├── index.ts
    └── types
    │   └── web-photo-filter
    │       ├── web-photo-filter-result.ts
    │       └── web-photo-filter-type.ts
├── stencil.config.ts
└── tsconfig.json


/.editorconfig:
--------------------------------------------------------------------------------
 1 | # http://editorconfig.org
 2 | 
 3 | root = true
 4 | 
 5 | [*]
 6 | charset = utf-8
 7 | indent_style = space
 8 | indent_size = 2
 9 | end_of_line = lf
10 | insert_final_newline = true
11 | trim_trailing_whitespace = true
12 | 
13 | [*.md]
14 | insert_final_newline = false
15 | trim_trailing_whitespace = false
16 | 


--------------------------------------------------------------------------------
/.firebaserc:
--------------------------------------------------------------------------------
1 | {
2 |   "projects": {
3 |     "default": "web-photo-filter"
4 |   }
5 | }
6 | 


--------------------------------------------------------------------------------
/.github/workflows/main.yml:
--------------------------------------------------------------------------------
 1 | name: Deploy website
 2 | 
 3 | on:
 4 |   push:
 5 |     branches:
 6 |       - main
 7 | 
 8 | jobs:
 9 |   build:
10 |     name: Build
11 |     runs-on: ubuntu-latest
12 |     steps:
13 |       - name: Checkout Repo
14 |         uses: actions/checkout@master
15 |       - name: Install Dependencies
16 |         run: npm ci
17 |       - name: Build
18 |         run: npm run web
19 |       - name: Archive Production Artifact
20 |         uses: actions/upload-artifact@master
21 |         with:
22 |           name: www
23 |           path: www
24 |   deploy:
25 |     name: Deploy
26 |     needs: build
27 |     runs-on: ubuntu-latest
28 |     steps:
29 |       - name: Checkout Repo
30 |         uses: actions/checkout@master
31 |       - name: Download Artifact
32 |         uses: actions/download-artifact@master
33 |         with:
34 |           name: www
35 |           path: www
36 |       - name: Deploy to Firebase
37 |         uses: w9jds/firebase-action@master
38 |         with:
39 |           args: deploy --only hosting
40 |         env:
41 |           FIREBASE_TOKEN: ${{ secrets.FIREBASE_TOKEN }}
42 |           PROJECT_ID: 'default'
43 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | dist/
 2 | 
 3 | *~
 4 | *.sw[mnpcod]
 5 | *.log
 6 | *.lock
 7 | *.tmp
 8 | *.tmp.*
 9 | log.txt
10 | *.sublime-project
11 | *.sublime-workspace
12 | 
13 | .idea/
14 | .vscode/
15 | .sass-cache/
16 | .versions/
17 | node_modules/
18 | $RECYCLE.BIN/
19 | 
20 | .DS_Store
21 | Thumbs.db
22 | UserInterfaceState.xcuserstate
23 | .env
24 | /web-photo-filter-*.tgz
25 | /www/
26 | 
27 | .firebase
28 | 


--------------------------------------------------------------------------------
/.prettierignore:
--------------------------------------------------------------------------------
1 | www
2 | dist
3 | **/src/components.d.ts
4 | 


--------------------------------------------------------------------------------
/.prettierrc:
--------------------------------------------------------------------------------
 1 | {
 2 |   "printWidth": 140,
 3 |   "singleQuote": true,
 4 |   "arrowParens": "always",
 5 |   "bracketSpacing": false,
 6 |   "jsxBracketSameLine": true,
 7 |   "overrides": [
 8 |     {
 9 |       "files": ["*.scss", "*.css"],
10 |       "options": {
11 |         "singleQuote": false
12 |       }
13 |     }
14 |   ]
15 | }
16 | 


--------------------------------------------------------------------------------
/CHANGELOG.md:
--------------------------------------------------------------------------------
 1 | <a name="3.1.1"></a>
 2 | 
 3 | # [3.1.1](https://github.com/peterpeterparker/web-photo-filter/compare/v3.1.0...v3.1.1) (2021-01-01)
 4 | 
 5 | ### Fix
 6 | 
 7 | - on src change
 8 | 
 9 | <a name="3.1.0"></a>
10 | 
11 | # [3.1.0](https://github.com/peterpeterparker/web-photo-filter/compare/v3.0.0...v3.1.0) (2020-12-30)
12 | 
13 | ### Features
14 | 
15 | - multiple filters support
16 | - new filter "desaturate"
17 | 
18 | <a name="3.0.0"></a>
19 | 
20 | # [3.0.0](https://github.com/peterpeterparker/web-photo-filter/compare/v2.3.0...v3.0.0) (2020-12-29)
21 | 
22 | ### Breaking changes
23 | 
24 | - drop support of IE11, Edge 16-18 and Safari 10
25 | - component is now `shadowed` and therefore is a proper Web Components
26 | - feature `keep` removed
27 | - both shadowed image and canvas role set as `img` and to `aria-hidden`. for a11y, provide information on the host component.
28 | 
29 | ### Features
30 | 
31 | - update dependencies (Stencil v2)
32 | - component exposes two parts, `img` and `canvas`, for styling purpose
33 | - supports image from `https` (source image `crossorigin` set to `anonymous`) ([#14](https://github.com/peterpeterparker/web-photo-filter/issues/14))
34 | - add React bindings
35 | 
36 | ### Chore
37 | 
38 | - use prettier to format code
39 | 
40 | <a name="2.3.0"></a>
41 | 
42 | # [2.3.0](https://github.com/peterpeterparker/web-photo-filter/compare/v2.1.1...v2.2.0) (2020-08-15)
43 | 
44 | ### Chore
45 | 
46 | - update dependencies (Stencil v1.17.x)
47 | - add GitHub actions to deploy to Firebase
48 | - prerender the demo webapp
49 | - repo move to my personal GitHub account
50 | 
51 | <a name="2.2.1"></a>
52 | 
53 | # [2.2.1](https://github.com/peterpeterparker/web-photo-filter/compare/v2.1.0...v2.1.1) (2018-08-23)
54 | 
55 | ### Fix
56 | 
57 | - resolve build warning ([3443abb4276def0ed448e6042ce6b32bd912b815](https://github.com/peterpeterparker/web-photo-filter/commit/3443abb4276def0ed448e6042ce6b32bd912b815))
58 | 
59 | <a name="2.2.0"></a>
60 | 
61 | # [2.2.0](https://github.com/peterpeterparker/web-photo-filter/compare/v2.1.0...v2.2.0) (2018-08-20)
62 | 
63 | ## Fixes
64 | 
65 | - there was a typo in the filter's name "violen_tomato" fixed with "violen**t**\_tomato" ([#7](https://github.com/peterpeterparker/web-photo-filter/issues/7))
66 | 
67 | <a name="2.1.0"></a>
68 | 
69 | # [2.1.0](https://github.com/peterpeterparker/web-photo-filter/compare/v2.0.0...v2.1.0) (2018-08-19)
70 | 
71 | ### Libs
72 | 
73 | - update Stencil ([#5](https://github.com/peterpeterparker/web-photo-filter/issues/5))
74 | - target ES2017 ([#6](https://github.com/peterpeterparker/web-photo-filter/issues/6))
75 | 
76 | <a name="2.0.0"></a>
77 | 
78 | # [2.0.0](https://github.com/peterpeterparker/web-photo-filter/compare/v1.1.1...v2.0.0) (2018-08-12)
79 | 
80 | ## Features
81 | 
82 | - **breaking changes**: Update the component in order to be compatible with **Ionic v4** and **Angular v6**
83 | 
84 | ### Important note
85 | 
86 | I did not gave a try but this version might no be suitable anymore for Ionic v3 and Angular v5. If you are using the web-photo-filter component in such apps, you might better not upgrade and stick to the component version v1.1.1
87 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2017 David Dal Busco
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # Web Photo Filter
  2 | 
  3 | Web Photo Filter is a web component to apply Instagram-like WebGL filters to photos.
  4 | 
  5 | [![GitHub release](https://img.shields.io/github/release/peterpeterparker/web-photo-filter/all?logo=GitHub)](https://github.com/peterpeterparker/web-photo-filter/releases/latest)
  6 | [![Tweet](https://img.shields.io/twitter/url?url=https%3A%2F%webphotofilter.com)](https://twitter.com/intent/tweet?url=https%3A%2F%2Fwebphotofilter.com&text=A%20web%20component%20to%20apply%20Instagram-like%20WebGL%20filters%20to%20photos%20by%20%40daviddalbusco)
  7 | 
  8 | ## Table of contents
  9 | 
 10 | - [Introduction](#introduction)
 11 | - [Installation](#installation)
 12 | - [Usage](#usage)
 13 | - [Credits](#credits)
 14 | - [Limitation](#limitation)
 15 | - [Tutorial](#tutorial)
 16 | 
 17 | ## Introduction
 18 | 
 19 | This component has for goal to make Instagram-like filters for photos accessible for the web.
 20 | 
 21 | ### Image modification solutions and fast processing
 22 | 
 23 | Others web based filter solutions often use CSS (for example [Instagram.css](https://picturepan2.github.io/instagram.css/)) or Javascript to modify images.
 24 | 
 25 | Applying CSS do not modify the underlying image, and <strong>only</strong> apply a visual layer to it.
 26 | 
 27 | Most Javascript based solutions are not always optimized well enough to be used on mobile devices.
 28 | 
 29 | I was looking to create an almost instantaneous filter solution, similar to what Instagram leverages in its mobile application.
 30 | 
 31 | ### Supported by major browsers and devices
 32 | 
 33 | As of Feburary 2018, Web Photo Filter utilizes [WebGL](https://caniuse.com/#feat=webgl) based technology because it is well supported across modern browsers and mobile devices.
 34 | 
 35 | In the future, Web Photo Filter may use [WebGL 2](https://caniuse.com/#search=webgl%202) when it will be better supported.
 36 | 
 37 | In case WebGL would not be supported on a particular platform, and to avoid producing an error, the component will display the original image without modification.
 38 | 
 39 | ### Lightweight, fast boot time, lazy loading, support across the most popular frontend frameworks
 40 | 
 41 | This project is a web component built with the amazing [Stencil](https://stenciljs.com) compiler.
 42 | 
 43 | ## Installation
 44 | 
 45 | ```bash
 46 | npm install web-photo-filter
 47 | ```
 48 | 
 49 | ### React
 50 | 
 51 | You can use a [React specific wrapper](https://github.com/peterpeterparker/web-photo-filter-react) for this component.
 52 | 
 53 | Install it as following:
 54 | 
 55 | ```bash
 56 | npm install web-photo-filter-react
 57 | ```
 58 | 
 59 | Consume it in your code:
 60 | 
 61 | ```javascript
 62 | import {WebPhotoFilter} from 'web-photo-filter-react/dist';
 63 | 
 64 | render() {
 65 |     return <WebPhotoFilter/>
 66 | }
 67 | ```
 68 | 
 69 | ## Usage
 70 | 
 71 | The Web Photo Filter Component can be use as following:
 72 | 
 73 | ```html
 74 | <web-photo-filter src="assets/img/test.jpg" filter="sepia"></web-photo-filter>
 75 | ```
 76 | 
 77 | The only required parameter is the img `src` tag. It also supports images provided as `https` if the `anonymous` [crossorigin](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/crossorigin) can be use.
 78 | 
 79 | ### Filter
 80 | 
 81 | Filter is an optional parameter. Omitting this attribute or specifying a null value will result in no processing within the component. The source image will be displayed unmodified.
 82 | 
 83 | The list of available filters is available in class `src/types/web-photo-filter-type.ts`. Currently: `sepia`, `blue_monotone`, `violent_tomato`, `greyscale`, `desaturate`, `brightness`, `saturation`, `contrast`, `hue`, `cookie`, `vintage`, `koda`, `technicolor`, `polaroid`, `bgr`.
 84 | 
 85 | You can provide a unique filter or, a comma separated list of multiple filters.
 86 | 
 87 | `filter` is a **string** parameter
 88 | 
 89 | #### Example: Sepia
 90 | 
 91 | ```html
 92 | <web-photo-filter src="assets/img/test.jpg" filter="sepia"></web-photo-filter>
 93 | ```
 94 | 
 95 | #### Example: Multiple filters
 96 | 
 97 | ```html
 98 | <web-photo-filter src="assets/img/test.jpg" filter="technicolor, saturation(1.6), contrast"></web-photo-filter>
 99 | ```
100 | 
101 | ### FilterLoad
102 | 
103 | If you would like to start or process the result after the component did finish is processing, an event will be triggered containing the resulting image (no filter) or canvas. In addition, it contains also an indication telling you if WebGL is supported or not.
104 | 
105 | ```html
106 | <web-photo-filter onFilterLoad={($event) => imageLoaded($event)} src="imgURI" filter="sepia"></web-photo-filter>
107 | ```
108 | 
109 | The description of the event is available in the interface `src/types/web-photo-filter-result.ts`
110 | 
111 | `filterLoad` emit an **event** of type `WebPhotoFilterResult`
112 | 
113 | ### Level
114 | 
115 | Some filters (brightness, saturation, contrast and hue) are variable. To modify their default values, you could use the variable `level`.
116 | 
117 | If multiple filter are provided, it applies to all except if a specific level is provided for a filter, such as for example `saturation(1.1)`.
118 | 
119 | ```html
120 | <web-photo-filter src="assets/img/test.jpg" filter="brightness" level="1.2"></web-photo-filter>
121 | ```
122 | 
123 | `level` is a **number** parameter
124 | 
125 | ## Credits
126 | 
127 | This web component would not had been possible without the brilliant [article](https://www.madebymike.com.au/writing/canvas-image-manipulation/) and WebGL core processing code written by [Mike Riethmuller](https://github.com/MadeByMike) :heart:
128 | 
129 | The sources of nine filters (Brownie, Brightnes, etc.) were adapted from the project [WebGLImageFilter](https://github.com/phoboslab/WebGLImageFilter) by [Dominic Szablewski](http://phoboslab.org/) :+1:
130 | 
131 | ## Limitation
132 | 
133 | WebGL is well supported by most modern browsers, but there may be some use cases where it is not. In the case that WebGL is not supported, there is a fallback scenario implemented in the component.
134 | 
135 | ### iOS (WKWebView)
136 | 
137 | While testing a couple of years ago, I found out that Web Photo Filter works very well on iPhone 6 and above. It is possible to load all filters on the same page without performance issues.
138 | 
139 | ### Android (WebView)
140 | 
141 | Likewise I discovered that these filters do not work very well on Android 7 and above. Testing for Android was ran on a Samsung Edge (Android 7.1), Nexus 5X and Sony (Android 8.1).
142 | 
143 | The Android Webview seems to handle canvas less actively and it's iPhone counterpart. Therefore I do not recommend using all filters on the same page, but only integrating a few of them at a time, otherwise you'll see a negative performance impact.
144 | 
145 | ## Tutorial
146 | 
147 | [Simon Grimm (@saimon24)](https://github.com/saimon24) published a tutorial ["Ionic Image Filter Like Instagram Using WebGL Filters"](https://ionicacademy.com/ionic-image-filter-webgl/) which displays step by step how to create a Ionic app and include this component easily.
148 | 
149 | **Note**: to follow this tutorial, version 2 of the component has to be use.
150 | 
151 | ## License
152 | 
153 | MIT © [David Dal Busco](mailto:david.dalbusco@outlook.com)
154 | 


--------------------------------------------------------------------------------
/assets/demo/instagram.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/peterpeterparker/web-photo-filter/a589a4398d65b10b170632cb0a75009196008823/assets/demo/instagram.jpg


--------------------------------------------------------------------------------
/firebase.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "hosting": {
 3 |     "public": "www",
 4 |     "ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
 5 |     "rewrites": [
 6 |       {
 7 |         "source": "**",
 8 |         "destination": "/index.html"
 9 |       }
10 |     ]
11 |   }
12 | }
13 | 


--------------------------------------------------------------------------------
/package-lock.json:
--------------------------------------------------------------------------------
  1 | {
  2 |   "name": "web-photo-filter",
  3 |   "version": "3.1.1",
  4 |   "lockfileVersion": 1,
  5 |   "requires": true,
  6 |   "dependencies": {
  7 |     "@babel/code-frame": {
  8 |       "version": "7.12.11",
  9 |       "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.12.11.tgz",
 10 |       "integrity": "sha512-Zt1yodBx1UcyiePMSkWnU4hPqhwq7hGi2nFL1LeA3EUl+q2LQx16MISgJ0+z7dnmgvP9QtIleuETGOiOH1RcIw==",
 11 |       "dev": true,
 12 |       "requires": {
 13 |         "@babel/highlight": "^7.10.4"
 14 |       }
 15 |     },
 16 |     "@babel/helper-validator-identifier": {
 17 |       "version": "7.12.11",
 18 |       "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.12.11.tgz",
 19 |       "integrity": "sha512-np/lG3uARFybkoHokJUmf1QfEvRVCPbmQeUQpKow5cQ3xWrV9i3rUHodKDJPQfTVX61qKi+UdYk8kik84n7XOw==",
 20 |       "dev": true
 21 |     },
 22 |     "@babel/highlight": {
 23 |       "version": "7.10.4",
 24 |       "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.10.4.tgz",
 25 |       "integrity": "sha512-i6rgnR/YgPEQzZZnbTHHuZdlE8qyoBNalD6F+q4vAFlcMEcqmkoG+mPqJYJCo63qPf74+Y1UZsl3l6f7/RIkmA==",
 26 |       "dev": true,
 27 |       "requires": {
 28 |         "@babel/helper-validator-identifier": "^7.10.4",
 29 |         "chalk": "^2.0.0",
 30 |         "js-tokens": "^4.0.0"
 31 |       },
 32 |       "dependencies": {
 33 |         "ansi-styles": {
 34 |           "version": "3.2.1",
 35 |           "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
 36 |           "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
 37 |           "dev": true,
 38 |           "requires": {
 39 |             "color-convert": "^1.9.0"
 40 |           }
 41 |         },
 42 |         "chalk": {
 43 |           "version": "2.4.2",
 44 |           "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
 45 |           "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
 46 |           "dev": true,
 47 |           "requires": {
 48 |             "ansi-styles": "^3.2.1",
 49 |             "escape-string-regexp": "^1.0.5",
 50 |             "supports-color": "^5.3.0"
 51 |           }
 52 |         },
 53 |         "color-convert": {
 54 |           "version": "1.9.3",
 55 |           "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
 56 |           "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
 57 |           "dev": true,
 58 |           "requires": {
 59 |             "color-name": "1.1.3"
 60 |           }
 61 |         },
 62 |         "color-name": {
 63 |           "version": "1.1.3",
 64 |           "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
 65 |           "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=",
 66 |           "dev": true
 67 |         },
 68 |         "has-flag": {
 69 |           "version": "3.0.0",
 70 |           "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
 71 |           "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0=",
 72 |           "dev": true
 73 |         },
 74 |         "supports-color": {
 75 |           "version": "5.5.0",
 76 |           "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
 77 |           "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
 78 |           "dev": true,
 79 |           "requires": {
 80 |             "has-flag": "^3.0.0"
 81 |           }
 82 |         }
 83 |       }
 84 |     },
 85 |     "@jest/types": {
 86 |       "version": "26.6.2",
 87 |       "resolved": "https://registry.npmjs.org/@jest/types/-/types-26.6.2.tgz",
 88 |       "integrity": "sha512-fC6QCp7Sc5sX6g8Tvbmj4XUTbyrik0akgRy03yjXbQaBWWNWGE7SGtJk98m0N8nzegD/7SggrUlivxo5ax4KWQ==",
 89 |       "dev": true,
 90 |       "requires": {
 91 |         "@types/istanbul-lib-coverage": "^2.0.0",
 92 |         "@types/istanbul-reports": "^3.0.0",
 93 |         "@types/node": "*",
 94 |         "@types/yargs": "^15.0.0",
 95 |         "chalk": "^4.0.0"
 96 |       }
 97 |     },
 98 |     "@stencil/core": {
 99 |       "version": "2.3.0",
100 |       "resolved": "https://registry.npmjs.org/@stencil/core/-/core-2.3.0.tgz",
101 |       "integrity": "sha512-VZ/Ox0E1kngcmHbJhHUufuLELi+xG3of3LuRI3X2AMWyE82JUVYlOEsQci/YBZWpfc9BS9I36R88prBew22oew==",
102 |       "dev": true
103 |     },
104 |     "@stencil/postcss": {
105 |       "version": "2.0.0",
106 |       "resolved": "https://registry.npmjs.org/@stencil/postcss/-/postcss-2.0.0.tgz",
107 |       "integrity": "sha512-eTZVQEXb3AGw8A7tstKoOklV6ATXCKASs8VoykyVSYRZCjU0kECM76YgUZkzolwzEq6JG6LVwStT8xpTBSEZ+Q==",
108 |       "dev": true,
109 |       "requires": {
110 |         "postcss": "~8.2.1"
111 |       }
112 |     },
113 |     "@stencil/sass": {
114 |       "version": "1.4.1",
115 |       "resolved": "https://registry.npmjs.org/@stencil/sass/-/sass-1.4.1.tgz",
116 |       "integrity": "sha512-aFKoqtxZ/8BRbvNFiWRycGiqvMI22Ifn5qsKfq0U23j43XD81jT6d7K0WQd55ejNpoSpdxJcbOuFgQy3mXizfA==",
117 |       "dev": true
118 |     },
119 |     "@types/istanbul-lib-coverage": {
120 |       "version": "2.0.3",
121 |       "resolved": "https://registry.npmjs.org/@types/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.3.tgz",
122 |       "integrity": "sha512-sz7iLqvVUg1gIedBOvlkxPlc8/uVzyS5OwGz1cKjXzkl3FpL3al0crU8YGU1WoHkxn0Wxbw5tyi6hvzJKNzFsw==",
123 |       "dev": true
124 |     },
125 |     "@types/istanbul-lib-report": {
126 |       "version": "3.0.0",
127 |       "resolved": "https://registry.npmjs.org/@types/istanbul-lib-report/-/istanbul-lib-report-3.0.0.tgz",
128 |       "integrity": "sha512-plGgXAPfVKFoYfa9NpYDAkseG+g6Jr294RqeqcqDixSbU34MZVJRi/P+7Y8GDpzkEwLaGZZOpKIEmeVZNtKsrg==",
129 |       "dev": true,
130 |       "requires": {
131 |         "@types/istanbul-lib-coverage": "*"
132 |       }
133 |     },
134 |     "@types/istanbul-reports": {
135 |       "version": "3.0.0",
136 |       "resolved": "https://registry.npmjs.org/@types/istanbul-reports/-/istanbul-reports-3.0.0.tgz",
137 |       "integrity": "sha512-nwKNbvnwJ2/mndE9ItP/zc2TCzw6uuodnF4EHYWD+gCQDVBuRQL5UzbZD0/ezy1iKsFU2ZQiDqg4M9dN4+wZgA==",
138 |       "dev": true,
139 |       "requires": {
140 |         "@types/istanbul-lib-report": "*"
141 |       }
142 |     },
143 |     "@types/jest": {
144 |       "version": "26.0.19",
145 |       "resolved": "https://registry.npmjs.org/@types/jest/-/jest-26.0.19.tgz",
146 |       "integrity": "sha512-jqHoirTG61fee6v6rwbnEuKhpSKih0tuhqeFbCmMmErhtu3BYlOZaXWjffgOstMM4S/3iQD31lI5bGLTrs97yQ==",
147 |       "dev": true,
148 |       "requires": {
149 |         "jest-diff": "^26.0.0",
150 |         "pretty-format": "^26.0.0"
151 |       }
152 |     },
153 |     "@types/minimatch": {
154 |       "version": "3.0.3",
155 |       "resolved": "https://registry.npmjs.org/@types/minimatch/-/minimatch-3.0.3.tgz",
156 |       "integrity": "sha512-tHq6qdbT9U1IRSGf14CL0pUlULksvY9OZ+5eEgl1N7t+OA3tGvNpxJCzuKQlsNgCVwbAs670L1vcVQi8j9HjnA==",
157 |       "dev": true
158 |     },
159 |     "@types/node": {
160 |       "version": "14.14.16",
161 |       "resolved": "https://registry.npmjs.org/@types/node/-/node-14.14.16.tgz",
162 |       "integrity": "sha512-naXYePhweTi+BMv11TgioE2/FXU4fSl29HAH1ffxVciNsH3rYXjNP2yM8wqmSm7jS20gM8TIklKiTen+1iVncw==",
163 |       "dev": true
164 |     },
165 |     "@types/parse-json": {
166 |       "version": "4.0.0",
167 |       "resolved": "https://registry.npmjs.org/@types/parse-json/-/parse-json-4.0.0.tgz",
168 |       "integrity": "sha512-//oorEZjL6sbPcKUaCdIGlIUeH26mgzimjBB77G6XRgnDl/L5wOnpyBGRe/Mmf5CVW3PwEBE1NjiMZ/ssFh4wA==",
169 |       "dev": true
170 |     },
171 |     "@types/yargs": {
172 |       "version": "15.0.12",
173 |       "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-15.0.12.tgz",
174 |       "integrity": "sha512-f+fD/fQAo3BCbCDlrUpznF1A5Zp9rB0noS5vnoormHSIPFKL0Z2DcUJ3Gxp5ytH4uLRNxy7AwYUC9exZzqGMAw==",
175 |       "dev": true,
176 |       "requires": {
177 |         "@types/yargs-parser": "*"
178 |       }
179 |     },
180 |     "@types/yargs-parser": {
181 |       "version": "20.2.0",
182 |       "resolved": "https://registry.npmjs.org/@types/yargs-parser/-/yargs-parser-20.2.0.tgz",
183 |       "integrity": "sha512-37RSHht+gzzgYeobbG+KWryeAW8J33Nhr69cjTqSYymXVZEN9NbRYWoYlRtDhHKPVT1FyNKwaTPC1NynKZpzRA==",
184 |       "dev": true
185 |     },
186 |     "ansi-regex": {
187 |       "version": "5.0.0",
188 |       "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.0.tgz",
189 |       "integrity": "sha512-bY6fj56OUQ0hU1KjFNDQuJFezqKdrAyFdIevADiqrWHwSlbmBNMHp5ak2f40Pm8JTFyM2mqxkG6ngkHO11f/lg==",
190 |       "dev": true
191 |     },
192 |     "ansi-styles": {
193 |       "version": "4.3.0",
194 |       "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
195 |       "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
196 |       "dev": true,
197 |       "requires": {
198 |         "color-convert": "^2.0.1"
199 |       }
200 |     },
201 |     "array-differ": {
202 |       "version": "3.0.0",
203 |       "resolved": "https://registry.npmjs.org/array-differ/-/array-differ-3.0.0.tgz",
204 |       "integrity": "sha512-THtfYS6KtME/yIAhKjZ2ul7XI96lQGHRputJQHO80LAWQnuGP4iCIN8vdMRboGbIEYBwU33q8Tch1os2+X0kMg==",
205 |       "dev": true
206 |     },
207 |     "array-union": {
208 |       "version": "2.1.0",
209 |       "resolved": "https://registry.npmjs.org/array-union/-/array-union-2.1.0.tgz",
210 |       "integrity": "sha512-HGyxoOTYUyCM6stUe6EJgnd4EoewAI7zMdfqO+kGjnlZmBDz/cR5pf8r/cR4Wq60sL/p0IkcjUEEPwS3GFrIyw==",
211 |       "dev": true
212 |     },
213 |     "arrify": {
214 |       "version": "2.0.1",
215 |       "resolved": "https://registry.npmjs.org/arrify/-/arrify-2.0.1.tgz",
216 |       "integrity": "sha512-3duEwti880xqi4eAMN8AyR4a0ByT90zoYdLlevfrvU43vb0YZwZVfxOgxWrLXXXpyugL0hNZc9G6BiB5B3nUug==",
217 |       "dev": true
218 |     },
219 |     "autoprefixer": {
220 |       "version": "10.1.0",
221 |       "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.1.0.tgz",
222 |       "integrity": "sha512-0/lBNwN+ZUnb5su18NZo5MBIjDaq6boQKZcxwy86Gip/CmXA2zZqUoFQLCNAGI5P25ZWSP2RWdhDJ8osfKEjoQ==",
223 |       "dev": true,
224 |       "requires": {
225 |         "browserslist": "^4.15.0",
226 |         "caniuse-lite": "^1.0.30001165",
227 |         "colorette": "^1.2.1",
228 |         "fraction.js": "^4.0.12",
229 |         "normalize-range": "^0.1.2",
230 |         "postcss-value-parser": "^4.1.0"
231 |       }
232 |     },
233 |     "balanced-match": {
234 |       "version": "1.0.0",
235 |       "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.0.tgz",
236 |       "integrity": "sha1-ibTRmasr7kneFk6gK4nORi1xt2c=",
237 |       "dev": true
238 |     },
239 |     "brace-expansion": {
240 |       "version": "1.1.11",
241 |       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
242 |       "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
243 |       "dev": true,
244 |       "requires": {
245 |         "balanced-match": "^1.0.0",
246 |         "concat-map": "0.0.1"
247 |       }
248 |     },
249 |     "browserslist": {
250 |       "version": "4.16.0",
251 |       "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.16.0.tgz",
252 |       "integrity": "sha512-/j6k8R0p3nxOC6kx5JGAxsnhc9ixaWJfYc+TNTzxg6+ARaESAvQGV7h0uNOB4t+pLQJZWzcrMxXOxjgsCj3dqQ==",
253 |       "dev": true,
254 |       "requires": {
255 |         "caniuse-lite": "^1.0.30001165",
256 |         "colorette": "^1.2.1",
257 |         "electron-to-chromium": "^1.3.621",
258 |         "escalade": "^3.1.1",
259 |         "node-releases": "^1.1.67"
260 |       }
261 |     },
262 |     "callsites": {
263 |       "version": "3.1.0",
264 |       "resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz",
265 |       "integrity": "sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==",
266 |       "dev": true
267 |     },
268 |     "caniuse-lite": {
269 |       "version": "1.0.30001171",
270 |       "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001171.tgz",
271 |       "integrity": "sha512-5Alrh8TTYPG9IH4UkRqEBZoEToWRLvPbSQokvzSz0lii8/FOWKG4keO1HoYfPWs8IF/NH/dyNPg1cmJGvV3Zlg==",
272 |       "dev": true
273 |     },
274 |     "chalk": {
275 |       "version": "4.1.0",
276 |       "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.0.tgz",
277 |       "integrity": "sha512-qwx12AxXe2Q5xQ43Ac//I6v5aXTipYrSESdOgzrN+9XjgEpyjpKuvSGaN4qE93f7TQTlerQQ8S+EQ0EyDoVL1A==",
278 |       "dev": true,
279 |       "requires": {
280 |         "ansi-styles": "^4.1.0",
281 |         "supports-color": "^7.1.0"
282 |       }
283 |     },
284 |     "ci-info": {
285 |       "version": "2.0.0",
286 |       "resolved": "https://registry.npmjs.org/ci-info/-/ci-info-2.0.0.tgz",
287 |       "integrity": "sha512-5tK7EtrZ0N+OLFMthtqOj4fI2Jeb88C4CAZPu25LDVUgXJ0A3Js4PMGqrn0JU1W0Mh1/Z8wZzYPxqUrXeBboCQ==",
288 |       "dev": true
289 |     },
290 |     "color-convert": {
291 |       "version": "2.0.1",
292 |       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
293 |       "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
294 |       "dev": true,
295 |       "requires": {
296 |         "color-name": "~1.1.4"
297 |       }
298 |     },
299 |     "color-name": {
300 |       "version": "1.1.4",
301 |       "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
302 |       "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
303 |       "dev": true
304 |     },
305 |     "colorette": {
306 |       "version": "1.2.1",
307 |       "resolved": "https://registry.npmjs.org/colorette/-/colorette-1.2.1.tgz",
308 |       "integrity": "sha512-puCDz0CzydiSYOrnXpz/PKd69zRrribezjtE9yd4zvytoRc8+RY/KJPvtPFKZS3E3wP6neGyMe0vOTlHO5L3Pw==",
309 |       "dev": true
310 |     },
311 |     "compare-versions": {
312 |       "version": "3.6.0",
313 |       "resolved": "https://registry.npmjs.org/compare-versions/-/compare-versions-3.6.0.tgz",
314 |       "integrity": "sha512-W6Af2Iw1z4CB7q4uU4hv646dW9GQuBM+YpC0UvUCWSD8w90SJjp+ujJuXaEMtAXBtSqGfMPuFOVn4/+FlaqfBA==",
315 |       "dev": true
316 |     },
317 |     "concat-map": {
318 |       "version": "0.0.1",
319 |       "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
320 |       "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=",
321 |       "dev": true
322 |     },
323 |     "cosmiconfig": {
324 |       "version": "7.0.0",
325 |       "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-7.0.0.tgz",
326 |       "integrity": "sha512-pondGvTuVYDk++upghXJabWzL6Kxu6f26ljFw64Swq9v6sQPUL3EUlVDV56diOjpCayKihL6hVe8exIACU4XcA==",
327 |       "dev": true,
328 |       "requires": {
329 |         "@types/parse-json": "^4.0.0",
330 |         "import-fresh": "^3.2.1",
331 |         "parse-json": "^5.0.0",
332 |         "path-type": "^4.0.0",
333 |         "yaml": "^1.10.0"
334 |       }
335 |     },
336 |     "cross-spawn": {
337 |       "version": "7.0.3",
338 |       "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
339 |       "integrity": "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==",
340 |       "dev": true,
341 |       "requires": {
342 |         "path-key": "^3.1.0",
343 |         "shebang-command": "^2.0.0",
344 |         "which": "^2.0.1"
345 |       }
346 |     },
347 |     "diff-sequences": {
348 |       "version": "26.6.2",
349 |       "resolved": "https://registry.npmjs.org/diff-sequences/-/diff-sequences-26.6.2.tgz",
350 |       "integrity": "sha512-Mv/TDa3nZ9sbc5soK+OoA74BsS3mL37yixCvUAQkiuA4Wz6YtwP/K47n2rv2ovzHZvoiQeA5FTQOschKkEwB0Q==",
351 |       "dev": true
352 |     },
353 |     "electron-to-chromium": {
354 |       "version": "1.3.633",
355 |       "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.633.tgz",
356 |       "integrity": "sha512-bsVCsONiVX1abkWdH7KtpuDAhsQ3N3bjPYhROSAXE78roJKet0Y5wznA14JE9pzbwSZmSMAW6KiKYf1RvbTJkA==",
357 |       "dev": true
358 |     },
359 |     "end-of-stream": {
360 |       "version": "1.4.4",
361 |       "resolved": "https://registry.npmjs.org/end-of-stream/-/end-of-stream-1.4.4.tgz",
362 |       "integrity": "sha512-+uw1inIHVPQoaVuHzRyXd21icM+cnt4CzD5rW+NC1wjOUSTOs+Te7FOv7AhN7vS9x/oIyhLP5PR1H+phQAHu5Q==",
363 |       "dev": true,
364 |       "requires": {
365 |         "once": "^1.4.0"
366 |       }
367 |     },
368 |     "error-ex": {
369 |       "version": "1.3.2",
370 |       "resolved": "https://registry.npmjs.org/error-ex/-/error-ex-1.3.2.tgz",
371 |       "integrity": "sha512-7dFHNmqeFSEt2ZBsCriorKnn3Z2pj+fd9kmI6QoWw4//DL+icEBfc0U7qJCisqrTsKTjw4fNFy2pW9OqStD84g==",
372 |       "dev": true,
373 |       "requires": {
374 |         "is-arrayish": "^0.2.1"
375 |       }
376 |     },
377 |     "escalade": {
378 |       "version": "3.1.1",
379 |       "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.1.1.tgz",
380 |       "integrity": "sha512-k0er2gUkLf8O0zKJiAhmkTnJlTvINGv7ygDNPbeIsX/TJjGJZHuh9B2UxbsaEkmlEo9MfhrSzmhIlhRlI2GXnw==",
381 |       "dev": true
382 |     },
383 |     "escape-string-regexp": {
384 |       "version": "1.0.5",
385 |       "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
386 |       "integrity": "sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=",
387 |       "dev": true
388 |     },
389 |     "execa": {
390 |       "version": "4.1.0",
391 |       "resolved": "https://registry.npmjs.org/execa/-/execa-4.1.0.tgz",
392 |       "integrity": "sha512-j5W0//W7f8UxAn8hXVnwG8tLwdiUy4FJLcSupCg6maBYZDpyBvTApK7KyuI4bKj8KOh1r2YH+6ucuYtJv1bTZA==",
393 |       "dev": true,
394 |       "requires": {
395 |         "cross-spawn": "^7.0.0",
396 |         "get-stream": "^5.0.0",
397 |         "human-signals": "^1.1.1",
398 |         "is-stream": "^2.0.0",
399 |         "merge-stream": "^2.0.0",
400 |         "npm-run-path": "^4.0.0",
401 |         "onetime": "^5.1.0",
402 |         "signal-exit": "^3.0.2",
403 |         "strip-final-newline": "^2.0.0"
404 |       }
405 |     },
406 |     "find-up": {
407 |       "version": "4.1.0",
408 |       "resolved": "https://registry.npmjs.org/find-up/-/find-up-4.1.0.tgz",
409 |       "integrity": "sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==",
410 |       "dev": true,
411 |       "requires": {
412 |         "locate-path": "^5.0.0",
413 |         "path-exists": "^4.0.0"
414 |       }
415 |     },
416 |     "find-versions": {
417 |       "version": "3.2.0",
418 |       "resolved": "https://registry.npmjs.org/find-versions/-/find-versions-3.2.0.tgz",
419 |       "integrity": "sha512-P8WRou2S+oe222TOCHitLy8zj+SIsVJh52VP4lvXkaFVnOFFdoWv1H1Jjvel1aI6NCFOAaeAVm8qrI0odiLcww==",
420 |       "dev": true,
421 |       "requires": {
422 |         "semver-regex": "^2.0.0"
423 |       }
424 |     },
425 |     "fraction.js": {
426 |       "version": "4.0.13",
427 |       "resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-4.0.13.tgz",
428 |       "integrity": "sha512-E1fz2Xs9ltlUp+qbiyx9wmt2n9dRzPsS11Jtdb8D2o+cC7wr9xkkKsVKJuBX0ST+LVS+LhLO+SbLJNtfWcJvXA==",
429 |       "dev": true
430 |     },
431 |     "get-stream": {
432 |       "version": "5.2.0",
433 |       "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-5.2.0.tgz",
434 |       "integrity": "sha512-nBF+F1rAZVCu/p7rjzgA+Yb4lfYXrpl7a6VmJrU8wF9I1CKvP/QwPNZHnOlwbTkY6dvtFIzFMSyQXbLoTQPRpA==",
435 |       "dev": true,
436 |       "requires": {
437 |         "pump": "^3.0.0"
438 |       }
439 |     },
440 |     "has-flag": {
441 |       "version": "4.0.0",
442 |       "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
443 |       "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
444 |       "dev": true
445 |     },
446 |     "human-signals": {
447 |       "version": "1.1.1",
448 |       "resolved": "https://registry.npmjs.org/human-signals/-/human-signals-1.1.1.tgz",
449 |       "integrity": "sha512-SEQu7vl8KjNL2eoGBLF3+wAjpsNfA9XMlXAYj/3EdaNfAlxKthD1xjEQfGOUhllCGGJVNY34bRr6lPINhNjyZw==",
450 |       "dev": true
451 |     },
452 |     "husky": {
453 |       "version": "4.3.6",
454 |       "resolved": "https://registry.npmjs.org/husky/-/husky-4.3.6.tgz",
455 |       "integrity": "sha512-o6UjVI8xtlWRL5395iWq9LKDyp/9TE7XMOTvIpEVzW638UcGxTmV5cfel6fsk/jbZSTlvfGVJf2svFtybcIZag==",
456 |       "dev": true,
457 |       "requires": {
458 |         "chalk": "^4.0.0",
459 |         "ci-info": "^2.0.0",
460 |         "compare-versions": "^3.6.0",
461 |         "cosmiconfig": "^7.0.0",
462 |         "find-versions": "^3.2.0",
463 |         "opencollective-postinstall": "^2.0.2",
464 |         "pkg-dir": "^4.2.0",
465 |         "please-upgrade-node": "^3.2.0",
466 |         "slash": "^3.0.0",
467 |         "which-pm-runs": "^1.0.0"
468 |       }
469 |     },
470 |     "ignore": {
471 |       "version": "5.1.8",
472 |       "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.1.8.tgz",
473 |       "integrity": "sha512-BMpfD7PpiETpBl/A6S498BaIJ6Y/ABT93ETbby2fP00v4EbvPBXWEoaR1UBPKs3iR53pJY7EtZk5KACI57i1Uw==",
474 |       "dev": true
475 |     },
476 |     "import-fresh": {
477 |       "version": "3.3.0",
478 |       "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz",
479 |       "integrity": "sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==",
480 |       "dev": true,
481 |       "requires": {
482 |         "parent-module": "^1.0.0",
483 |         "resolve-from": "^4.0.0"
484 |       }
485 |     },
486 |     "is-arrayish": {
487 |       "version": "0.2.1",
488 |       "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz",
489 |       "integrity": "sha1-d8mYQFJ6qOyxqLppe4BkWnqSap0=",
490 |       "dev": true
491 |     },
492 |     "is-stream": {
493 |       "version": "2.0.0",
494 |       "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-2.0.0.tgz",
495 |       "integrity": "sha512-XCoy+WlUr7d1+Z8GgSuXmpuUFC9fOhRXglJMx+dwLKTkL44Cjd4W1Z5P+BQZpr+cR93aGP4S/s7Ftw6Nd/kiEw==",
496 |       "dev": true
497 |     },
498 |     "isexe": {
499 |       "version": "2.0.0",
500 |       "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
501 |       "integrity": "sha1-6PvzdNxVb/iUehDcsFctYz8s+hA=",
502 |       "dev": true
503 |     },
504 |     "jest-diff": {
505 |       "version": "26.6.2",
506 |       "resolved": "https://registry.npmjs.org/jest-diff/-/jest-diff-26.6.2.tgz",
507 |       "integrity": "sha512-6m+9Z3Gv9wN0WFVasqjCL/06+EFCMTqDEUl/b87HYK2rAPTyfz4ZIuSlPhY51PIQRWx5TaxeF1qmXKe9gfN3sA==",
508 |       "dev": true,
509 |       "requires": {
510 |         "chalk": "^4.0.0",
511 |         "diff-sequences": "^26.6.2",
512 |         "jest-get-type": "^26.3.0",
513 |         "pretty-format": "^26.6.2"
514 |       }
515 |     },
516 |     "jest-get-type": {
517 |       "version": "26.3.0",
518 |       "resolved": "https://registry.npmjs.org/jest-get-type/-/jest-get-type-26.3.0.tgz",
519 |       "integrity": "sha512-TpfaviN1R2pQWkIihlfEanwOXK0zcxrKEE4MlU6Tn7keoXdN6/3gK/xl0yEh8DOunn5pOVGKf8hB4R9gVh04ig==",
520 |       "dev": true
521 |     },
522 |     "js-tokens": {
523 |       "version": "4.0.0",
524 |       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
525 |       "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==",
526 |       "dev": true
527 |     },
528 |     "json-parse-even-better-errors": {
529 |       "version": "2.3.1",
530 |       "resolved": "https://registry.npmjs.org/json-parse-even-better-errors/-/json-parse-even-better-errors-2.3.1.tgz",
531 |       "integrity": "sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==",
532 |       "dev": true
533 |     },
534 |     "lines-and-columns": {
535 |       "version": "1.1.6",
536 |       "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.1.6.tgz",
537 |       "integrity": "sha1-HADHQ7QzzQpOgHWPe2SldEDZ/wA=",
538 |       "dev": true
539 |     },
540 |     "locate-path": {
541 |       "version": "5.0.0",
542 |       "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz",
543 |       "integrity": "sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==",
544 |       "dev": true,
545 |       "requires": {
546 |         "p-locate": "^4.1.0"
547 |       }
548 |     },
549 |     "merge-stream": {
550 |       "version": "2.0.0",
551 |       "resolved": "https://registry.npmjs.org/merge-stream/-/merge-stream-2.0.0.tgz",
552 |       "integrity": "sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w==",
553 |       "dev": true
554 |     },
555 |     "mimic-fn": {
556 |       "version": "2.1.0",
557 |       "resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-2.1.0.tgz",
558 |       "integrity": "sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==",
559 |       "dev": true
560 |     },
561 |     "minimatch": {
562 |       "version": "3.0.4",
563 |       "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.4.tgz",
564 |       "integrity": "sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==",
565 |       "dev": true,
566 |       "requires": {
567 |         "brace-expansion": "^1.1.7"
568 |       }
569 |     },
570 |     "mri": {
571 |       "version": "1.1.6",
572 |       "resolved": "https://registry.npmjs.org/mri/-/mri-1.1.6.tgz",
573 |       "integrity": "sha512-oi1b3MfbyGa7FJMP9GmLTttni5JoICpYBRlq+x5V16fZbLsnL9N3wFqqIm/nIG43FjUFkFh9Epzp/kzUGUnJxQ==",
574 |       "dev": true
575 |     },
576 |     "multimatch": {
577 |       "version": "4.0.0",
578 |       "resolved": "https://registry.npmjs.org/multimatch/-/multimatch-4.0.0.tgz",
579 |       "integrity": "sha512-lDmx79y1z6i7RNx0ZGCPq1bzJ6ZoDDKbvh7jxr9SJcWLkShMzXrHbYVpTdnhNM5MXpDUxCQ4DgqVttVXlBgiBQ==",
580 |       "dev": true,
581 |       "requires": {
582 |         "@types/minimatch": "^3.0.3",
583 |         "array-differ": "^3.0.0",
584 |         "array-union": "^2.1.0",
585 |         "arrify": "^2.0.1",
586 |         "minimatch": "^3.0.4"
587 |       }
588 |     },
589 |     "nanoid": {
590 |       "version": "3.1.20",
591 |       "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.1.20.tgz",
592 |       "integrity": "sha512-a1cQNyczgKbLX9jwbS/+d7W8fX/RfgYR7lVWwWOGIPNgK2m0MWvrGF6/m4kk6U3QcFMnZf3RIhL0v2Jgh/0Uxw==",
593 |       "dev": true
594 |     },
595 |     "node-releases": {
596 |       "version": "1.1.67",
597 |       "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-1.1.67.tgz",
598 |       "integrity": "sha512-V5QF9noGFl3EymEwUYzO+3NTDpGfQB4ve6Qfnzf3UNydMhjQRVPR1DZTuvWiLzaFJYw2fmDwAfnRNEVb64hSIg==",
599 |       "dev": true
600 |     },
601 |     "normalize-range": {
602 |       "version": "0.1.2",
603 |       "resolved": "https://registry.npmjs.org/normalize-range/-/normalize-range-0.1.2.tgz",
604 |       "integrity": "sha1-LRDAa9/TEuqXd2laTShDlFa3WUI=",
605 |       "dev": true
606 |     },
607 |     "npm-run-path": {
608 |       "version": "4.0.1",
609 |       "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-4.0.1.tgz",
610 |       "integrity": "sha512-S48WzZW777zhNIrn7gxOlISNAqi9ZC/uQFnRdbeIHhZhCA6UqpkOT8T1G7BvfdgP4Er8gF4sUbaS0i7QvIfCWw==",
611 |       "dev": true,
612 |       "requires": {
613 |         "path-key": "^3.0.0"
614 |       }
615 |     },
616 |     "once": {
617 |       "version": "1.4.0",
618 |       "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
619 |       "integrity": "sha1-WDsap3WWHUsROsF9nFC6753Xa9E=",
620 |       "dev": true,
621 |       "requires": {
622 |         "wrappy": "1"
623 |       }
624 |     },
625 |     "onetime": {
626 |       "version": "5.1.2",
627 |       "resolved": "https://registry.npmjs.org/onetime/-/onetime-5.1.2.tgz",
628 |       "integrity": "sha512-kbpaSSGJTWdAY5KPVeMOKXSrPtr8C8C7wodJbcsd51jRnmD+GZu8Y0VoU6Dm5Z4vWr0Ig/1NKuWRKf7j5aaYSg==",
629 |       "dev": true,
630 |       "requires": {
631 |         "mimic-fn": "^2.1.0"
632 |       }
633 |     },
634 |     "opencollective-postinstall": {
635 |       "version": "2.0.3",
636 |       "resolved": "https://registry.npmjs.org/opencollective-postinstall/-/opencollective-postinstall-2.0.3.tgz",
637 |       "integrity": "sha512-8AV/sCtuzUeTo8gQK5qDZzARrulB3egtLzFgteqB2tcT4Mw7B8Kt7JcDHmltjz6FOAHsvTevk70gZEbhM4ZS9Q==",
638 |       "dev": true
639 |     },
640 |     "p-limit": {
641 |       "version": "2.3.0",
642 |       "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.3.0.tgz",
643 |       "integrity": "sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==",
644 |       "dev": true,
645 |       "requires": {
646 |         "p-try": "^2.0.0"
647 |       }
648 |     },
649 |     "p-locate": {
650 |       "version": "4.1.0",
651 |       "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-4.1.0.tgz",
652 |       "integrity": "sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==",
653 |       "dev": true,
654 |       "requires": {
655 |         "p-limit": "^2.2.0"
656 |       }
657 |     },
658 |     "p-try": {
659 |       "version": "2.2.0",
660 |       "resolved": "https://registry.npmjs.org/p-try/-/p-try-2.2.0.tgz",
661 |       "integrity": "sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==",
662 |       "dev": true
663 |     },
664 |     "parent-module": {
665 |       "version": "1.0.1",
666 |       "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz",
667 |       "integrity": "sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==",
668 |       "dev": true,
669 |       "requires": {
670 |         "callsites": "^3.0.0"
671 |       }
672 |     },
673 |     "parse-json": {
674 |       "version": "5.1.0",
675 |       "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-5.1.0.tgz",
676 |       "integrity": "sha512-+mi/lmVVNKFNVyLXV31ERiy2CY5E1/F6QtJFEzoChPRwwngMNXRDQ9GJ5WdE2Z2P4AujsOi0/+2qHID68KwfIQ==",
677 |       "dev": true,
678 |       "requires": {
679 |         "@babel/code-frame": "^7.0.0",
680 |         "error-ex": "^1.3.1",
681 |         "json-parse-even-better-errors": "^2.3.0",
682 |         "lines-and-columns": "^1.1.6"
683 |       }
684 |     },
685 |     "path-exists": {
686 |       "version": "4.0.0",
687 |       "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
688 |       "integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==",
689 |       "dev": true
690 |     },
691 |     "path-key": {
692 |       "version": "3.1.1",
693 |       "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
694 |       "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==",
695 |       "dev": true
696 |     },
697 |     "path-type": {
698 |       "version": "4.0.0",
699 |       "resolved": "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz",
700 |       "integrity": "sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==",
701 |       "dev": true
702 |     },
703 |     "pkg-dir": {
704 |       "version": "4.2.0",
705 |       "resolved": "https://registry.npmjs.org/pkg-dir/-/pkg-dir-4.2.0.tgz",
706 |       "integrity": "sha512-HRDzbaKjC+AOWVXxAU/x54COGeIv9eb+6CkDSQoNTt4XyWoIJvuPsXizxu/Fr23EiekbtZwmh1IcIG/l/a10GQ==",
707 |       "dev": true,
708 |       "requires": {
709 |         "find-up": "^4.0.0"
710 |       }
711 |     },
712 |     "please-upgrade-node": {
713 |       "version": "3.2.0",
714 |       "resolved": "https://registry.npmjs.org/please-upgrade-node/-/please-upgrade-node-3.2.0.tgz",
715 |       "integrity": "sha512-gQR3WpIgNIKwBMVLkpMUeR3e1/E1y42bqDQZfql+kDeXd8COYfM8PQA4X6y7a8u9Ua9FHmsrrmirW2vHs45hWg==",
716 |       "dev": true,
717 |       "requires": {
718 |         "semver-compare": "^1.0.0"
719 |       }
720 |     },
721 |     "postcss": {
722 |       "version": "8.2.1",
723 |       "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.2.1.tgz",
724 |       "integrity": "sha512-RhsqOOAQzTgh1UB/IZdca7F9WDb7SUCR2Vnv1x7DbvuuggQIpoDwjK+q0rzoPffhYvWNKX5JSwS4so4K3UC6vA==",
725 |       "dev": true,
726 |       "requires": {
727 |         "colorette": "^1.2.1",
728 |         "nanoid": "^3.1.20",
729 |         "source-map": "^0.6.1"
730 |       }
731 |     },
732 |     "postcss-value-parser": {
733 |       "version": "4.1.0",
734 |       "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.1.0.tgz",
735 |       "integrity": "sha512-97DXOFbQJhk71ne5/Mt6cOu6yxsSfM0QGQyl0L25Gca4yGWEGJaig7l7gbCX623VqTBNGLRLaVUCnNkcedlRSQ==",
736 |       "dev": true
737 |     },
738 |     "prettier": {
739 |       "version": "2.2.1",
740 |       "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.2.1.tgz",
741 |       "integrity": "sha512-PqyhM2yCjg/oKkFPtTGUojv7gnZAoG80ttl45O6x2Ug/rMJw4wcc9k6aaf2hibP7BGVCCM33gZoGjyvt9mm16Q==",
742 |       "dev": true
743 |     },
744 |     "pretty-format": {
745 |       "version": "26.6.2",
746 |       "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-26.6.2.tgz",
747 |       "integrity": "sha512-7AeGuCYNGmycyQbCqd/3PWH4eOoX/OiCa0uphp57NVTeAGdJGaAliecxwBDHYQCIvrW7aDBZCYeNTP/WX69mkg==",
748 |       "dev": true,
749 |       "requires": {
750 |         "@jest/types": "^26.6.2",
751 |         "ansi-regex": "^5.0.0",
752 |         "ansi-styles": "^4.0.0",
753 |         "react-is": "^17.0.1"
754 |       }
755 |     },
756 |     "pretty-quick": {
757 |       "version": "3.1.0",
758 |       "resolved": "https://registry.npmjs.org/pretty-quick/-/pretty-quick-3.1.0.tgz",
759 |       "integrity": "sha512-DtxIxksaUWCgPFN7E1ZZk4+Aav3CCuRdhrDSFZENb404sYMtuo9Zka823F+Mgeyt8Zt3bUiCjFzzWYE9LYqkmQ==",
760 |       "dev": true,
761 |       "requires": {
762 |         "chalk": "^3.0.0",
763 |         "execa": "^4.0.0",
764 |         "find-up": "^4.1.0",
765 |         "ignore": "^5.1.4",
766 |         "mri": "^1.1.5",
767 |         "multimatch": "^4.0.0"
768 |       },
769 |       "dependencies": {
770 |         "chalk": {
771 |           "version": "3.0.0",
772 |           "resolved": "https://registry.npmjs.org/chalk/-/chalk-3.0.0.tgz",
773 |           "integrity": "sha512-4D3B6Wf41KOYRFdszmDqMCGq5VV/uMAB273JILmO+3jAlh8X4qDtdtgCR3fxtbLEMzSx22QdhnDcJvu2u1fVwg==",
774 |           "dev": true,
775 |           "requires": {
776 |             "ansi-styles": "^4.1.0",
777 |             "supports-color": "^7.1.0"
778 |           }
779 |         }
780 |       }
781 |     },
782 |     "pump": {
783 |       "version": "3.0.0",
784 |       "resolved": "https://registry.npmjs.org/pump/-/pump-3.0.0.tgz",
785 |       "integrity": "sha512-LwZy+p3SFs1Pytd/jYct4wpv49HiYCqd9Rlc5ZVdk0V+8Yzv6jR5Blk3TRmPL1ft69TxP0IMZGJ+WPFU2BFhww==",
786 |       "dev": true,
787 |       "requires": {
788 |         "end-of-stream": "^1.1.0",
789 |         "once": "^1.3.1"
790 |       }
791 |     },
792 |     "react-is": {
793 |       "version": "17.0.1",
794 |       "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.1.tgz",
795 |       "integrity": "sha512-NAnt2iGDXohE5LI7uBnLnqvLQMtzhkiAOLXTmv+qnF9Ky7xAPcX8Up/xWIhxvLVGJvuLiNc4xQLtuqDRzb4fSA==",
796 |       "dev": true
797 |     },
798 |     "resolve-from": {
799 |       "version": "4.0.0",
800 |       "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
801 |       "integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==",
802 |       "dev": true
803 |     },
804 |     "semver-compare": {
805 |       "version": "1.0.0",
806 |       "resolved": "https://registry.npmjs.org/semver-compare/-/semver-compare-1.0.0.tgz",
807 |       "integrity": "sha1-De4hahyUGrN+nvsXiPavxf9VN/w=",
808 |       "dev": true
809 |     },
810 |     "semver-regex": {
811 |       "version": "2.0.0",
812 |       "resolved": "https://registry.npmjs.org/semver-regex/-/semver-regex-2.0.0.tgz",
813 |       "integrity": "sha512-mUdIBBvdn0PLOeP3TEkMH7HHeUP3GjsXCwKarjv/kGmUFOYg1VqEemKhoQpWMu6X2I8kHeuVdGibLGkVK+/5Qw==",
814 |       "dev": true
815 |     },
816 |     "shebang-command": {
817 |       "version": "2.0.0",
818 |       "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
819 |       "integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==",
820 |       "dev": true,
821 |       "requires": {
822 |         "shebang-regex": "^3.0.0"
823 |       }
824 |     },
825 |     "shebang-regex": {
826 |       "version": "3.0.0",
827 |       "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz",
828 |       "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==",
829 |       "dev": true
830 |     },
831 |     "signal-exit": {
832 |       "version": "3.0.3",
833 |       "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.3.tgz",
834 |       "integrity": "sha512-VUJ49FC8U1OxwZLxIbTTrDvLnf/6TDgxZcK8wxR8zs13xpx7xbG60ndBlhNrFi2EMuFRoeDoJO7wthSLq42EjA==",
835 |       "dev": true
836 |     },
837 |     "slash": {
838 |       "version": "3.0.0",
839 |       "resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz",
840 |       "integrity": "sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==",
841 |       "dev": true
842 |     },
843 |     "source-map": {
844 |       "version": "0.6.1",
845 |       "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
846 |       "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
847 |       "dev": true
848 |     },
849 |     "strip-final-newline": {
850 |       "version": "2.0.0",
851 |       "resolved": "https://registry.npmjs.org/strip-final-newline/-/strip-final-newline-2.0.0.tgz",
852 |       "integrity": "sha512-BrpvfNAE3dcvq7ll3xVumzjKjZQ5tI1sEUIKr3Uoks0XUl45St3FlatVqef9prk4jRDzhW6WZg+3bk93y6pLjA==",
853 |       "dev": true
854 |     },
855 |     "supports-color": {
856 |       "version": "7.2.0",
857 |       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
858 |       "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
859 |       "dev": true,
860 |       "requires": {
861 |         "has-flag": "^4.0.0"
862 |       }
863 |     },
864 |     "which": {
865 |       "version": "2.0.2",
866 |       "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
867 |       "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
868 |       "dev": true,
869 |       "requires": {
870 |         "isexe": "^2.0.0"
871 |       }
872 |     },
873 |     "which-pm-runs": {
874 |       "version": "1.0.0",
875 |       "resolved": "https://registry.npmjs.org/which-pm-runs/-/which-pm-runs-1.0.0.tgz",
876 |       "integrity": "sha1-Zws6+8VS4LVd9rd4DKdGFfI60cs=",
877 |       "dev": true
878 |     },
879 |     "wrappy": {
880 |       "version": "1.0.2",
881 |       "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
882 |       "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=",
883 |       "dev": true
884 |     },
885 |     "yaml": {
886 |       "version": "1.10.0",
887 |       "resolved": "https://registry.npmjs.org/yaml/-/yaml-1.10.0.tgz",
888 |       "integrity": "sha512-yr2icI4glYaNG+KWONODapy2/jDdMSDnrONSjblABjD9B4Z5LgiircSt8m8sRZFNi08kG9Sm0uSHtEmP3zaEGg==",
889 |       "dev": true
890 |     }
891 |   }
892 | }
893 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "web-photo-filter",
 3 |   "version": "3.1.1",
 4 |   "description": "A web component to apply Instagram-like WebGL filters to photos",
 5 |   "main": "dist/index.cjs.js",
 6 |   "module": "dist/index.js",
 7 |   "es2015": "dist/esm/index.js",
 8 |   "es2017": "dist/esm/index.js",
 9 |   "jsnext:main": "dist/esm/index.js",
10 |   "types": "dist/types/index.d.ts",
11 |   "collection": "dist/collection/collection-manifest.json",
12 |   "collection:main": "dist/collection/index.js",
13 |   "unpkg": "dist/webphotofilter/webphotofilter.esm.js",
14 |   "files": [
15 |     "dist/",
16 |     "README.md",
17 |     "LICENSE"
18 |   ],
19 |   "scripts": {
20 |     "build": "stencil build --docs",
21 |     "start": "stencil build --dev --watch --serve",
22 |     "web": "stencil build"
23 |   },
24 |   "dependencies": {},
25 |   "devDependencies": {
26 |     "@stencil/core": "^2.3.0",
27 |     "@stencil/postcss": "^2.0.0",
28 |     "@stencil/sass": "^1.4.1",
29 |     "@types/jest": "^26.0.19",
30 |     "autoprefixer": "^10.1.0",
31 |     "husky": "4.3.6",
32 |     "prettier": "2.2.1",
33 |     "pretty-quick": "3.1.0"
34 |   },
35 |   "repository": {
36 |     "type": "git",
37 |     "url": "git+https://github.com/peterpeterparker/web-photo-filter.git"
38 |   },
39 |   "author": "David Dal Busco",
40 |   "license": "MIT",
41 |   "bugs": {
42 |     "url": "https://github.com/peterpeterparker/web-photo-filter"
43 |   },
44 |   "homepage": "https://webphotofilter.com",
45 |   "keywords": [
46 |     "photo",
47 |     "image",
48 |     "canvas",
49 |     "instagram",
50 |     "filter",
51 |     "effect",
52 |     "webgl",
53 |     "web component",
54 |     "stencil"
55 |   ],
56 |   "husky": {
57 |     "hooks": {
58 |       "pre-commit": "pretty-quick --staged"
59 |     }
60 |   }
61 | }
62 | 


--------------------------------------------------------------------------------
/src/components.d.ts:
--------------------------------------------------------------------------------
 1 | /* eslint-disable */
 2 | /* tslint:disable */
 3 | /**
 4 |  * This is an autogenerated file created by the Stencil compiler.
 5 |  * It contains typing information for all components that exist in this project.
 6 |  */
 7 | import { HTMLStencilElement, JSXBase } from "@stencil/core/internal";
 8 | import { WebPhotoFilterResult } from "./types/web-photo-filter/web-photo-filter-result";
 9 | export namespace Components {
10 |     interface WebPhotoFilter {
11 |         /**
12 |           * A comma separated list of filter to apply on the source image. If no filter is provided, the source image as it will be displayed. Current filter are supported: 'sepia', 'blue_monotone', 'violent_tomato', 'greyscale', 'desaturate', 'brightness', 'saturation', 'contrast', 'hue', 'cookie', 'vintage', 'koda', 'technicolor', 'polaroid', 'bgr'.
13 |          */
14 |         "filter": string;
15 |         /**
16 |           * An optional level to apply the filter. If multiple filter are provided, it applies to all except if a specific level is provided for a filter, such as saturation(1.1)
17 |          */
18 |         "level": number;
19 |         /**
20 |           * The source of the image.
21 |          */
22 |         "src": string;
23 |     }
24 | }
25 | declare global {
26 |     interface HTMLWebPhotoFilterElement extends Components.WebPhotoFilter, HTMLStencilElement {
27 |     }
28 |     var HTMLWebPhotoFilterElement: {
29 |         prototype: HTMLWebPhotoFilterElement;
30 |         new (): HTMLWebPhotoFilterElement;
31 |     };
32 |     interface HTMLElementTagNameMap {
33 |         "web-photo-filter": HTMLWebPhotoFilterElement;
34 |     }
35 | }
36 | declare namespace LocalJSX {
37 |     interface WebPhotoFilter {
38 |         /**
39 |           * A comma separated list of filter to apply on the source image. If no filter is provided, the source image as it will be displayed. Current filter are supported: 'sepia', 'blue_monotone', 'violent_tomato', 'greyscale', 'desaturate', 'brightness', 'saturation', 'contrast', 'hue', 'cookie', 'vintage', 'koda', 'technicolor', 'polaroid', 'bgr'.
40 |          */
41 |         "filter"?: string;
42 |         /**
43 |           * An optional level to apply the filter. If multiple filter are provided, it applies to all except if a specific level is provided for a filter, such as saturation(1.1)
44 |          */
45 |         "level"?: number;
46 |         /**
47 |           * An event emitted each times a filter is applied. It provides information about the webgl context (is is supported?) and emit either the image, if filter can not be applied, or the resulting canvas.
48 |          */
49 |         "onFilterLoad"?: (event: CustomEvent<WebPhotoFilterResult>) => void;
50 |         /**
51 |           * The source of the image.
52 |          */
53 |         "src"?: string;
54 |     }
55 |     interface IntrinsicElements {
56 |         "web-photo-filter": WebPhotoFilter;
57 |     }
58 | }
59 | export { LocalJSX as JSX };
60 | declare module "@stencil/core" {
61 |     export namespace JSX {
62 |         interface IntrinsicElements {
63 |             "web-photo-filter": LocalJSX.WebPhotoFilter & JSXBase.HTMLAttributes<HTMLWebPhotoFilterElement>;
64 |         }
65 |     }
66 | }
67 | 


--------------------------------------------------------------------------------
/src/components/web-photo-filter/readme.md:
--------------------------------------------------------------------------------
 1 | # web-photo-filter
 2 | 
 3 | <!-- Auto Generated Below -->
 4 | 
 5 | ## Properties
 6 | 
 7 | | Property | Attribute | Description                                                                                                                                                                                                                                                                                                                                           | Type     | Default     |
 8 | | -------- | --------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | ----------- |
 9 | | `filter` | `filter`  | A comma separated list of filter to apply on the source image. If no filter is provided, the source image as it will be displayed. Current filter are supported: 'sepia', 'blue_monotone', 'violent_tomato', 'greyscale', 'desaturate', 'brightness', 'saturation', 'contrast', 'hue', 'cookie', 'vintage', 'koda', 'technicolor', 'polaroid', 'bgr'. | `string` | `undefined` |
10 | | `level`  | `level`   | An optional level to apply the filter. If multiple filter are provided, it applies to all except if a specific level is provided for a filter, such as saturation(1.1)                                                                                                                                                                                | `number` | `undefined` |
11 | | `src`    | `src`     | The source of the image.                                                                                                                                                                                                                                                                                                                              | `string` | `undefined` |
12 | 
13 | ## Events
14 | 
15 | | Event        | Description                                                                                                                                                                                           | Type                                |
16 | | ------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------- |
17 | | `filterLoad` | An event emitted each times a filter is applied. It provides information about the webgl context (is is supported?) and emit either the image, if filter can not be applied, or the resulting canvas. | `CustomEvent<WebPhotoFilterResult>` |
18 | 
19 | ## Shadow Parts
20 | 
21 | | Part       | Description                                                |
22 | | ---------- | ---------------------------------------------------------- |
23 | | `"canvas"` | The part attribute to access the resulting filtered canvas |
24 | | `"img"`    | The part attribute to access the source image              |
25 | 
26 | ---
27 | 
28 | _Built with [StencilJS](https://stenciljs.com/)_
29 | 


--------------------------------------------------------------------------------
/src/components/web-photo-filter/web-photo-filter.scss:
--------------------------------------------------------------------------------
1 | img {
2 |   display: none;
3 | 
4 |   &.display-no-filter {
5 |     display: block;
6 |   }
7 | }
8 | 


--------------------------------------------------------------------------------
/src/components/web-photo-filter/web-photo-filter.tsx:
--------------------------------------------------------------------------------
  1 | import {Component, Event, EventEmitter, Prop, h, Element, Watch} from '@stencil/core';
  2 | 
  3 | import {WebPhotoFilterType} from '../../types/web-photo-filter/web-photo-filter-type';
  4 | import {WebPhotoFilterResult} from '../../types/web-photo-filter/web-photo-filter-result';
  5 | 
  6 | /**
  7 |  * @part img - The part attribute to access the source image
  8 |  * @part canvas - The part attribute to access the resulting filtered canvas
  9 |  */
 10 | @Component({
 11 |   tag: 'web-photo-filter',
 12 |   styleUrl: 'web-photo-filter.scss',
 13 |   shadow: true,
 14 | })
 15 | export class WebPhotoFilterComponent {
 16 |   @Element() el: HTMLElement;
 17 | 
 18 |   /**
 19 |    * The source of the image.
 20 |    */
 21 |   @Prop() src: string;
 22 | 
 23 |   /**
 24 |    * A comma separated list of filter to apply on the source image. If no filter is provided, the source image as it will be displayed. Current filter are supported: 'sepia', 'blue_monotone', 'violent_tomato', 'greyscale', 'desaturate', 'brightness', 'saturation', 'contrast', 'hue', 'cookie', 'vintage', 'koda', 'technicolor', 'polaroid', 'bgr'.
 25 |    */
 26 |   @Prop() filter: string;
 27 | 
 28 |   /**
 29 |    * An optional level to apply the filter. If multiple filter are provided, it applies to all except if a specific level is provided for a filter, such as saturation(1.1)
 30 |    */
 31 |   @Prop() level: number;
 32 | 
 33 |   /**
 34 |    * An event emitted each times a filter is applied. It provides information about the webgl context (is is supported?) and emit either the image, if filter can not be applied, or the resulting canvas.
 35 |    */
 36 |   @Event() filterLoad: EventEmitter<WebPhotoFilterResult>;
 37 | 
 38 |   private imgRef!: HTMLImageElement;
 39 | 
 40 |   private createWebGLProgram(ctx, vertexShaderSource, fragmentShaderSource) {
 41 |     const compileShader = (shaderSource, shaderType) => {
 42 |       let shader = ctx.createShader(shaderType);
 43 |       ctx.shaderSource(shader, shaderSource);
 44 |       ctx.compileShader(shader);
 45 |       return shader;
 46 |     };
 47 | 
 48 |     let program = ctx.createProgram();
 49 |     ctx.attachShader(program, compileShader(vertexShaderSource, ctx.VERTEX_SHADER));
 50 |     ctx.attachShader(program, compileShader(fragmentShaderSource, ctx.FRAGMENT_SHADER));
 51 |     ctx.linkProgram(program);
 52 |     ctx.useProgram(program);
 53 | 
 54 |     return program;
 55 |   }
 56 | 
 57 |   private readonly vertexShaderSource = `
 58 |     attribute vec2 a_position;
 59 |     attribute vec2 a_texCoord;
 60 |     uniform vec2 u_resolution;
 61 |     varying vec2 v_texCoord;
 62 |     uniform float flipY;
 63 | 
 64 |     void main() {
 65 |        vec2 clipSpace = (a_position / u_resolution) * 2.0 - 1.0; // convert the rectangle from pixels to clipspace
 66 |        gl_Position = vec4(clipSpace * vec2(1, flipY), 0, 1);
 67 |        v_texCoord = a_texCoord; // pass the texCoord to the fragment shader
 68 |     }
 69 |   `;
 70 | 
 71 |   private readonly fragmentShaderSource = `
 72 |     precision mediump float;
 73 |     uniform sampler2D u_image; // the texture
 74 |     uniform mat4 u_matrix;
 75 |     uniform vec4 u_multiplier;
 76 |     varying vec2 v_texCoord; // the texCoords passed from the vertex shader.
 77 | 
 78 |     void main() {
 79 |       vec4 color = texture2D(u_image, v_texCoord);
 80 |       mat4 colMat = mat4(
 81 |       color.r, 0, 0, 0,
 82 |       0, color.g, 0, 0,
 83 |       0, 0, color.b, 0,
 84 |       0, 0, 0, color.a
 85 |       );
 86 |       mat4 product = colMat * u_matrix;
 87 |       color.r = product[0].x + product[0].y + product[0].z + product[0].w + u_multiplier[0];
 88 |       color.g = product[1].x + product[1].y + product[1].z + product[1].w + u_multiplier[1];
 89 |       color.b = product[2].x + product[2].y + product[2].z + product[2].w + u_multiplier[2];
 90 |       color.a = product[3].x + product[3].y + product[3].z + product[3].w  + u_multiplier[3];
 91 |       gl_FragColor = color;
 92 |     }
 93 |   `;
 94 | 
 95 |   @Watch('filter')
 96 |   onFilterChange() {
 97 |     this.applyFilter();
 98 |   }
 99 | 
100 |   private applyFilter() {
101 |     const filterList: string[] = this.filter?.split(',');
102 | 
103 |     const matrix: number[][] = filterList
104 |       ?.map((filter: string) => {
105 |         const extractLevel = /\((.*)\)/;
106 |         const matches = extractLevel.exec(filter);
107 | 
108 |         const level: number | undefined = matches && matches.length >= 1 ? parseFloat(matches[1]) : this.level;
109 | 
110 |         return WebPhotoFilterType.getFilter(filter?.replace(/\((.*)\)/, '')?.trim(), level);
111 |       })
112 |       ?.filter((matrix: number[] | null) => matrix !== null);
113 | 
114 |     if (matrix === undefined) {
115 |       // We consider null as NO_FILTER, in that case the img will be emitted
116 |       // Furthermore, we explicity displays it
117 |       this.imgRef?.classList.add('display-no-filter');
118 |       this.emitFilterApplied(this.imgRef, this.hasValidWegGLContext());
119 |       return;
120 |     }
121 | 
122 |     // In case the filter is applied after having displayed no filter
123 |     this.imgRef?.classList.remove('display-no-filter');
124 | 
125 |     this.desaturateImage(matrix);
126 |   }
127 | 
128 |   private emitFilterApplied(result: HTMLElement, webGlState: boolean) {
129 |     this.filterLoad.emit({webGLDetected: webGlState, result: result});
130 |   }
131 | 
132 |   private desaturateImage(matrix: number[][]) {
133 |     const canvas: HTMLCanvasElement = this.createCanvas();
134 | 
135 |     let ctx: WebGLRenderingContext;
136 |     try {
137 |       ctx = canvas.getContext('webgl', {preserveDrawingBuffer: true});
138 |     } catch (e) {
139 |       // In case we couldn't instantiate WebGL, do nothing
140 |       this.emitFilterApplied(this.imgRef, false);
141 |       return;
142 |     }
143 | 
144 |     if (!ctx) {
145 |       // WebGL not supported. A fallback could be 2D methods, but that would not be performing
146 |       this.emitFilterApplied(this.imgRef, false);
147 |       return;
148 |     }
149 | 
150 |     // Create a texture.
151 |     const texture = this.createRootTexture(ctx);
152 | 
153 |     const steps = matrix.map(() => this.createFramebufferTexture(ctx));
154 | 
155 |     matrix.forEach((mat: number[], index: number) => {
156 |       this.applyMatrix(ctx, mat, index < matrix.length - 1 ? steps[index].target : null, index > 0 ? steps[index - 1].source : texture);
157 |     });
158 | 
159 |     this.appendCanvas(canvas);
160 | 
161 |     // The filter was applied, we emit the canvas not the source image
162 |     this.emitFilterApplied(canvas, true);
163 |   }
164 | 
165 |   private createCanvas() {
166 |     const canvas: HTMLCanvasElement = document.createElement('canvas');
167 | 
168 |     canvas.setAttribute('part', 'canvas');
169 | 
170 |     canvas.width = this.imgRef?.naturalWidth;
171 |     canvas.height = this.imgRef?.naturalHeight;
172 | 
173 |     return canvas;
174 |   }
175 | 
176 |   private appendCanvas(canvas: HTMLCanvasElement) {
177 |     const current: HTMLCanvasElement | null = this.el.shadowRoot.querySelector('canvas');
178 |     if (current) {
179 |       this.el.shadowRoot.removeChild(current);
180 |     }
181 | 
182 |     this.el.shadowRoot.insertBefore(canvas, this.el.shadowRoot.firstChild);
183 |   }
184 | 
185 |   private createRootTexture(ctx: WebGLRenderingContext): WebGLTexture {
186 |     const texture: WebGLTexture = ctx.createTexture();
187 |     ctx.bindTexture(WebGLRenderingContext.TEXTURE_2D, texture);
188 |     // Set the parameters so we can render any size image.
189 |     ctx.texParameteri(WebGLRenderingContext.TEXTURE_2D, WebGLRenderingContext.TEXTURE_WRAP_S, WebGLRenderingContext.CLAMP_TO_EDGE);
190 |     ctx.texParameteri(WebGLRenderingContext.TEXTURE_2D, WebGLRenderingContext.TEXTURE_WRAP_T, WebGLRenderingContext.CLAMP_TO_EDGE);
191 |     ctx.texParameteri(WebGLRenderingContext.TEXTURE_2D, WebGLRenderingContext.TEXTURE_MIN_FILTER, WebGLRenderingContext.NEAREST);
192 |     ctx.texParameteri(WebGLRenderingContext.TEXTURE_2D, WebGLRenderingContext.TEXTURE_MAG_FILTER, WebGLRenderingContext.NEAREST);
193 |     // Load the image into the texture.
194 |     ctx.texImage2D(
195 |       WebGLRenderingContext.TEXTURE_2D,
196 |       0,
197 |       WebGLRenderingContext.RGBA,
198 |       WebGLRenderingContext.RGBA,
199 |       WebGLRenderingContext.UNSIGNED_BYTE,
200 |       this.imgRef
201 |     );
202 |     return texture;
203 |   }
204 | 
205 |   private applyMatrix(ctx: WebGLRenderingContext, feColorMatrix: number[], target: WebGLFramebuffer | null, source: WebGLTexture) {
206 |     const program = this.createWebGLProgram(ctx, this.vertexShaderSource, this.fragmentShaderSource);
207 | 
208 |     // Expose canvas width and height to shader via u_resolution
209 |     const resolutionLocation = ctx.getUniformLocation(program, 'u_resolution');
210 |     ctx.uniform2f(resolutionLocation, ctx.canvas.width, ctx.canvas.height);
211 | 
212 |     // Modify the feColorMatrix to fit better with available shader datatypes by putting the multiplier in a separate vector
213 | 
214 |     // This is a little unrefined but we're dealing with a very specific known data structure
215 | 
216 |     const cloneFeColorMatrix = feColorMatrix.slice();
217 | 
218 |     const feMultiplier = [];
219 |     feMultiplier.push(cloneFeColorMatrix.splice(3, 1)[0]);
220 |     feMultiplier.push(cloneFeColorMatrix.splice(8, 1)[0]);
221 |     feMultiplier.push(cloneFeColorMatrix.splice(12, 1)[0]);
222 |     feMultiplier.push(cloneFeColorMatrix.splice(16, 1)[0]);
223 | 
224 |     // Expose feColorMatrix to shader via u_matrix
225 |     const matrixTransform = ctx.getUniformLocation(program, 'u_matrix');
226 |     ctx.uniformMatrix4fv(matrixTransform, false, new Float32Array(cloneFeColorMatrix));
227 | 
228 |     const multiplier = ctx.getUniformLocation(program, 'u_multiplier');
229 |     ctx.uniform4f(multiplier, feMultiplier[0], feMultiplier[1], feMultiplier[2], feMultiplier[3]);
230 | 
231 |     // Position rectangle vertices (2 triangles)
232 |     const positionLocation = ctx.getAttribLocation(program, 'a_position');
233 |     const buffer = ctx.createBuffer();
234 |     ctx.bindBuffer(WebGLRenderingContext.ARRAY_BUFFER, buffer);
235 |     ctx.bufferData(
236 |       WebGLRenderingContext.ARRAY_BUFFER,
237 |       new Float32Array([
238 |         0,
239 |         0,
240 |         this.imgRef.naturalWidth,
241 |         0,
242 |         0,
243 |         this.imgRef.naturalHeight,
244 |         0,
245 |         this.imgRef.naturalHeight,
246 |         this.imgRef.naturalWidth,
247 |         0,
248 |         this.imgRef.naturalWidth,
249 |         this.imgRef.naturalHeight,
250 |       ]),
251 |       WebGLRenderingContext.STATIC_DRAW
252 |     );
253 |     ctx.enableVertexAttribArray(positionLocation);
254 |     ctx.vertexAttribPointer(positionLocation, 2, WebGLRenderingContext.FLOAT, false, 0, 0);
255 | 
256 |     //Position texture
257 |     const texCoordLocation = ctx.getAttribLocation(program, 'a_texCoord');
258 |     const texCoordBuffer = ctx.createBuffer();
259 |     ctx.bindBuffer(WebGLRenderingContext.ARRAY_BUFFER, texCoordBuffer);
260 |     ctx.bufferData(
261 |       WebGLRenderingContext.ARRAY_BUFFER,
262 |       new Float32Array([0.0, 0.0, 1.0, 0.0, 0.0, 1.0, 0.0, 1.0, 1.0, 0.0, 1.0, 1.0]),
263 |       WebGLRenderingContext.STATIC_DRAW
264 |     );
265 |     ctx.enableVertexAttribArray(texCoordLocation);
266 |     ctx.vertexAttribPointer(texCoordLocation, 2, WebGLRenderingContext.FLOAT, false, 0, 0);
267 | 
268 |     // Bind the source and target and draw the two triangles
269 |     ctx.bindTexture(WebGLRenderingContext.TEXTURE_2D, source);
270 |     ctx.bindFramebuffer(WebGLRenderingContext.FRAMEBUFFER, target);
271 | 
272 |     // We may have to flip if last target
273 |     const flipY = target === null;
274 |     const uniformFlipY = ctx.getUniformLocation(program, 'flipY');
275 |     ctx.uniform1f(uniformFlipY, flipY ? -1 : 1);
276 | 
277 |     // Draw the rectangle.
278 |     ctx.drawArrays(WebGLRenderingContext.TRIANGLES, 0, 6);
279 |   }
280 | 
281 |   private createFramebufferTexture(ctx: WebGLRenderingContext): {target: WebGLFramebuffer; source: WebGLTexture} {
282 |     const fbo: WebGLFramebuffer = ctx.createFramebuffer();
283 |     ctx.bindFramebuffer(ctx.FRAMEBUFFER, fbo);
284 | 
285 |     const renderbuffer = ctx.createRenderbuffer();
286 |     ctx.bindRenderbuffer(ctx.RENDERBUFFER, renderbuffer);
287 | 
288 |     const texture: WebGLTexture = ctx.createTexture();
289 |     ctx.bindTexture(ctx.TEXTURE_2D, texture);
290 |     ctx.texImage2D(ctx.TEXTURE_2D, 0, ctx.RGBA, this.imgRef.naturalWidth, this.imgRef.naturalHeight, 0, ctx.RGBA, ctx.UNSIGNED_BYTE, null);
291 | 
292 |     ctx.texParameteri(ctx.TEXTURE_2D, ctx.TEXTURE_MAG_FILTER, ctx.LINEAR);
293 |     ctx.texParameteri(ctx.TEXTURE_2D, ctx.TEXTURE_MIN_FILTER, ctx.LINEAR);
294 |     ctx.texParameteri(ctx.TEXTURE_2D, ctx.TEXTURE_WRAP_S, ctx.CLAMP_TO_EDGE);
295 |     ctx.texParameteri(ctx.TEXTURE_2D, ctx.TEXTURE_WRAP_T, ctx.CLAMP_TO_EDGE);
296 | 
297 |     ctx.framebufferTexture2D(ctx.FRAMEBUFFER, ctx.COLOR_ATTACHMENT0, ctx.TEXTURE_2D, texture, 0);
298 | 
299 |     ctx.bindTexture(ctx.TEXTURE_2D, null);
300 |     ctx.bindFramebuffer(ctx.FRAMEBUFFER, null);
301 | 
302 |     return {target: fbo, source: texture};
303 |   }
304 | 
305 |   private hasValidWegGLContext(): boolean {
306 |     let canvas: HTMLCanvasElement = document.createElement('canvas');
307 | 
308 |     let ctx: WebGLRenderingContext;
309 |     try {
310 |       ctx = canvas.getContext('webgl', {preserveDrawingBuffer: true});
311 |     } catch (e) {
312 |       return false;
313 |     }
314 | 
315 |     return ctx && ctx instanceof WebGLRenderingContext;
316 |   }
317 | 
318 |   render() {
319 |     // prettier-ignore
320 |     // @ts-ignore
321 |     return <img crossOrigin={'anonymous'}
322 |       ref={(el) => (this.imgRef = el as HTMLImageElement)}
323 |       part="img"
324 |       src={this.src}
325 |       role="img"
326 |       aria-hidden={true}
327 |       onLoad={() => this.applyFilter()}></img>
328 |   }
329 | }
330 | 


--------------------------------------------------------------------------------
/src/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html dir="ltr" lang="en">
  3 |   <head>
  4 |     <meta charset="utf-8" />
  5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0" />
  6 |     <title>Web Photo Filter</title>
  7 |     <meta name="description" content="A web component to apply Instagram-like WebGL filters to photos" />
  8 |     <meta name="author" content="David Dal Busco" />
  9 | 
 10 |     <script type="module" src="/build/webphotofilter.esm.js"></script>
 11 |     <script nomodule src="/build/webphotofilter.js"></script>
 12 | 
 13 |     <link
 14 |       rel="stylesheet"
 15 |       href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
 16 |       integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
 17 |       crossorigin="anonymous"
 18 |     />
 19 | 
 20 |     <!-- Bootstrap -->
 21 |     <style>
 22 |       :root {
 23 |         --jumbotron-padding-y: 3rem;
 24 |       }
 25 | 
 26 |       .jumbotron {
 27 |         padding-top: var(--jumbotron-padding-y);
 28 |         padding-bottom: var(--jumbotron-padding-y);
 29 |         margin-bottom: 0;
 30 |         background-color: #fff;
 31 |       }
 32 | 
 33 |       .jumbotron p:last-child {
 34 |         margin-bottom: 0;
 35 |       }
 36 | 
 37 |       .jumbotron-heading {
 38 |         font-weight: 300;
 39 |       }
 40 | 
 41 |       .jumbotron .container {
 42 |         max-width: 40rem;
 43 |       }
 44 | 
 45 |       footer {
 46 |         padding-top: 3rem;
 47 |         padding-bottom: 3rem;
 48 |       }
 49 | 
 50 |       footer p {
 51 |         margin-bottom: 0.25rem;
 52 |       }
 53 | 
 54 |       .box-shadow {
 55 |         box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.05);
 56 |       }
 57 |     </style>
 58 | 
 59 |     <!-- Custom style -->
 60 |     <style>
 61 |       web-photo-filter::part(img),
 62 |       web-photo-filter::part(canvas) {
 63 |         width: 100%;
 64 |         border-top-left-radius: calc(0.25rem - 1px);
 65 |         border-top-right-radius: calc(0.25rem - 1px);
 66 |       }
 67 | 
 68 |       p.card-text code {
 69 |         color: #ff65a9;
 70 |         font-size: 70%;
 71 |       }
 72 |     </style>
 73 |   </head>
 74 |   <body>
 75 |     <header>
 76 |       <div class="navbar navbar-dark bg-dark box-shadow">
 77 |         <div class="container d-flex justify-content-between">
 78 |           <a href="#" class="navbar-brand d-flex align-items-center">
 79 |             <svg
 80 |               xmlns="http://www.w3.org/2000/svg"
 81 |               width="20"
 82 |               height="20"
 83 |               viewBox="0 0 24 24"
 84 |               fill="none"
 85 |               stroke="currentColor"
 86 |               stroke-width="2"
 87 |               stroke-linecap="round"
 88 |               stroke-linejoin="round"
 89 |               class="mr-2"
 90 |             >
 91 |               <path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"></path>
 92 |               <circle cx="12" cy="13" r="4"></circle>
 93 |             </svg>
 94 |             <strong>Web Photo Filter</strong>
 95 |           </a>
 96 |         </div>
 97 |       </div>
 98 |     </header>
 99 | 
100 |     <main role="main">
101 |       <section class="jumbotron text-center">
102 |         <div class="container">
103 |           <h1 class="jumbotron-heading">Web Photo Filter</h1>
104 |           <p class="lead text-muted">A web component to apply Instagram-like WebGL filters to photos.</p>
105 |           <iframe
106 |             width="560"
107 |             height="315"
108 |             src="https://www.youtube.com/embed/SNt-sqP_2D4"
109 |             frameborder="0"
110 |             allow="encrypted-media"
111 |             allowfullscreen
112 |           ></iframe>
113 |           <p class="my-4">
114 |             <a href="https://github.com/peterpeterparker/web-photo-filter" class="btn btn-dark my-2"
115 |               ><i class="fab fa-github"></i> Github</a
116 |             >
117 | 
118 |             <a
119 |               href="https://twitter.com/intent/tweet?url=https%3A%2F%2Fwebphotofilter.com&text=A%20web%20component%20to%20apply%20Instagram-like%20WebGL%20filters%20to%20photos%20by%20%40daviddalbusco"
120 |               class="btn btn-primary mx-2 my-2"
121 |               ><i class="fab fa-twitter"></i> Tweet</a
122 |             >
123 |           </p>
124 |         </div>
125 |       </section>
126 | 
127 |       <!-- Showcase -->
128 | 
129 |       <section class="text-center" style="margin-bottom: 64px">
130 |         <div class="container">
131 |           <h2 class="text-center mb-4">Showcase</h2>
132 | 
133 |           <div class="row" style="display: flex; justify-content: center; flex-direction: column; align-items: center">
134 |             <div class="form-group" style="max-width: 508px; width: 100%; display: flex">
135 |               <input type="text" class="form-control" id="filters" value="technicolor, saturation(1.6), contrast" />
136 |               <button type="button" id="test" class="btn btn-secondary ml-2" onclick="applyShowcase()">Apply</button>
137 |             </div>
138 | 
139 |             <div class="card box-shadow" style="max-width: 508px">
140 |               <div class="card-top">
141 |                 <web-photo-filter
142 |                   style="display: block"
143 |                   id="showcase"
144 |                   src="https://raw.githubusercontent.com/peterpeterparker/web-photo-filter/master/assets/demo/instagram.jpg"
145 |                 ></web-photo-filter>
146 |               </div>
147 |             </div>
148 |           </div>
149 |         </div>
150 |       </section>
151 | 
152 |       <!-- Filter -->
153 | 
154 |       <div class="album py-4 bg-light">
155 |         <div class="container">
156 |           <div class="row">
157 |             <div class="col-md-12">
158 |               <h2 class="text-center mb-4">Filter</h2>
159 |             </div>
160 | 
161 |             <div class="col-md-3">
162 |               <div class="card mb-3 box-shadow">
163 |                 <div class="card-top">
164 |                   <web-photo-filter
165 |                     src="https://raw.githubusercontent.com/peterpeterparker/web-photo-filter/master/assets/demo/instagram.jpg"
166 |                   ></web-photo-filter>
167 |                 </div>
168 |                 <div class="card-body">
169 |                   <p class="card-text">No filter</p>
170 |                   <p class="collapse card-text" id="demo-nofilter">
171 |                     <code> &lt;web-photo-filter src="./instagram.jpg"&gt;&lt;/web-photo-filter&gt; </code>
172 |                   </p>
173 |                   <div class="d-flex justify-content-between align-items-center">
174 |                     <div class="btn-group">
175 |                       <button type="button" data-toggle="collapse" data-target="#demo-nofilter" class="btn btn-sm btn-outline-primary">
176 |                         View code
177 |                       </button>
178 |                     </div>
179 |                   </div>
180 |                 </div>
181 |               </div>
182 |             </div>
183 | 
184 |             <div class="col-md-3">
185 |               <div class="card mb-3 box-shadow">
186 |                 <div class="card-top">
187 |                   <web-photo-filter
188 |                     src="https://raw.githubusercontent.com/peterpeterparker/web-photo-filter/master/assets/demo/instagram.jpg"
189 |                     filter="sepia"
190 |                   ></web-photo-filter>
191 |                 </div>
192 |                 <div class="card-body">
193 |                   <p class="card-text">Sepia</p>
194 |                   <p class="collapse card-text" id="demo-sepia">
195 |                     <code> &lt;web-photo-filter src="./instagram.jpg" filter="sepia"&gt;&lt;/web-photo-filter&gt; </code>
196 |                   </p>
197 |                   <div class="d-flex justify-content-between align-items-center">
198 |                     <div class="btn-group">
199 |                       <button type="button" data-toggle="collapse" data-target="#demo-sepia" class="btn btn-sm btn-outline-primary">
200 |                         View code
201 |                       </button>
202 |                     </div>
203 |                   </div>
204 |                 </div>
205 |               </div>
206 |             </div>
207 | 
208 |             <div class="col-md-3">
209 |               <div class="card mb-3 box-shadow">
210 |                 <div class="card-top">
211 |                   <web-photo-filter
212 |                     src="https://raw.githubusercontent.com/peterpeterparker/web-photo-filter/master/assets/demo/instagram.jpg"
213 |                     filter="blue_monotone"
214 |                   ></web-photo-filter>
215 |                 </div>
216 |                 <div class="card-body">
217 |                   <p class="card-text">Blue monotone</p>
218 |                   <p class="collapse card-text" id="demo-blue_monotone">
219 |                     <code> &lt;web-photo-filter src="./instagram.jpg" filter="blue_monotone"&gt;&lt;/web-photo-filter&gt; </code>
220 |                   </p>
221 |                   <div class="d-flex justify-content-between align-items-center">
222 |                     <div class="btn-group">
223 |                       <button type="button" data-toggle="collapse" data-target="#demo-blue_monotone" class="btn btn-sm btn-outline-primary">
224 |                         View code
225 |                       </button>
226 |                     </div>
227 |                   </div>
228 |                 </div>
229 |               </div>
230 |             </div>
231 | 
232 |             <div class="col-md-3">
233 |               <div class="card mb-3 box-shadow">
234 |                 <div class="card-top">
235 |                   <web-photo-filter
236 |                     src="https://raw.githubusercontent.com/peterpeterparker/web-photo-filter/master/assets/demo/instagram.jpg"
237 |                     filter="violent_tomato"
238 |                   ></web-photo-filter>
239 |                 </div>
240 |                 <div class="card-body">
241 |                   <p class="card-text">Violent tomato</p>
242 |                   <p class="collapse card-text" id="demo-violent_tomato">
243 |                     <code> &lt;web-photo-filter src="./instagram.jpg" filter="violent_tomato"&gt;&lt;/web-photo-filter&gt; </code>
244 |                   </p>
245 |                   <div class="d-flex justify-content-between align-items-center">
246 |                     <div class="btn-group">
247 |                       <button
248 |                         type="button"
249 |                         data-toggle="collapse"
250 |                         data-target="#demo-violent_tomato"
251 |                         class="btn btn-sm btn-outline-primary"
252 |                       >
253 |                         View code
254 |                       </button>
255 |                     </div>
256 |                   </div>
257 |                 </div>
258 |               </div>
259 |             </div>
260 | 
261 |             <div class="col-md-3">
262 |               <div class="card mb-3 box-shadow">
263 |                 <div class="card-top">
264 |                   <web-photo-filter
265 |                     src="https://raw.githubusercontent.com/peterpeterparker/web-photo-filter/master/assets/demo/instagram.jpg"
266 |                     filter="greyscale"
267 |                   ></web-photo-filter>
268 |                 </div>
269 |                 <div class="card-body">
270 |                   <p class="card-text">Grey</p>
271 |                   <p class="collapse card-text" id="demo-greyscale">
272 |                     <code> &lt;web-photo-filter src="./instagram.jpg" filter="greyscale"&gt;&lt;/web-photo-filter&gt; </code>
273 |                   </p>
274 |                   <div class="d-flex justify-content-between align-items-center">
275 |                     <div class="btn-group">
276 |                       <button type="button" data-toggle="collapse" data-target="#demo-greyscale" class="btn btn-sm btn-outline-primary">
277 |                         View code
278 |                       </button>
279 |                     </div>
280 |                   </div>
281 |                 </div>
282 |               </div>
283 |             </div>
284 | 
285 |             <div class="col-md-3">
286 |               <div class="card mb-3 box-shadow">
287 |                 <div class="card-top">
288 |                   <web-photo-filter
289 |                     src="https://raw.githubusercontent.com/peterpeterparker/web-photo-filter/master/assets/demo/instagram.jpg"
290 |                     filter="desaturate"
291 |                   ></web-photo-filter>
292 |                 </div>
293 |                 <div class="card-body">
294 |                   <p class="card-text">Desaturate</p>
295 |                   <p class="collapse card-text" id="demo-desaturate">
296 |                     <code> &lt;web-photo-filter src="./instagram.jpg" filter="desaturate"&gt;&lt;/web-photo-filter&gt; </code>
297 |                   </p>
298 |                   <div class="d-flex justify-content-between align-items-center">
299 |                     <div class="btn-group">
300 |                       <button type="button" data-toggle="collapse" data-target="#demo-greyscale" class="btn btn-sm btn-outline-primary">
301 |                         View code
302 |                       </button>
303 |                     </div>
304 |                   </div>
305 |                 </div>
306 |               </div>
307 |             </div>
308 | 
309 |             <div class="col-md-3">
310 |               <div class="card mb-3 box-shadow">
311 |                 <div class="card-top">
312 |                   <web-photo-filter
313 |                     src="https://raw.githubusercontent.com/peterpeterparker/web-photo-filter/master/assets/demo/instagram.jpg"
314 |                     filter="brightness"
315 |                     level="1.2"
316 |                   ></web-photo-filter>
317 |                 </div>
318 |                 <div class="card-body">
319 |                   <p class="card-text">Brightness</p>
320 |                   <p class="collapse card-text" id="demo-brightness">
321 |                     <code> &lt;web-photo-filter src="./instagram.jpg" filter="brightness" level="1.2"&gt;&lt;/web-photo-filter&gt; </code>
322 |                   </p>
323 |                   <div class="d-flex justify-content-between align-items-center">
324 |                     <div class="btn-group">
325 |                       <button type="button" data-toggle="collapse" data-target="#demo-brightness" class="btn btn-sm btn-outline-primary">
326 |                         View code
327 |                       </button>
328 |                     </div>
329 |                   </div>
330 |                 </div>
331 |               </div>
332 |             </div>
333 | 
334 |             <div class="col-md-3">
335 |               <div class="card mb-3 box-shadow">
336 |                 <div class="card-top">
337 |                   <web-photo-filter
338 |                     src="https://raw.githubusercontent.com/peterpeterparker/web-photo-filter/master/assets/demo/instagram.jpg"
339 |                     filter="saturation"
340 |                   ></web-photo-filter>
341 |                 </div>
342 |                 <div class="card-body">
343 |                   <p class="card-text">Saturation</p>
344 |                   <p class="collapse card-text" id="demo-saturation">
345 |                     <code> &lt;web-photo-filter src="./instagram.jpg" filter="saturation"&gt;&lt;/web-photo-filter&gt; </code>
346 |                   </p>
347 |                   <div class="d-flex justify-content-between align-items-center">
348 |                     <div class="btn-group">
349 |                       <button type="button" data-toggle="collapse" data-target="#demo-saturation" class="btn btn-sm btn-outline-primary">
350 |                         View code
351 |                       </button>
352 |                     </div>
353 |                   </div>
354 |                 </div>
355 |               </div>
356 |             </div>
357 | 
358 |             <div class="col-md-3">
359 |               <div class="card mb-3 box-shadow">
360 |                 <div class="card-top">
361 |                   <web-photo-filter
362 |                     src="https://raw.githubusercontent.com/peterpeterparker/web-photo-filter/master/assets/demo/instagram.jpg"
363 |                     filter="contrast"
364 |                   ></web-photo-filter>
365 |                 </div>
366 |                 <div class="card-body">
367 |                   <p class="card-text">Contrast</p>
368 |                   <p class="collapse card-text" id="demo-contrast">
369 |                     <code> &lt;web-photo-filter src="./instagram.jpg" filter="contrast"&gt;&lt;/web-photo-filter&gt; </code>
370 |                   </p>
371 |                   <div class="d-flex justify-content-between align-items-center">
372 |                     <div class="btn-group">
373 |                       <button type="button" data-toggle="collapse" data-target="#demo-contrast" class="btn btn-sm btn-outline-primary">
374 |                         View code
375 |                       </button>
376 |                     </div>
377 |                   </div>
378 |                 </div>
379 |               </div>
380 |             </div>
381 | 
382 |             <div class="col-md-3">
383 |               <div class="card mb-3 box-shadow">
384 |                 <div class="card-top">
385 |                   <web-photo-filter
386 |                     src="https://raw.githubusercontent.com/peterpeterparker/web-photo-filter/master/assets/demo/instagram.jpg"
387 |                     filter="hue"
388 |                   ></web-photo-filter>
389 |                 </div>
390 |                 <div class="card-body">
391 |                   <p class="card-text">Hue</p>
392 |                   <p class="collapse card-text" id="demo-hue">
393 |                     <code> &lt;web-photo-filter src="./instagram.jpg" filter="hue" level="120"&gt;&lt;/web-photo-filter&gt; </code>
394 |                   </p>
395 |                   <div class="d-flex justify-content-between align-items-center">
396 |                     <div class="btn-group">
397 |                       <button type="button" data-toggle="collapse" data-target="#demo-hue" class="btn btn-sm btn-outline-primary">
398 |                         View code
399 |                       </button>
400 |                     </div>
401 |                   </div>
402 |                 </div>
403 |               </div>
404 |             </div>
405 | 
406 |             <div class="col-md-3">
407 |               <div class="card mb-3 box-shadow">
408 |                 <div class="card-top">
409 |                   <web-photo-filter
410 |                     src="https://raw.githubusercontent.com/peterpeterparker/web-photo-filter/master/assets/demo/instagram.jpg"
411 |                     filter="cookie"
412 |                   ></web-photo-filter>
413 |                 </div>
414 |                 <div class="card-body">
415 |                   <p class="card-text">Cookie</p>
416 |                   <p class="collapse card-text" id="demo-cookie">
417 |                     <code> &lt;web-photo-filter src="./instagram.jpg" filter="cookie"&gt;&lt;/web-photo-filter&gt; </code>
418 |                   </p>
419 |                   <div class="d-flex justify-content-between align-items-center">
420 |                     <div class="btn-group">
421 |                       <button type="button" data-toggle="collapse" data-target="#demo-cookie" class="btn btn-sm btn-outline-primary">
422 |                         View code
423 |                       </button>
424 |                     </div>
425 |                   </div>
426 |                 </div>
427 |               </div>
428 |             </div>
429 | 
430 |             <div class="col-md-3">
431 |               <div class="card mb-3 box-shadow">
432 |                 <div class="card-top">
433 |                   <web-photo-filter
434 |                     src="https://raw.githubusercontent.com/peterpeterparker/web-photo-filter/master/assets/demo/instagram.jpg"
435 |                     filter="vintage"
436 |                   ></web-photo-filter>
437 |                 </div>
438 |                 <div class="card-body">
439 |                   <p class="card-text">Vintage</p>
440 |                   <p class="collapse card-text" id="demo-vintage">
441 |                     <code> &lt;web-photo-filter src="./instagram.jpg" filter="vintage"&gt;&lt;/web-photo-filter&gt; </code>
442 |                   </p>
443 |                   <div class="d-flex justify-content-between align-items-center">
444 |                     <div class="btn-group">
445 |                       <button type="button" data-toggle="collapse" data-target="#demo-vintage" class="btn btn-sm btn-outline-primary">
446 |                         View code
447 |                       </button>
448 |                     </div>
449 |                   </div>
450 |                 </div>
451 |               </div>
452 |             </div>
453 | 
454 |             <div class="col-md-3">
455 |               <div class="card mb-3 box-shadow">
456 |                 <div class="card-top">
457 |                   <web-photo-filter
458 |                     src="https://raw.githubusercontent.com/peterpeterparker/web-photo-filter/master/assets/demo/instagram.jpg"
459 |                     filter="koda"
460 |                   ></web-photo-filter>
461 |                 </div>
462 |                 <div class="card-body">
463 |                   <p class="card-text">Koda</p>
464 |                   <p class="collapse card-text" id="demo-koda">
465 |                     <code> &lt;web-photo-filter src="./instagram.jpg" filter="koda"&gt;&lt;/web-photo-filter&gt; </code>
466 |                   </p>
467 |                   <div class="d-flex justify-content-between align-items-center">
468 |                     <div class="btn-group">
469 |                       <button type="button" data-toggle="collapse" data-target="#demo-koda" class="btn btn-sm btn-outline-primary">
470 |                         View code
471 |                       </button>
472 |                     </div>
473 |                   </div>
474 |                 </div>
475 |               </div>
476 |             </div>
477 | 
478 |             <div class="col-md-3">
479 |               <div class="card mb-3 box-shadow">
480 |                 <div class="card-top">
481 |                   <web-photo-filter
482 |                     src="https://raw.githubusercontent.com/peterpeterparker/web-photo-filter/master/assets/demo/instagram.jpg"
483 |                     filter="technicolor"
484 |                   ></web-photo-filter>
485 |                 </div>
486 |                 <div class="card-body">
487 |                   <p class="card-text">Technicolor</p>
488 |                   <p class="collapse card-text" id="demo-technicolor">
489 |                     <code> &lt;web-photo-filter src="./instagram.jpg" filter="technicolor"&gt;&lt;/web-photo-filter&gt; </code>
490 |                   </p>
491 |                   <div class="d-flex justify-content-between align-items-center">
492 |                     <div class="btn-group">
493 |                       <button type="button" data-toggle="collapse" data-target="#demo-technicolor" class="btn btn-sm btn-outline-primary">
494 |                         View code
495 |                       </button>
496 |                     </div>
497 |                   </div>
498 |                 </div>
499 |               </div>
500 |             </div>
501 | 
502 |             <div class="col-md-3">
503 |               <div class="card mb-3 box-shadow">
504 |                 <div class="card-top">
505 |                   <web-photo-filter
506 |                     src="https://raw.githubusercontent.com/peterpeterparker/web-photo-filter/master/assets/demo/instagram.jpg"
507 |                     filter="polaroid"
508 |                   ></web-photo-filter>
509 |                 </div>
510 |                 <div class="card-body">
511 |                   <p class="card-text">Polaroid</p>
512 |                   <p class="collapse card-text" id="demo-polaroid">
513 |                     <code> &lt;web-photo-filter src="./instagram.jpg" filter="polaroid"&gt;&lt;/web-photo-filter&gt; </code>
514 |                   </p>
515 |                   <div class="d-flex justify-content-between align-items-center">
516 |                     <div class="btn-group">
517 |                       <button type="button" data-toggle="collapse" data-target="#demo-polaroid" class="btn btn-sm btn-outline-primary">
518 |                         View code
519 |                       </button>
520 |                     </div>
521 |                   </div>
522 |                 </div>
523 |               </div>
524 |             </div>
525 | 
526 |             <div class="col-md-3">
527 |               <div class="card mb-3 box-shadow">
528 |                 <div class="card-top">
529 |                   <web-photo-filter
530 |                     src="https://raw.githubusercontent.com/peterpeterparker/web-photo-filter/master/assets/demo/instagram.jpg"
531 |                     filter="bgr"
532 |                   ></web-photo-filter>
533 |                 </div>
534 |                 <div class="card-body">
535 |                   <p class="card-text">Bgr</p>
536 |                   <p class="collapse card-text" id="demo-bgr">
537 |                     <code> &lt;web-photo-filter src="./instagram.jpg" filter="bgr"&gt;&lt;/web-photo-filter&gt; </code>
538 |                   </p>
539 |                   <div class="d-flex justify-content-between align-items-center">
540 |                     <div class="btn-group">
541 |                       <button type="button" data-toggle="collapse" data-target="#demo-bgr" class="btn btn-sm btn-outline-primary">
542 |                         View code
543 |                       </button>
544 |                     </div>
545 |                   </div>
546 |                 </div>
547 |               </div>
548 |             </div>
549 |           </div>
550 |         </div>
551 |       </div>
552 |     </main>
553 | 
554 |     <footer class="text-muted">
555 |       <div class="container">
556 |         <p>Made by <a href="https://daviddalbusco.com">David Dal Busco</a></p>
557 |       </div>
558 |     </footer>
559 | 
560 |     <script
561 |       src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
562 |       integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
563 |       crossorigin="anonymous"
564 |     ></script>
565 |     <script
566 |       src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
567 |       integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
568 |       crossorigin="anonymous"
569 |     ></script>
570 |     <script
571 |       src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"
572 |       integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
573 |       crossorigin="anonymous"
574 |     ></script>
575 | 
576 |     <script
577 |       defer
578 |       src="https://use.fontawesome.com/releases/v5.4.1/js/all.js"
579 |       integrity="sha384-L469/ELG4Bg9sDQbl0hvjMq8pOcqFgkSpwhwnslzvVVGpDjYJ6wJJyYjvG3u8XW7"
580 |       crossorigin="anonymous"
581 |     ></script>
582 | 
583 |     <!-- Display a warning if WebGL is not supported -->
584 |     <script type="text/javascript">
585 |       document.addEventListener('DOMContentLoaded', function ($event) {
586 |         const canvas = document.createElement('canvas');
587 | 
588 |         let ctx;
589 |         try {
590 |           ctx = canvas.getContext('webgl');
591 |         } catch (e) {
592 |           // Nothing
593 |         }
594 | 
595 |         if (!ctx || !(ctx instanceof WebGLRenderingContext)) {
596 |           const noWebGLMsg = document.createElement('div');
597 |           noWebGLMsg.classList = new Array();
598 |           noWebGLMsg.classList.add('alert-danger');
599 |           noWebGLMsg.classList.add('text-center');
600 |           noWebGLMsg.classList.add('mb-3');
601 |           noWebGLMsg.textContent = 'WebGL is not supported by your current browser!';
602 | 
603 |           const rowShowcase = document.getElementsByClassName('col-md-12');
604 | 
605 |           if (rowShowcase && rowShowcase.length == 1) {
606 |             rowShowcase[0].appendChild(noWebGLMsg);
607 |           } else {
608 |             console.log('WebGL is not supported by your current browser!');
609 |           }
610 |         } else {
611 |           applyShowcase();
612 |         }
613 |       });
614 | 
615 |       function applyShowcase() {
616 |         const filters = document.querySelector('#filters').value;
617 |         const showcase = document.querySelector('#showcase');
618 | 
619 |         showcase.filter = filters;
620 |       }
621 |     </script>
622 |   </body>
623 | </html>
624 | 


--------------------------------------------------------------------------------
/src/index.ts:
--------------------------------------------------------------------------------
1 | export * from './components';
2 | 


--------------------------------------------------------------------------------
/src/types/web-photo-filter/web-photo-filter-result.ts:
--------------------------------------------------------------------------------
1 | export interface WebPhotoFilterResult {
2 |   webGLDetected: boolean;
3 |   // An Image or a Canvas
4 |   result: HTMLElement;
5 | }
6 | 


--------------------------------------------------------------------------------
/src/types/web-photo-filter/web-photo-filter-type.ts:
--------------------------------------------------------------------------------
  1 | export class WebPhotoFilterType {
  2 |   static getFilters(level: number): any {
  3 |     return {
  4 |       SEPIA: [1.351, 0, 0, 0, 0, 1.203, 0, 0, 0, 0, 0.937, 0, 0, 0, 0, 0, 0, 0, 1, 0],
  5 |       BLUE_MONOTONE: [0.95, 0, 0, 0, 0.05, 0.85, 0, 0, 0, 0.15, 0.5, 0, 0, 0, 0.5, 0, 0, 0, 1, 0],
  6 |       VIOLENT_TOMATO: [0.9, 0, 0, 0, 2, 0.9, 0, 0, 0, -0.2, -0.2, 0, 0, 0, -0.5, -0.2, -0.2, -0.2, 1, 0],
  7 |       GREYSCALE: [1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 1, 0],
  8 |       DESATURATE: [
  9 |         0.2764723002910614,
 10 |         0.9297080039978027,
 11 |         0.09381970018148422,
 12 |         0,
 13 |         -0.14549018442630768,
 14 |         0.2764723002910614,
 15 |         0.9297080039978027,
 16 |         0.09381970018148422,
 17 |         0,
 18 |         -0.14549018442630768,
 19 |         0.2764723002910614,
 20 |         0.9297080039978027,
 21 |         0.09381970018148422,
 22 |         0,
 23 |         -0.14549018442630768,
 24 |         0,
 25 |         0,
 26 |         0,
 27 |         1,
 28 |         0,
 29 |       ],
 30 |       BRIGHTNESS: WebPhotoFilterType.brightnessMatrix(level ? level : 1.4),
 31 |       SATURATION: WebPhotoFilterType.saturationMatrix(level ? level : 1.5),
 32 |       CONTRAST: WebPhotoFilterType.contrastMatrix(level ? level : 1.5),
 33 |       HUE: WebPhotoFilterType.hueMatrix(level ? level : 90),
 34 |       COOKIE: [
 35 |         0.5997023582458496,
 36 |         0.3455324172973633,
 37 |         -0.27082985639572144,
 38 |         0,
 39 |         0.186007559299469,
 40 |         -0.0377032496035099,
 41 |         0.8609577417373657,
 42 |         0.1505955308675766,
 43 |         0,
 44 |         -0.14497417211532593,
 45 |         0.2411363571882248,
 46 |         -0.07441037893295288,
 47 |         0.4497218132019043,
 48 |         0,
 49 |         -0.029655195772647858,
 50 |         0,
 51 |         0,
 52 |         0,
 53 |         1,
 54 |         0,
 55 |       ],
 56 |       VINTAGE: [
 57 |         0.6279345750808716,
 58 |         0.32021835446357727,
 59 |         -0.03965408354997635,
 60 |         0,
 61 |         0.037848182022571564,
 62 |         0.025783976539969444,
 63 |         0.6441188454627991,
 64 |         0.03259127587080002,
 65 |         0,
 66 |         0.02926599606871605,
 67 |         0.04660555720329285,
 68 |         -0.08512330055236816,
 69 |         0.5241647958755493,
 70 |         0,
 71 |         0.020232120528817177,
 72 |         0,
 73 |         0,
 74 |         0,
 75 |         1,
 76 |         0,
 77 |       ],
 78 |       KODA: [
 79 |         1.1285582780838013,
 80 |         -0.3967382311820984,
 81 |         -0.03992559015750885,
 82 |         0,
 83 |         0.24991995096206665,
 84 |         -0.1640433967113495,
 85 |         1.0835251808166504,
 86 |         -0.05498805269598961,
 87 |         0,
 88 |         0.09698984026908875,
 89 |         -0.16786010563373566,
 90 |         -0.5603416562080383,
 91 |         1.6014851331710815,
 92 |         0,
 93 |         0.13972482085227966,
 94 |         0,
 95 |         0,
 96 |         0,
 97 |         1,
 98 |         0,
 99 |       ],
100 |       TECHNICOLOR: [
101 |         1.9125277996063232,
102 |         -0.8545345067977905,
103 |         -0.09155508130788803,
104 |         0,
105 |         0.046249426901340485,
106 |         -0.3087833523750305,
107 |         1.7658908367156982,
108 |         -0.10601743310689926,
109 |         0,
110 |         -0.27589040994644165,
111 |         -0.23110337555408478,
112 |         -0.7501899003982544,
113 |         1.8475978374481201,
114 |         0,
115 |         0.12137623876333237,
116 |         0,
117 |         0,
118 |         0,
119 |         1,
120 |         0,
121 |       ],
122 |       POLAROID: [1.438, -0.062, -0.062, 0, 0, -0.122, 1.378, -0.122, 0, 0, -0.016, -0.016, 1.483, 0, 0, 0, 0, 0, 1, 0],
123 |       BGR: [0, 0, 1, 0, 0, 0, 1, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 1, 0],
124 |     };
125 |   }
126 | 
127 |   private static brightnessMatrix(brigthness: number): any {
128 |     return [brigthness, 0, 0, 0, 0, 0, brigthness, 0, 0, 0, 0, 0, brigthness, 0, 0, 0, 0, 0, 1, 0];
129 |   }
130 | 
131 |   private static contrastMatrix(amount: number): any {
132 |     let v: number = amount;
133 |     let o: number = -128 * (v - 1);
134 | 
135 |     return WebPhotoFilterType.normalizeMatrix([v, 0, 0, 0, o, 0, v, 0, 0, o, 0, 0, v, 0, o, 0, 0, 0, 1, 0]);
136 |   }
137 | 
138 |   private static normalizeMatrix(matrix: any): any {
139 |     // Normalize the offset component to 0-1
140 | 
141 |     matrix[4] /= 255;
142 |     matrix[9] /= 255;
143 |     matrix[14] /= 255;
144 |     matrix[19] /= 255;
145 | 
146 |     return matrix;
147 |   }
148 | 
149 |   private static hueMatrix(rotation: number): any {
150 |     rotation = ((rotation || 0) / 180) * Math.PI;
151 | 
152 |     let cos: number = Math.cos(rotation),
153 |       sin = Math.sin(rotation),
154 |       lumR = 0.213,
155 |       lumG = 0.715,
156 |       lumB = 0.072;
157 | 
158 |     return [
159 |       lumR + cos * (1 - lumR) + sin * -lumR,
160 |       lumG + cos * -lumG + sin * -lumG,
161 |       lumB + cos * -lumB + sin * (1 - lumB),
162 |       0,
163 |       0,
164 |       lumR + cos * -lumR + sin * 0.143,
165 |       lumG + cos * (1 - lumG) + sin * 0.14,
166 |       lumB + cos * -lumB + sin * -0.283,
167 |       0,
168 |       0,
169 |       lumR + cos * -lumR + sin * -(1 - lumR),
170 |       lumG + cos * -lumG + sin * lumG,
171 |       lumB + cos * (1 - lumB) + sin * lumB,
172 |       0,
173 |       0,
174 |       0,
175 |       0,
176 |       0,
177 |       1,
178 |       0,
179 |     ];
180 |   }
181 | 
182 |   private static saturationMatrix(amount: number): number[] {
183 |     let x: number = ((amount || 0) * 2) / 3 + 1;
184 |     let y: number = (x - 1) * -0.5;
185 |     return [x, y, y, 0, 0, y, x, y, 0, 0, y, y, x, 0, 0, 0, 0, 0, 1, 0];
186 |   }
187 | 
188 |   static getFilter(key: string, filterValue: number): number[] {
189 |     if (!key || 0 === key.length) {
190 |       return null;
191 |     }
192 | 
193 |     let result: number[] = null;
194 | 
195 |     Object.keys(WebPhotoFilterType.getFilters(filterValue)).forEach((filterKey: string) => {
196 |       if (key.toUpperCase() === filterKey) {
197 |         result = WebPhotoFilterType.getFilters(filterValue)[filterKey];
198 |       }
199 |     });
200 | 
201 |     return result;
202 |   }
203 | }
204 | 


--------------------------------------------------------------------------------
/stencil.config.ts:
--------------------------------------------------------------------------------
 1 | import {Config} from '@stencil/core';
 2 | 
 3 | import {sass} from '@stencil/sass';
 4 | import {postcss} from '@stencil/postcss';
 5 | import autoprefixer from 'autoprefixer';
 6 | 
 7 | export const config: Config = {
 8 |   namespace: 'webphotofilter',
 9 |   outputTargets: [
10 |     {
11 |       type: 'dist',
12 |     },
13 |     {
14 |       type: 'www',
15 |       baseUrl: 'http://webphotofilter.com',
16 |       serviceWorker: null,
17 |     },
18 |     {type: 'docs-readme'},
19 |   ],
20 |   plugins: [
21 |     sass(),
22 |     postcss({
23 |       plugins: [autoprefixer()],
24 |     }),
25 |   ],
26 | };
27 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "allowSyntheticDefaultImports": true,
 4 |     "allowUnreachableCode": false,
 5 |     "declaration": false,
 6 |     "experimentalDecorators": true,
 7 |     "lib": ["dom", "es2017"],
 8 |     "moduleResolution": "node",
 9 |     "module": "esnext",
10 |     "target": "es2017",
11 |     "noUnusedLocals": true,
12 |     "noUnusedParameters": true,
13 |     "jsx": "react",
14 |     "jsxFactory": "h"
15 |   },
16 |   "include": ["src", "types/jsx.d.ts"],
17 |   "exclude": ["node_modules"]
18 | }
19 | 


--------------------------------------------------------------------------------