@aliasghar.ahmed/wc-selector-lib v2.0.6

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": "^14.0.4",
• "@angular/common": "^14.0.4",
• "@angular/core": "^14.0.4",
• "@angular/elements": "^14.0.4",
• "@angular/router": "^14.0.4",
• "@angular/forms": "^14.0.4",
• "@circlon/angular-tree-component": "^10.0.1",
• "@ng-bootstrap/ng-bootstrap": "^7.0.0",
• "cdk-drag-scroll": "0.0.6",
• "ngx-perfect-scrollbar": "^10.0.1",
• "rxjs": "~6.6.0"

Example usage

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

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

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

Outputs