dash-button-web 0.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (64) hide show
  1. package/LICENSE +21 -0
  2. package/dist/cjs/dash-button.cjs.entry.js +2549 -0
  3. package/dist/cjs/dash-button.cjs.entry.js.map +1 -0
  4. package/dist/cjs/index-8282b36b.js +1733 -0
  5. package/dist/cjs/index-8282b36b.js.map +1 -0
  6. package/dist/cjs/index.cjs.js +4 -0
  7. package/dist/cjs/index.cjs.js.map +1 -0
  8. package/dist/cjs/loader.cjs.js +15 -0
  9. package/dist/cjs/loader.cjs.js.map +1 -0
  10. package/dist/cjs/web-compnont.cjs.js +25 -0
  11. package/dist/cjs/web-compnont.cjs.js.map +1 -0
  12. package/dist/collection/collection-manifest.json +12 -0
  13. package/dist/collection/components/my-component/dash-button.css +169 -0
  14. package/dist/collection/components/my-component/dash-button.e2e.js +26 -0
  15. package/dist/collection/components/my-component/dash-button.e2e.js.map +1 -0
  16. package/dist/collection/components/my-component/dash-button.js +195 -0
  17. package/dist/collection/components/my-component/dash-button.js.map +1 -0
  18. package/dist/collection/components/my-component/dash-button.spec.js +35 -0
  19. package/dist/collection/components/my-component/dash-button.spec.js.map +1 -0
  20. package/dist/collection/index.js +2 -0
  21. package/dist/collection/index.js.map +1 -0
  22. package/dist/components/dash-button.d.ts +11 -0
  23. package/dist/components/dash-button.js +2574 -0
  24. package/dist/components/dash-button.js.map +1 -0
  25. package/dist/components/index.d.ts +33 -0
  26. package/dist/components/index.js +3 -0
  27. package/dist/components/index.js.map +1 -0
  28. package/dist/esm/dash-button.entry.js +2545 -0
  29. package/dist/esm/dash-button.entry.js.map +1 -0
  30. package/dist/esm/index-2b6c17bc.js +1706 -0
  31. package/dist/esm/index-2b6c17bc.js.map +1 -0
  32. package/dist/esm/index.js +3 -0
  33. package/dist/esm/index.js.map +1 -0
  34. package/dist/esm/loader.js +11 -0
  35. package/dist/esm/loader.js.map +1 -0
  36. package/dist/esm/polyfills/core-js.js +11 -0
  37. package/dist/esm/polyfills/dom.js +79 -0
  38. package/dist/esm/polyfills/es5-html-element.js +1 -0
  39. package/dist/esm/polyfills/index.js +34 -0
  40. package/dist/esm/polyfills/system.js +6 -0
  41. package/dist/esm/web-compnont.js +20 -0
  42. package/dist/esm/web-compnont.js.map +1 -0
  43. package/dist/index.cjs.js +1 -0
  44. package/dist/index.js +1 -0
  45. package/dist/types/components/my-component/dash-button.d.ts +19 -0
  46. package/dist/types/components.d.ts +49 -0
  47. package/dist/types/index.d.ts +1 -0
  48. package/dist/types/stencil-public-runtime.d.ts +1681 -0
  49. package/dist/web-compnont/index.esm.js +2 -0
  50. package/dist/web-compnont/index.esm.js.map +1 -0
  51. package/dist/web-compnont/p-35259f64.js +3 -0
  52. package/dist/web-compnont/p-35259f64.js.map +1 -0
  53. package/dist/web-compnont/p-97a6df2d.entry.js +10 -0
  54. package/dist/web-compnont/p-97a6df2d.entry.js.map +1 -0
  55. package/dist/web-compnont/web-compnont.esm.js +2 -0
  56. package/dist/web-compnont/web-compnont.esm.js.map +1 -0
  57. package/loader/cdn.js +3 -0
  58. package/loader/index.cjs.js +3 -0
  59. package/loader/index.d.ts +21 -0
  60. package/loader/index.es2017.js +3 -0
  61. package/loader/index.js +4 -0
  62. package/loader/package.json +11 -0
  63. package/package.json +41 -0
  64. package/readme.md +124 -0
