{"id":14990241,"url":"https://github.com/pegasystems/mashup-webcomponent","last_synced_at":"2025-04-12T02:10:29.994Z","repository":{"id":37856341,"uuid":"206825282","full_name":"pegasystems/mashup-webcomponent","owner":"pegasystems","description":"Web Component using the DX API to expose a case type as a Mashup. A complete demo of the application is available at https://pegasystems.github.io/mashup-webcomponent","archived":false,"fork":false,"pushed_at":"2025-01-18T04:41:10.000Z","size":13850,"stargazers_count":13,"open_issues_count":0,"forks_count":7,"subscribers_count":9,"default_branch":"master","last_synced_at":"2025-03-25T21:47:40.633Z","etag":null,"topics":["lit-element","lit-html","mashup","pegasystems","web","webcomponent"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/pegasystems.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":"SECURITY.md","support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-09-06T15:39:05.000Z","updated_at":"2025-03-09T05:06:34.000Z","dependencies_parsed_at":"2023-02-02T20:16:01.851Z","dependency_job_id":"e34c5ee9-b5f2-4276-b655-1a2e33244fbb","html_url":"https://github.com/pegasystems/mashup-webcomponent","commit_stats":{"total_commits":178,"total_committers":5,"mean_commits":35.6,"dds":0.4157303370786517,"last_synced_commit":"5fa0766fbf5131e2672d5ceafbbe97ab37cf96de"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pegasystems%2Fmashup-webcomponent","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pegasystems%2Fmashup-webcomponent/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pegasystems%2Fmashup-webcomponent/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pegasystems%2Fmashup-webcomponent/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/pegasystems","download_url":"https://codeload.github.com/pegasystems/mashup-webcomponent/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248505929,"owners_count":21115354,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["lit-element","lit-html","mashup","pegasystems","web","webcomponent"],"created_at":"2024-09-24T14:19:46.024Z","updated_at":"2025-04-12T02:10:29.960Z","avatar_url":"https://github.com/pegasystems.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# mashup-webcomponent\n\nThis project delivers a Web component that leverages the DX API to display a case type from the Pega Platform through Mashup. A complete demo of the application is available at https://pegasystems.github.io/mashup-webcomponent.\n\n![](https://github.com/pegasystems/mashup-webcomponent/workflows/Main%20workflow/badge.svg)\n\nThe mashup web component is not a replacement of the Pega Mashup and is limited in terms of supported Pega UI components due to using the DX API to generate the UI dynamic.\n\nThe benefits of the Mashup component are:\n\n- no need for inner iframe\n  -\u003e the case type ui is completely integrated with the main document\n  -\u003e no need for recalculating the height of the inner iframe every time the content changes\n- no need to align your document styles with the Pega Mashup app\n  -\u003e the Web component can run as a light DOM and gets all the styling from the core components from the top document or as a shadow DOM\n- improved performance\n  -\u003e The JS file needed to render the UI is small (around 80Kb) and is 10X faster to be downloaded and parsed by the browser than the JS files required by Pega Web Mashup.\n\nThis web component is using lit library for the template and rendering of the Web component. It supports all modern browsers (Firefox, Chrome and Safari). It does not work on IE11 and Edge.\n\nThe Web component supports the following actions:\n\n- Display the worklist - can open assignments inside the same card\n- Create a case\n- Open an assignment\n- Open a case - will show the review harness of the case along with the list of assignmented and child cases\n\nThe docs folder contains the JS library to load to use the Web Component:\n\n- pega-mashup-light-webcomponent.js =\u003e can be loaded if you only need to use the light DOM component (pega-mashup-light) - it is a smaller file since it does not include any CSS content\n- pega-mashup-light-webcomponentv2.js =\u003e same as above but using the DX v2 API\n- pega-mashup-webcomponent-all.js =\u003e can be used if you intend to use the Shadow DOM version of the web component (pega-mashup). includes all versions (v1 and v2 + light)\n- pega-mashup-webcomponent-light-all.js =\u003e contains both the v1 and v2 components of the light DOM version\n\n## For developers\n\nTo build and compile the application - use the following commands:\n\n### Tools to install\n\ninstall npm from https://nodejs.org/en/download/\n\n### Project setup\n\n```\nnpm install\n```\n\n### Compiles and hot-reloads for development.\n\n```\nFor core component: npm run dev:core\nFor UK GDS: npm run dev:govuk\nFor US WDS: npm run dev:govus\nFor FR Government system (DSFR): npm run dev:govfr\n```\n\n### Compiles and minifies for production\n\n```\nnpm run build\n```\n\n### Lint the Javascript files\n\n```\nnpm run lint\n```\n\n### Run unit tests\n\n```\nnpm run test\n```\n\n### Demo\n\n- Core application: https://pegasystems.github.io/mashup-webcomponent\n- UK Government Design system: https://pegasystems.github.io/mashup-webcomponent/demos/ukgds/main.html and https://pegasystems.github.io/mashup-webcomponent/demos/ukgds/worklist.html\n- US WDS: https://pegasystems.github.io/mashup-webcomponent/demos/uswds/main.html and https://pegasystems.github.io/mashup-webcomponent/demos/uswds/main1.html\n- France Design system de l'etat: https://pegasystems.github.io/mashup-webcomponent/demos/frgov/main.html and https://pegasystems.github.io/mashup-webcomponent/demos/frgov/demo.html and and https://pegasystems.github.io/mashup-webcomponent/demos/frgov/worktable.html\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpegasystems%2Fmashup-webcomponent","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpegasystems%2Fmashup-webcomponent","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpegasystems%2Fmashup-webcomponent/lists"}