dash-button-web 0.0.16 → 0.0.18-beta.0

package/dist/web-compnont/web-compnont.esm.js

@@ -1,2 +1,2 @@
-import{p as e,b as i}from"./p-db53c3e9.js";export{s as setNonce}from"./p-db53c3e9.js";const t=()=>{const i=import.meta.url;const t={};if(i!==""){t.resourcesUrl=new URL(".",i).href}return e(t)};t().then((e=>i([["p-b7387964",[[1,"dash-button",{showPostLoginText:[4,"show-post-login-text"],silentCheckSso:[4,"silent-check-sso"],redirectUri:[1,"redirect-uri"],authMethod:[1,"auth-method"],keycloakUri:[1,"keycloak-uri"],realm:[1],clientId:[1,"client-id"],appId:[1,"app-id"],portalUrl:[1,"portal-url"],plmUrl:[1,"plm-url"],usageTrackingUrl:[1,"usage-tracking-url"],showUnauthorizedModal:[4,"show-unauthorized-modal"],postTextDelayDuration:[2,"post-text-delay-duration"],primaryColor:[1,"primary-color"],accentColor:[1,"accent-color"],otherLinkType:[1,"other-link-type"],otherLinkDisplayName:[1,"other-link-display-name"],applicationDisplayName:[1,"application-display-name"],disableApplicationTab:[4,"disable-application-tab"],menuViewType:[1,"menu-view-type"],keycloak:[32],isAuth:[32],givenUserName:[32],silentCheckSsoRedirectUri:[32],appList:[32],menuLinkList:[32],mainMenuLinkList:[32],showPostLoginLoadingSpinner:[32],avatarSvg:[32],dummyAppList:[32]}]]]],e)));
+import{p as e,b as t}from"./p-db53c3e9.js";export{s as setNonce}from"./p-db53c3e9.js";const i=()=>{const t=import.meta.url;const i={};if(t!==""){i.resourcesUrl=new URL(".",t).href}return e(i)};i().then((e=>t([["p-92bc7cf5",[[1,"dash-button",{showPostLoginText:[4,"show-post-login-text"],silentCheckSso:[4,"silent-check-sso"],silentCheckSsoHtmlPath:[1,"silent-check-sso-html-path"],redirectUri:[1,"redirect-uri"],authMethod:[1,"auth-method"],keycloakUri:[1,"keycloak-uri"],realm:[1],clientId:[1,"client-id"],appId:[1,"app-id"],portalUrl:[1,"portal-url"],portalApiUrl:[1,"portal-api-url"],plmUrl:[1,"plm-url"],usageTrackingUrl:[1,"usage-tracking-url"],showUnauthorizedModal:[4,"show-unauthorized-modal"],postTextDelayDuration:[2,"post-text-delay-duration"],primaryColor:[1,"primary-color"],accentColor:[1,"accent-color"],otherLinkType:[1,"other-link-type"],otherLinkDisplayName:[1,"other-link-display-name"],applicationDisplayName:[1,"application-display-name"],disableApplicationTab:[4,"disable-application-tab"],menuViewType:[1,"menu-view-type"],keycloak:[32],isAuth:[32],givenUserName:[32],silentCheckSsoRedirectUri:[32],appList:[32],menuLinkList:[32],mainMenuLinkList:[32],showPostLoginLoadingSpinner:[32],avatarSvg:[32],dummyAppList:[32]}]]]],e)));
 //# sourceMappingURL=web-compnont.esm.js.map

package/dist/web-compnont/web-compnont.esm.js.map