package/package.json ADDED
@@ -0,0 +1,41 @@
1
+ {
2
+ "name": "dash-button-web",
3
+ "version": "0.0.1",
4
+ "description": "Dash button Component",
5
+ "main": "dist/index.cjs.js",
6
+ "module": "dist/index.js",
7
+ "es2015": "dist/esm/index.js",
8
+ "es2017": "dist/esm/index.js",
9
+ "types": "dist/types/index.d.ts",
10
+ "collection": "dist/collection/collection-manifest.json",
11
+ "collection:main": "dist/collection/index.js",
12
+ "unpkg": "dist/web-compnont/web-compnont.esm.js",
13
+ "repository": {
14
+ "type": "git",
15
+ "url": "https://github.com/ionic-team/stencil-component-starter.git"
16
+ },
17
+ "files": [
18
+ "dist/",
19
+ "loader/"
20
+ ],
21
+ "scripts": {
22
+ "build": "stencil build",
23
+ "start": "stencil build --dev --watch --serve",
24
+ "test": "stencil test --spec --e2e",
25
+ "test.watch": "stencil test --spec --e2e --watchAll",
26
+ "generate": "stencil generate"
27
+ },
28
+ "dependencies": {
29
+ "@stencil/core": "^4.7.0",
30
+ "js-cookie": "^3.0.5",
31
+ "keycloak-js": "^23.0.5"
32
+ },
33
+ "devDependencies": {
34
+ "@types/jest": "^29.5.6",
35
+ "@types/node": "^16.18.11",
36
+ "jest": "^29.7.0",
37
+ "jest-cli": "^29.7.0",
38
+ "puppeteer": "21.1.1"
39
+ },
40
+ "license": "MIT"
41
+ }
package/readme.md ADDED
@@ -0,0 +1,124 @@
1
+ ## Dash button web-comonont
2
+
3
+ Developing a dash button web component based on the [Stencil.js](https://stenciljs.com/ "Stencil.js") framework ensures consistent support across all modern frontend frameworks with minimal configurations. Therefore, by incorporating Keycloak-based authentication with SSO features, minimal configuration is needed to secure any frontend application.
4
+
5
+ ### Installtion
6
+
7
+ To install the dash-button web component, copy and paste it into your frontend application.
8
+
9
+ ```sh
10
+ <script type='module' src='https://unpkg.com/dash-button-web@0.0.1/dist/esm/web-compnont.js'></script>
11
+ ```
12
+
13
+ You can find the NPM package named [dash-button-web](https://www.npmjs.com/package/dash-button-web "dash-button-web").
14
+
15
+ If it is a framework, you wll need to configure more options. Therefore, follow the [Stencil.js](https://stenciljs.com/ "Stencil.js") documentation.
16
+
17
+ ## Installation Guide
18
+
19
+ First, you need to install the latest Keycloak server, or you can use an existing one.
20
+
21
+ #### Step 1 - Setup Keycloak Server Application
22
+
23
+ First, you need to start the Keycloak server. You can simply initiate the Docker image of the Keycloak server using the command below:
24
+
25
+ ```sh
26
+ docker run -p 8080:8080 -e KEYCLOAK_ADMIN=admin -e KEYCLOAK_ADMIN_PASSWORD=admin quay.io/keycloak/keycloak:23.0.4 start-dev
27
+ ```
28
+
29
+ If you need additional installation guidelines, please refer to the [Keycloak documentation](https://www.keycloak.org/guides#getting-started).
30
+
31
+ Next, log in to the Keycloak admin panel and create a realm using a chosen name. For example, here I have created a realm named 'demo'.
32
+
33
+ <!-- ![plot](./dash-button/screenshots/screenshot_02.png) -->
34
+
35
+ Next, create a client and configure URLs. For development purposes, set valid redirect URLs and set web origins as '*' as follows.
36
+
37
+ <!-- ![plot](./dash-button/screenshots/screenshot_01.png) -->
38
+
39
+ Next, create a user with credentials for testing purposes.
40
+
41
+
42
+ ### Step 2 - Configure frontend application
43
+
44
+ Here, we are demonstrating how to configure the application on an Angular-based application and a basic HTML-based application. If you need to install React or Vue.js, follow the Stencil.js documentation.
45
+
46
+ #### 1. Set Up and Install an Angular Application
47
+
48
+ First, you need to enable the custom component support feature in the Angular project. To do that, the following code block needs to be added to the `src/app/app.module.ts` file.
49
+
50
+ ```sh
51
+ @NgModule({
52
+ …
53
+ schemas: [
54
+ CUSTOM_ELEMENTS_SCHEMA
55
+ ],
56
+ })
57
+ ```
58
+
59
+ Once the above addition is completed, it is required to import the below module as follows.
60
+
61
+ ```sh
62
+ import { CUSTOM_ELEMENTS_SCHEMA} from '@angular/core';
63
+ ```
64
+
65
+ Next, you need to put the script file path in the **src/index.html** file header section as follows.
66
+
67
+
68
+ ```sh
69
+ <head>
70
+ <meta name="viewport" content="width=device-width, initial-scale=1">
71
+ <link rel="icon" type="image/x-icon" href="favicon.ico">
72
+ ...
73
+ **<script type='module' src='https://unpkg.com/dash-button-web@0.0.1/dist/esm/web-compnont.js'></script>**
74
+ ...
75
+ ```
76
+
77
+ After that, you can pass configuration options as follows using the web component.
78
+
79
+ #### Configuration options
80
+
81
+ | Property | Attribute | Description | Type | Default |
82
+ | -------------- | ----------------- | ----------- | --------- | ------------------------- |
83
+ | `clientId` | `client-id` | `Keycloak client ID` | `string` | `` |
84
+ | `keycloakUri` | `keycloak-uri` | `Keycloak server URI` | `string` | `"http://localhost:8080"` |
85
+ | `realm` | `realm` | | `string` | `` |
86
+ | `redirectUri` | `redirect-uri` | `Application redirect URI` | `string` | `` |
87
+ | `showPostLoginText` | `show-post-login-text` | `Successfully logged in shows a custom button message` | `boolean` | `false` |
88
+
89
+
90
+ Now, you are almost done. In the final stage, you can place the web-component button tag at the top of the navigation bar using the following code block.
91
+
92
+ ```sh
93
+ <dash-button keycloak-uri="http://localhost:8080" realm="demo" client-id="testapp" show-post-login-text="false"></dash-button>
94
+ ```
95
+ After that test your application can be test with user credentials and then you can get an output similar to this.
96
+
97
+ <!-- ![plot](./dash-button/screenshots/screenshot_03.png) -->
98
+
99
+ #### 2. Set up and install an HTML-based application
100
+
101
+ You need to follow similar procedures as above.
102
+
103
+ First, you need to import the script tag into the header section of your main HTML file as follows.
104
+
105
+ ```sh
106
+ <head>
107
+ <meta name="viewport" content="width=device-width, initial-scale=1">
108
+ <link rel="icon" type="image/x-icon" href="favicon.ico">
109
+ ...
110
+ **<script type='module' src='https://unpkg.com/dash-button-web@0.0.1/dist/esm/web-compnont.js'></script>**
111
+ ...
112
+ ```
113
+
114
+ After that, all you need to do is place the dash button in your preferred location on the web page. To do so, use the following web component button tag and place it in your application with preferred configuration options.
115
+
116
+ ```sh
117
+ <dash-button keycloak-uri="http://localhost:8080" realm="demo" client-id="testapp"></dash-button>
118
+ ```
119
+
120
+ That's it, enjoy!
121
+
122
+ ### Parse logged user information
123
+
124
+ In your application, you need to access logged user information. The dash-button default saves information in a local storage object called 'keycloak'. You can use that object to retrieve user information, JWT token, permissions, and more.