wc-share-lib

This web component was generated with Angular CLI version 11.0.5.
wc-share-lib is a wrapper around share library to host it in a non-angular application.

To install share library web component on your local system, you need the following:

• Node.js
• npm package manager

Installation

npm install @aliasghar.ahmed/wc-share-lib . If there is conflict in peer dependencies please use --force while installation npm install @aliasghar.ahmed/wc-share-lib --force

Dependencies

This web component has the following dev dependencies. These will be installed along with wc-share-lib package and need not be installed explicitly.

• "@aliasghar.ahmed/share-lib": "^1.0.0",
• "@angular/cdk": "^11.0.0",
• "@angular/common": "~11.0.2",
• "@angular/core": "^11.0.2",
• "@angular/elements": "^11.0.5",
• "@angular/router": "~11.0.2",
• "@angular/forms": "~11.0.2"

Example usage

To enable the share-lib web component import "wc-share-lib.js" in your index.html.

<script type="module" src="/node_modules/@aliasghar.ahmed/wc-share-lib/wc-share-lib.js"></script>

Load web component element using the following code and assign an ID e.g. "share-wrapper". This ID will be used to pass the input data to share library

<lib-share-dialog id="share-wrapper"> </lib-share-dialog> 

Configure the share-lib using "shareOptions" input and get the response using "onShareComplete" eventlistner. Refer to the Input/output table below for more details.

    const element = document.getElementById('share-wrapper');
    element.shareOptions = shareOptions;// Refer the Json structure below, for shareOptions definition.
    element.addEventListener('onShareComplete', (e) => 
    {console.log(e.detail)}); // Refer the output table below, for more detials
    element.addEventListener('onShareClose', (e) => 
    {console.log(e.detail)}); 

Input Json structure for share library.

const shareOptions = {
      objectId: '', // Can be empty now. For future customizations component can use this property
      objectType: '',  // Can be empty now. For future customizations component can use this property
      shareData: {
        hideEditOption: false, // boolean to hide edit checkbox
        disableUserSelection: false, // boolean to disable user selection
        parentClass: 'web-share-dialog', // custom class to handle css by hosting app
        readGroups: [1024], // Existing share details of the object, list of groups with only Read access
        editGroups: [], // Existing share details of the object, list of groups with write access, leave it empty if not applicable
        readUsers: ['zp8k4'], // Existing share details of the object, list of users with only Read access
        editUsers: [], // Existing share details of the object, list of users with write access, leave it empty if not applicable
        readUsersDetails: [{"userId":"zp8k4","mobileNumber":"0015999","avatar":"zp8k4_1644232363000.png","emailId":"[email protected]","groups":[1221],"clientId":0,"allowChangePassword":true,"fName":"Abhishek","lName":"Singh","passwordExpiryDt":0}], // Existing share details of the object, details of the  list of users with read access
        editUsersDetails: [], // Existing share details of the object, details of the  list of users with write access
        showTeams: true, // boolean to show teams
        serviceUrl: LD_SERVICE_URL // LD Service URL (https://advantageqa2.iriworldwide.com/ld_engg)
      }
    }

Inputs

| Name | Description | ----------------------- | ---------------------------------------------------------------------------------------|
| shareOptions | This is a JSON provided to the share library.All the JSON properties are explained above.

Outputs

| Name | Function Name | Description | ------------------------------------ | ----------------- | -------------------------------------------------------------------------| | onShareComplete | onShare | This function will emit json object(shared data) when user clicks on share button in the popup | onShareClose | onClose | This function will emit the closure event of popup basically when user clicks on 'X' or 'Cancel' in the popup.