@@ -1 +1 @@
-{"version":3,"names":["patchBrowser","importMeta","url","opts","resourcesUrl","URL","href","promiseResolve","then","options","bootstrapLazy","showPostLoginText","silentCheckSso","redirectUri","authMethod","keycloakUri","realm","clientId","appId","portalUrl","plmUrl","usageTrackingUrl","showUnauthorizedModal","postTextDelayDuration","primaryColor","accentColor","otherLinkType","otherLinkDisplayName","applicationDisplayName","disableApplicationTab","menuViewType","keycloak","isAuth","givenUserName","silentCheckSsoRedirectUri","appList","menuLinkList","mainMenuLinkList","showPostLoginLoadingSpinner","avatarSvg","dummyAppList"],"sources":["node_modules/@stencil/core/internal/client/patch-browser.js","@lazy-browser-entrypoint?app-data=conditional"],"sourcesContent":["/*\n Stencil Client Patch Browser v4.12.0 | MIT Licensed | https://stenciljs.com\n */\nimport { BUILD, NAMESPACE } from '@stencil/core/internal/app-data';\nimport { consoleDevInfo, doc, promiseResolve, H } from '@stencil/core';\nconst patchBrowser = () => {\n    // NOTE!! This fn cannot use async/await!\n    if (BUILD.isDev && !BUILD.isTesting) {\n        consoleDevInfo('Running in development mode.');\n    }\n    if (BUILD.cloneNodeFix) {\n        // opted-in to polyfill cloneNode() for slot polyfilled components\n        patchCloneNodeFix(H.prototype);\n    }\n    const scriptElm = BUILD.scriptDataOpts\n        ? Array.from(doc.querySelectorAll('script')).find((s) => new RegExp(`\\/${NAMESPACE}(\\\\.esm)?\\\\.js($|\\\\?|#)`).test(s.src) ||\n            s.getAttribute('data-stencil-namespace') === NAMESPACE)\n        : null;\n    const importMeta = import.meta.url;\n    const opts = BUILD.scriptDataOpts ? (scriptElm || {})['data-opts'] || {} : {};\n    if (importMeta !== '') {\n        opts.resourcesUrl = new URL('.', importMeta).href;\n    }\n    return promiseResolve(opts);\n};\nconst patchCloneNodeFix = (HTMLElementPrototype) => {\n    const nativeCloneNodeFn = HTMLElementPrototype.cloneNode;\n    HTMLElementPrototype.cloneNode = function (deep) {\n        if (this.nodeName === 'TEMPLATE') {\n            return nativeCloneNodeFn.call(this, deep);\n        }\n        const clonedNode = nativeCloneNodeFn.call(this, false);\n        const srcChildNodes = this.childNodes;\n        if (deep) {\n            for (let i = 0; i < srcChildNodes.length; i++) {\n                // Node.ATTRIBUTE_NODE === 2, and checking because IE11\n                if (srcChildNodes[i].nodeType !== 2) {\n                    clonedNode.appendChild(srcChildNodes[i].cloneNode(true));\n                }\n            }\n        }\n        return clonedNode;\n    };\n};\nexport { patchBrowser };\n","export { setNonce } from '@stencil/core';\nimport { bootstrapLazy } from '@stencil/core';\nimport { patchBrowser } from '@stencil/core/internal/client/patch-browser';\nimport { globalScripts } from '@stencil/core/internal/app-globals';\npatchBrowser().then(options => {\n  globalScripts();\n  return bootstrapLazy([/*!__STENCIL_LAZY_DATA__*/], options);\n});\n"],"mappings":"sFAKA,MAAMA,EAAe,KAajB,MAAMC,cAAyBC,IAC/B,MAAMC,EAAqE,GAC3E,GAAIF,IAAe,GAAI,CACnBE,EAAKC,aAAe,IAAIC,IAAI,IAAKJ,GAAYK,IACrD,CACI,OAAOC,EAAeJ,EAAK,ECnB/BH,IAAeQ,MAAKC,GAEXC,EAAc,iCAA8B,CAAAC,kBAAS,2BAAAC,eAAA,uBAAAC,YAAA,mBAAAC,WAAA,kBAAAC,YAAA,mBAAAC,MAAA,IAAAC,SAAA,gBAAAC,MAAA,aAAAC,UAAA,iBAAAC,OAAA,cAAAC,iBAAA,yBAAAC,sBAAA,8BAAAC,sBAAA,+BAAAC,aAAA,oBAAAC,YAAA,mBAAAC,cAAA,sBAAAC,qBAAA,8BAAAC,uBAAA,+BAAAC,sBAAA,8BAAAC,aAAA,qBAAAC,SAAA,KAAAC,OAAA,KAAAC,cAAA,KAAAC,0BAAA,KAAAC,QAAA,KAAAC,aAAA,KAAAC,iBAAA,KAAAC,4BAAA,KAAAC,UAAA,KAAAC,aAAA,UAAA/B"}
+{"version":3,"names":["patchBrowser","importMeta","url","opts","resourcesUrl","URL","href","promiseResolve","then","options","bootstrapLazy","showPostLoginText","silentCheckSso","silentCheckSsoHtmlPath","redirectUri","authMethod","keycloakUri","realm","clientId","appId","portalUrl","portalApiUrl","plmUrl","usageTrackingUrl","showUnauthorizedModal","postTextDelayDuration","primaryColor","accentColor","otherLinkType","otherLinkDisplayName","applicationDisplayName","disableApplicationTab","menuViewType","keycloak","isAuth","givenUserName","silentCheckSsoRedirectUri","appList","menuLinkList","mainMenuLinkList","showPostLoginLoadingSpinner","avatarSvg","dummyAppList"],"sources":["node_modules/@stencil/core/internal/client/patch-browser.js","@lazy-browser-entrypoint?app-data=conditional"],"sourcesContent":["/*\n Stencil Client Patch Browser v4.12.0 | MIT Licensed | https://stenciljs.com\n */\nimport { BUILD, NAMESPACE } from '@stencil/core/internal/app-data';\nimport { consoleDevInfo, doc, promiseResolve, H } from '@stencil/core';\nconst patchBrowser = () => {\n    // NOTE!! This fn cannot use async/await!\n    if (BUILD.isDev && !BUILD.isTesting) {\n        consoleDevInfo('Running in development mode.');\n    }\n    if (BUILD.cloneNodeFix) {\n        // opted-in to polyfill cloneNode() for slot polyfilled components\n        patchCloneNodeFix(H.prototype);\n    }\n    const scriptElm = BUILD.scriptDataOpts\n        ? Array.from(doc.querySelectorAll('script')).find((s) => new RegExp(`\\/${NAMESPACE}(\\\\.esm)?\\\\.js($|\\\\?|#)`).test(s.src) ||\n            s.getAttribute('data-stencil-namespace') === NAMESPACE)\n        : null;\n    const importMeta = import.meta.url;\n    const opts = BUILD.scriptDataOpts ? (scriptElm || {})['data-opts'] || {} : {};\n    if (importMeta !== '') {\n        opts.resourcesUrl = new URL('.', importMeta).href;\n    }\n    return promiseResolve(opts);\n};\nconst patchCloneNodeFix = (HTMLElementPrototype) => {\n    const nativeCloneNodeFn = HTMLElementPrototype.cloneNode;\n    HTMLElementPrototype.cloneNode = function (deep) {\n        if (this.nodeName === 'TEMPLATE') {\n            return nativeCloneNodeFn.call(this, deep);\n        }\n        const clonedNode = nativeCloneNodeFn.call(this, false);\n        const srcChildNodes = this.childNodes;\n        if (deep) {\n            for (let i = 0; i < srcChildNodes.length; i++) {\n                // Node.ATTRIBUTE_NODE === 2, and checking because IE11\n                if (srcChildNodes[i].nodeType !== 2) {\n                    clonedNode.appendChild(srcChildNodes[i].cloneNode(true));\n                }\n            }\n        }\n        return clonedNode;\n    };\n};\nexport { patchBrowser };\n","export { setNonce } from '@stencil/core';\nimport { bootstrapLazy } from '@stencil/core';\nimport { patchBrowser } from '@stencil/core/internal/client/patch-browser';\nimport { globalScripts } from '@stencil/core/internal/app-globals';\npatchBrowser().then(options => {\n  globalScripts();\n  return bootstrapLazy([/*!__STENCIL_LAZY_DATA__*/], options);\n});\n"],"mappings":"sFAKA,MAAMA,EAAe,KAajB,MAAMC,cAAyBC,IAC/B,MAAMC,EAAqE,GAC3E,GAAIF,IAAe,GAAI,CACnBE,EAAKC,aAAe,IAAIC,IAAI,IAAKJ,GAAYK,IACrD,CACI,OAAOC,EAAeJ,EAAK,ECnB/BH,IAAeQ,MAAKC,GAEXC,EAAc,iCAA8B,CAAAC,kBAAS,2BAAAC,eAAA,uBAAAC,uBAAA,iCAAAC,YAAA,mBAAAC,WAAA,kBAAAC,YAAA,mBAAAC,MAAA,IAAAC,SAAA,gBAAAC,MAAA,aAAAC,UAAA,iBAAAC,aAAA,qBAAAC,OAAA,cAAAC,iBAAA,yBAAAC,sBAAA,8BAAAC,sBAAA,+BAAAC,aAAA,oBAAAC,YAAA,mBAAAC,cAAA,sBAAAC,qBAAA,8BAAAC,uBAAA,+BAAAC,sBAAA,8BAAAC,aAAA,qBAAAC,SAAA,KAAAC,OAAA,KAAAC,cAAA,KAAAC,0BAAA,KAAAC,QAAA,KAAAC,aAAA,KAAAC,iBAAA,KAAAC,4BAAA,KAAAC,UAAA,KAAAC,aAAA,UAAAjC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dash-button-web",
-  "version": "0.0.16",
+  "version": "0.0.18-beta.0",
   "description": "Dash button Component",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",

package/readme.md

@@ -6,38 +6,43 @@ Developing a dash button web component based on the [Stencil.js](https://stencil
 
 To install the dash-button web component, copy and paste it into your frontend application.
 
-```sh
-  <script type='module' src='https://unpkg.com/dash-button-web@0.0.16/dist/esm/web-compnont.js'></script>
+> **Note:** Please refer to the [npm package page](https://www.npmjs.com/package/dash-button-web) to find the latest version, and replace `X.X.X` in the import script accordingly:
+```html
+<script type="module" src="https://unpkg.com/dash-button-web@X.X.X/dist/esm/web-compnont.js"></script>
+```
+
+> Note: Starting from v0.0.16, you need to add the FontAwesome stylesheet file to your application. If your application is already using this package, you can ignore this.
+
+```html
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" />
 ```
 
 You can find the NPM package named [dash-button-web](https://www.npmjs.com/package/dash-button-web "dash-button-web").
 
 If it is a framework, you wll need to configure more options. Therefore, follow the [Stencil.js](https://stenciljs.com/ "Stencil.js") documentation.
 
+## Prerequisites
+- To integrate DashButton into your application, you need to have a running Keycloak server.
+
 ## Installation Guide
 
-First, you need to install the latest Keycloak server, or you can use an existing one.
+Here, we show how to integrate DashButton into your frontend application.
 
 #### Step 1 - Setup Keycloak Server Application
 
-First, you need to start the Keycloak server. You can simply initiate the Docker image of the Keycloak server using the command below:
-
-```sh
-docker run -p 8080:8080 -e KEYCLOAK_ADMIN=admin -e KEYCLOAK_ADMIN_PASSWORD=admin quay.io/keycloak/keycloak:23.0.4 start-dev
-```
-
-If you need additional installation guidelines, please refer to the [Keycloak documentation](https://www.keycloak.org/guides#getting-started).
+First, you need to start your own **Keycloak instance** or use the **DS2 version**. We recommend using the DS2-based Keycloak instance.
 
-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'.
+##### Option 1 – Use DS2 Keycloak details
+You can use predefined Keycloak credentials to configure DashButton. The required details are summarized below.
 
-<!-- ![plot](./dash-button/screenshots/screenshot_02.png) -->
+- Keyclaok URL: **https://keycloak.ds2.icelab.cloud**
+- Realm: **ds2**
+- Client ID: **dashbtn**
 
-Next, create a client and configure URLs. For development purposes, set valid redirect URLs and set web origins as '*' as follows.
-
-<!-- ![plot](./dash-button/screenshots/screenshot_01.png) -->
-
-Next, create a user with credentials for testing purposes.
 
+##### Option 2 – Configure your own Keycloak client
+If you use your own version, you need to configure the realm, client, and test users.  
+Make sure the client is set up with a **client ID** and that **client authentication is disabled**.
 
 ### Step 2 - Configure frontend application
 
@@ -65,28 +70,15 @@ import { CUSTOM_ELEMENTS_SCHEMA} from '@angular/core';
 Next, you need to put the script file path in the **src/index.html** file header section as follows.
 
 
-```sh
-<script type='module' src='https://unpkg.com/dash-button-web@0.0.16/dist/esm/web-compnont.js'></script>
-```
-
-
-```sh
-Note: Starting from v0.0.16, you need to add the FontAwesome stylesheet file to your application. If your application is already using this package, you can ignore this.
-
-<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" />
-
-```
-
-Therefore, the header section of your index file should look like this:
-
 ```sh
 <head>
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="icon" type="image/x-icon" href="favicon.ico">
+  
+ <script type='module' src='https://unpkg.com/dash-button-web@X.X.X/dist/esm/web-compnont.js'></script>
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" />
 
-  <script type='module' src='https://unpkg.com/dash-button-web@0.0.16/dist/esm/web-compnont.js'></script>
-  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" />
-  ...
+...
 ```
 
 After that, you can pass configuration options as follows using the web component.
@@ -103,35 +95,42 @@ After that, you can pass configuration options as follows using the web componen
 | `auth-method` | `Authentication method` | `string` | `check-sso`, `(login-required)`                   |
 | `app-id` | `Application unique ID` | `string` | ``                   |
 | `portal-url` | `Portal URL` | `string` | ``                   |
-| `marketplace-url` | `Marketplace URL` | `string` | ``                   |
+| `portal-api-url` | `Portal API URL` | `string` | ``                   |
 | `show-unauthorized-modal` | `Show unauthorized modal` | `boolean` | `false`                   |
 | `other-link-type` | `Add new links for the menu` | `string` | `local or global`                   |
 | `application-display-name` | `Menu application display name` | `string` | `Applications`                   |
 | `disable-application-tab` | `disable application tab` | `boolean` | `false`                   |
 | `menu-view-type` | `the style of the menu` | `string` | `grid/list`                   |
 
+
 #### Theme Configuration options
 
 | Attribute         | Description | Type      | Default                   |
 | ----------------- | ----------- | --------- | ------------------------- |
-| `primary-color`       | `Set primary colour` | `string`  | ``               |
+|  `primary-color`       | `Set primary colour` | `string`  | ``               |
 | `accent-color`    | `Set secondary or accent color` | `string`  | `` |
 
 
-**AuthMethod**
+> **AuthMethod**
 Using the auth-method attribute updates the application's authentication workflow.
-
 `login-required`:  User is forced to the login screen if they are not logged in.
-
 `check-sso`: User is not forced to the login screen; instead, when the user clicks the login button, they are redirected to the login screen.
 
 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.
 
+> Note: Replace DashButton configuration with actual values.
+
+To get the module link for the Dashbutton, use the **portal-api-url** attribute and provide the Portal backend API endpoint URL.
+For the DS2 platform, you can use **https://portal-api.ds2.icelab.cloud** as the Portal API URL..
+
 ```sh
-<dash-button keycloak-uri="http://localhost:8080" realm="demo" client-id="testapp" auth-method="login-required" show-post-login-text="false"></dash-button>
+<dash-button keycloak-uri="http://localhost:8080" realm="demo" client-id="testapp" portal-api-url="replace_url" auth-method="login-required" show-post-login-text="false"></dash-button>
 ```
 After that test your application can be test with user credentials and then you can get an output similar to this.
 
+> Note: You need to create a new user. Please access the portal and create an account associated with your organization.
+
+<img src="../../dash-button/screenshots/screenshot_web_01.png" width="400">
 
 #### 2. Set up and install an HTML-based application
 
@@ -143,10 +142,10 @@ First, you need to import the script tag into the header section of your main HT
 <head>
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="icon" type="image/x-icon" href="favicon.ico">
-...
- <script type='module' src='https://unpkg.com/dash-button-web@0.0.16/dist/esm/web-compnont.js'></script>
- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css"
-...
+  
+  <script type='module' src='https://unpkg.com/dash-button-web@X.X.X/dist/esm/web-compnont.js'></script>
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" />
+  ...
 ```
 
 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.
@@ -157,8 +156,17 @@ After that, all you need to do is place the dash button in your preferred locati
 
 That's it, enjoy!
 
-##### Changelog: 
-v0.0.16
+---
+
+##### Changelog:
+
+**v0.0.18**
+- Bug fixed and improved documentation.
+
+**v0.0.17**
+- Added a new environment variable option for the Config Portal API endpoint.
+
+**v0.0.16**
 - Added customization option to change the main menu view type.
 - Added a new option to retrieve the main menu list and display it from the portal API.
 - Replaced all icons with FontAwesome. (Any third-party application now needs to import FontAwesome.)