wc-Selector-lib

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

To install wc-selector-lib web component on your local system, you need the following:

• Node.js
• npm package manager

Installation

npm install @aliasghar.ahmed/wc-selector-lib --save

Dependencies

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

• "@aliasghar.ahmed/selector-lib": "^2.0.0",
• "@angular/cdk": "^18.2.4",
• "@angular/common": "^18.2.4",
• "@angular/core": "^18.2.4",
• "@angular/elements": "^18.2.4",
• "@angular/router": "^18.2.4",
• "@angular/forms": "^18.2.4",
• "@ali-hm/angular-tree-component": "^12.0.5",
• "@ng-bootstrap/ng-bootstrap": "^11.0.1",
• "cdk-drag-scroll": "0.0.6",
• "ngx-perfect-scrollbar": "^10.0.1",
• "rxjs": "~7.8.0"

Example usage

Load the single entry file wc-selector-lib.js and the built styles so the component is styled. Chunks are not merged; they stay as separate chunk-*.js files and must be served from the same directory as wc-selector-lib.js.

<link rel="stylesheet" href="/path-to-selector-package/styles.css">
<script type="module" src="/path-to-selector-package/wc-selector-lib.js"></script>

(Deploy the whole package folder so chunk-*.js and styles.css are next to wc-selector-lib.js.) Create a div using the following code and assign an ID e.g. "selector-wrapper". This ID will be used to render the selector to the DOM.

<div id="selector-wrapper"> </div> 

Use the following code to access the div id "selector-wrapper" and insert the Selector-lib tag to it. Configure the selector-lib using "datasetDef" input and get the response using "selectedData" eventlistner.
Refer to the Input/output table below for more details.

    const el = document.getElementById('selector-wrapper');
    el.style.display = 'block';
    el.innerHTML =`<selector-lib id="list"> </selector-lib>`;
    const element = document.getElementById('list');
    element['dispose'];// Refer the output table below, for more detials. 
    element.dimensionInfo = datasetDef;// Refer the Json structure below, for datasetDef definition.
    element.addEventListener('selectorData', (e) => 
    {console.log(e.detail);// Refer the output table below, for more detials. 
    element.dimensionInfo = datasetDef;});
    element.addEventListener('resetSelectedData', (e) => 
    {console.log(e.detail);  
    element.dimensionInfo = datasetDef;});

the wc-selector-lib package supports the following selector types:

• Filter selector
• Advance selector

Add the following CSS to your HTML element for enabling only filter Selector.

#Selector-wrapper{
 width:230px;
 position: absolute;
 top: 0px;bottom: 0px;
 padding: 10px;
 background: #eeeff0;
 border-right: 1px solid #e4e4e4;
}

Json structure for selector Input.

const datasetDef = {
    serviceURL: 'Your LD_service Url',
    IsSaveview: true,
    selectorType : 'advanceSelector',//optional key.,
    objectType:'adhoc',//option key.,
    objectId:null,
    dimensions: [
        {
            isAsymmetricSelection: false,
            dimensionName: 'Product',
            dispDimName: 'Product',
            editable: true,
            members: [
              {
                fullPath: 'Product.Standard Hierarchy.TOTAL',
                functionName: null,
                id: ':Category:3506881:3506915:3506918:3506959:4527492',
                isSelected: true,
                level: 'Category',
                name: 'ICE CREAM/SHERBET',
                timeAggregate: null,
                type: null
            }
             ],
            modelId: 1100,
            multiSelect: false,
            visible: true,
            allowedLevels: [
              {
                hierId: 19764169,
                hierFullPath:"Product.Standard Hierarchy",
                levels: ["Departments by Top Parent Companies Hierarchy", "Parent Company"]
              }
            ],
            allowedHierarchies: [
              {
                id: 19764169,
                fullPath: "Product.Standard Hierarchy"
              },
              {
                id: 19764170,
                fullPath: "Product.Departments by Top Parent Companies Hierarchy"
              }
            ],
            multipleHierarchySelections: true
        }, {
            alias: 'MeasuresNo Transformation_7',
            isAsymmetricSelection: false,
            dimensionName: 'Measures',
            dispDimName: 'Measures',
            editable: true,
            id: '354f4fff4d4bf35e:2a6ee58e:176b27824cb:-6bb2',
            members: [
              {
                fullPath: 'Measures.Sales : FOLDER.Dollar Sales',
                functionName: null,
                id: '!M2_1',
                isSelected: true,
                level: 'Sales : FOLDER',
                name: 'Dollar Sales',
                timeAggregate: null,
                type: null
            }
            ],
            modelId: 1100,
            multiSelect: false,
            visible: true
        }, {
            isAsymmetricSelection: false,
            dimensionName: 'Periodicity',
            dispDimName: 'Periodicity',
            editable: true,
            members: [
            {
                fullPath: 'Periodicity.Periodicity : FOLDER.2 Years Ago',
                functionName: null,
                id: '5599880',
                isSelected: true,
                level: 'Periodicity : FOLDER',
                name: '2 Years Ago',
                timeAggregate: null,
                type: null
            }],
            modelId: 1100,
            multiSelect: true,
            visible: true,
        }
    ],
    setDefaultbuttonConfig: false,
      buttonConfig: [
        {
          secondaryButton: true,
          buttonName: 'cancel'
        }, {
        primaryButtonOne: false,
        buttonName: 'Apply'
      },
      {
        primaryButtonTwo: true,
        buttonName: 'Apply & Run'
      }
      ]
};

Inputs

| Name | Description | ----------------------- | ---------------------------------------------------------------------------------------| | dimensionInfo | This is the JSON structure provide to the selector. All the JSON properties are explained below.
| serviceURL | Add your LDservice URL | IsSaveview | It is a Required Key. Set it true. | selectorType | It is an optional key. The selector has type as Filter by default. We can access the simple and advance selector from filter Selector. To enable the advance selector set the value of selectorType as "advanceSelector". | objectType | It is an optional key to specify the type of object type in service URL. | objectId | It is an optional key to specify the id of an object in service URL. | dimensions | Contains an array of dimension objects. |allowedLevels | this is an optional array of allowed levels. which will display in advance selector's level dropdown. |allowedHierarchies | this is an optional array of allowed hierarchies. which will display in advance selector's selected hierarchcy dropdown |setDefaultbuttonConfig | Set this property false for customizing the visibility of the advance selector buttons. Refer to the button configuration in the above JSON structure.

Outputs

| Name | Function Name | Description | ------------------------------------ | ----------------- | -------------------------------------------------------------------------| | selectorData | onApply | This function will Emit an array of dimension objects on click of Apply->Run/Apply&Run button. It contains the selected/unselected members from the selector. | resetSelectedData | resetSelector | This function will reset the selector changes. | dispose | dispose | This function will clean the selector resources.