@aliasghar.ahmed/wc-share-lib

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":"[e-mail]","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.