# dc-common

> **Steps To follow to integrate Dc-Common NPM Library:-**

Latest version **3.0.0** (published 2024-05-07) · MIT license · 0 weekly downloads

## Install

```sh
npm install dc-common
pnpm add dc-common
yarn add dc-common
bun add dc-common
```

## Health

**Score 5/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: insecure dependencies; abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 3.0.0 |
| Published | 2024-05-07 |
| First published | 2023-09-08 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 45 |
| Unpacked size | 8.6 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | fernandez7108, binayak336 |

## Links

- npm: https://www.npmjs.com/package/dc-common
- npm.io page: https://npm.io/package/dc-common

## Dependencies (45)

- [ajv](https://npm.io/package/ajv.md) ^6.12.6
- [npm](https://npm.io/package/npm.md) ^6.14.16
- [cors](https://npm.io/package/cors.md) ^2.8.4
- [rxjs](https://npm.io/package/rxjs.md) ^6.6.7
- [xlsx](https://npm.io/package/xlsx.md) ^0.14.2
- [jStat](https://npm.io/package/jStat.md) ^1.8.5
- [tslib](https://npm.io/package/tslib.md) ^1.9.0
- [jquery](https://npm.io/package/jquery.md) ^3.7.1
- [jshint](https://npm.io/package/jshint.md) ^2.13.6
- [lodash](https://npm.io/package/lodash.md) ^4.17.21
- [moment](https://npm.io/package/moment.md) ^2.30.1
- [core-js](https://npm.io/package/core-js.md) ^2.5.7
- [express](https://npm.io/package/express.md) ^4.19.2
- [numeral](https://npm.io/package/numeral.md) ^2.0.6
- [zone.js](https://npm.io/package/zone.js.md) ~0.10.3
- [cisco-ui](https://npm.io/package/cisco-ui.md) git+http://gitlab-sjc.cisco.com/cisco-ui/pattern-library.git#v1.3.3-official
- [bootstrap](https://npm.io/package/bootstrap.md) ^3.4.1
- [node-sass](https://npm.io/package/node-sass.md) ^4.14.1
- [popper.js](https://npm.io/package/popper.js.md) ^1.14.4
- [sortablejs](https://npm.io/package/sortablejs.md) ^1.7.0
- [body-parser](https://npm.io/package/body-parser.md) ^1.20.2
- [rxjs-compat](https://npm.io/package/rxjs-compat.md) ^6.6.7
- [@angular/cdk](https://npm.io/package/@angular/cdk.md) ^11.2.13
- [@angular/core](https://npm.io/package/@angular/core.md) ^11.2.14
- [@angular/forms](https://npm.io/package/@angular/forms.md) ^11.2.14
- [ngx-order-pipe](https://npm.io/package/ngx-order-pipe.md) ^2.2.0
- [ngx-sortablejs](https://npm.io/package/ngx-sortablejs.md) ^11.1.0
- [@angular/common](https://npm.io/package/@angular/common.md) ^11.2.14
- [@angular/router](https://npm.io/package/@angular/router.md) ^11.2.14
- [ag-grid-angular](https://npm.io/package/ag-grid-angular.md) ^19.1.0
- [ng2-file-upload](https://npm.io/package/ng2-file-upload.md) ^1.4.0
- [@angular/compiler](https://npm.io/package/@angular/compiler.md) ^11.2.14
- [@angular/localize](https://npm.io/package/@angular/localize.md) ^11.2.14
- [@angular/material](https://npm.io/package/@angular/material.md) ^11.2.13
- [ag-grid-community](https://npm.io/package/ag-grid-community.md) ^19.1.1
- [angular-highcharts](https://npm.io/package/angular-highcharts.md) ^9.0.11
- [@angular/animations](https://npm.io/package/@angular/animations.md) ^11.2.14
- [@cisco-ngx/cui-pipes](https://npm.io/package/@cisco-ngx/cui-pipes.md) ^11.1.2
- [@cisco-ngx/cui-utils](https://npm.io/package/@cisco-ngx/cui-utils.md) ^11.1.2
- [@ng-select/ng-select](https://npm.io/package/@ng-select/ng-select.md) ^5.1.0
- [material-design-icons](https://npm.io/package/material-design-icons.md) ^3.0.1
- [@cisco-ngx/cui-services](https://npm.io/package/@cisco-ngx/cui-services.md) ^11.1.2
- [@angular/platform-browser](https://npm.io/package/@angular/platform-browser.md) ^11.2.14
- [@cisco-ngx/cui-components](https://npm.io/package/@cisco-ngx/cui-components.md) ^11.1.2
- [@angular/platform-browser-dynamic](https://npm.io/package/@angular/platform-browser-dynamic.md) ^11.2.14

## Recent versions

- 3.0.0 (latest) — 2024-05-07
- 2.4.0 — 2024-04-05
- 2.3.0 — 2024-04-05
- 2.1.0 — 2024-04-03
- 2.0.0 — 2024-04-02
- 1.100.0 — 2023-09-08

## README

# DC-Common NPM Library

**Steps To follow to integrate Dc-Common NPM Library:-**

**Dc-Common NPM Library URL:-**

[https://www.npmjs.com/package/dc-common](https://www.npmjs.com/package/dc-common)

1. **Install the Library:-**

Install the library into your application by the command

npm i dc-common

1. Import " **HeaderFooterModule"** and **"overlayService"** to your app.module.ts
2. import { NgModule } from'@angular/core';
3. import { BrowserModule  } from'@angular/platform-browser';
4. import { AppComponent } from'./app';
5.  import { HeaderFooterModule } from '../../node\_modules/dc-common/src/app/headerFooter.module';
6. import { OverlayService } from '../../node\_modules/dc-common/src/app/services/verlay.service';
7. @NgModule({
8.   imports: [BrowserModule, HeaderFooterModule],
9.   declarations: [AppComponent],
10.   bootstrap: [AppComponent],
11.   providers: [OverlayService],
12. })
13. exportclassAppModule {}
14.

1. Now let's add the component definition to our template. Edit app/app.component.html as fallows
2. \<divclass="content-fluid"\>
3.   \<DC-Sidebar-Tab\>\</DC-Sidebar-Tab\>
4.   \<main#mainWrapperclass="main\_wrap"\>
5.     \<DC-Header-Tab\>\</DC-Header-Tab\>
6.     \<divclass="container"\>
7.       \<router-outlet\>
8.         \<endpoint-watcher\>\</endpoint-watcher\>
9.       \</router-outlet\>
10.     \</div\>
11.     \<DC-Footer-Tab\>\</DC-Footer-Tab\>
12.   \</main\>
13. \</div\>

4.  Now let's add the overlayService in the components and add the path of overlayservice pointing to  node\_Module and pass the Track Name, Page Name, Tab Names(optional perameter) to overlayService by the method setOverlayImage.

Eg:-

import { Component, OnInit, Output, EventEmitter, ElementRef, ViewChild,

HostListener, Input, ChangeDetectorRef , OnChanges} from'@angular/core';

//import OverlayService pointing the path to node\_module

import { OverlayService } from'../../node\_modules/header-footer/src/app/services/overlay.service';

@Component({

  selector:'app-root',

  templateUrl:'./app.component.html',

  styleUrls: ['./app.component.css']

})

exportclassAppComponentimplementsOnInit {

  constructor(

//to initiate the overlayService in the component add overlayService in the constructor

    privateoverlayService: OverlayService,

  ) { }

  ngOnInit() {

//pass the Track Name, Page Name, Tab Names(optional perameter) to overlayService by the method setOverlayImage

    this.overlayService.setOverlayImg('Hardware', 'Home');

  }

}

**Parameters to be passed for DC-Header-Tab :-**

**Parameters Type:-**

// Input Parameters from other applications

// UserId and UserName is to be passed in order to mitigate the getUserId calls

  userData: any = {

    userId:'anthfern',

    userName:'Subba Reddy Nusum',

  };

// piwikData has to be passed PiwikSite and piwikId are different for different tracts

  piwikData: any = {

     piwikSite:'\*.devscui-stg.cloudapps.cisco.com',

     piwikSiteId:'10',

  };

// Base Url should be passed to let library known in what environment the user is in

  localHostMode: string = 'https://dc-stg1.cisco.com';

// End url has to passed by the Tracks who are using wrapper service if not default url will be used

  getMenuListUrl: string = 'devscapp/dsc/getMenuList';

  getHWPUserAccessUrl: string = 'devscapp/dsc/getHWPUserAccess';

  notificationsUrl: string = 'devscapp/dsc/notifications1';

  getSEEMAdminsUrl: string = 'getSEEMAdmins';

  overlayUrl: string = 'devscapp/images/imagemap';

  getTracksUrl: string = 'devscapp/sef/getReleaseRevisionTracks';

  //Input parameters ends here

How to pass parameters in app.component.html for DC-Header-Tab Tag

\<DC-Header-Tab[piwikData]='this.piwikData'[localHostMode]='this.localHostMode'

[getMenuListUrl]='this.getMenuListUrl'

[getHWPUserAccessUrl]='this.getHWPUserAccessUrl'

      [notificationsUrl]='this.notificationsUrl'[getSEEMAdminsUrl]='this.getSEEMAdminsUrl'[overlayUrl]='this.overlayUrl'[getTracksUrl]='this.getTracksUrl'\>\</DC-Header-Tab\>



## Angular update 5-6
Angular CLI: 6.2.9
Node: 10.16.3
***********************
-- npm install @angular/cli@6.2.9
-- ng update @angular/cli (this command will automatically generate angular.json file and remove the angular-cli.json )  
-- npx @angular/cli@6 update @angular/cli@6 @angular/core@6
while running the above command found Incompatible peer dependency in the @angular/material
again run the below command
--npx @angular/cli@6 update @angular/cli@6 @angular/core@6
so removed "@angular/material": "^8.2.3",Then
All module update successfully
-- npm i @angular/material
--  npm i @angular/cdk@6.4.7
-- npm i rxjs-compat@6.6.7

-- npm audit fix
Try to deleted the package-lock.json and delete the complete node module
again I did the npm install 

## Angular update 6-7
Angular CLI: 7.3.10
Node: 10.16.3

npm uninstall -g @angular/cli
npm cache verify
npm cache clean
npm cache clean --force
npm install -g @angular/cli@ 7.3.10
ng version
*removed the rxjs-compat

- npx @angular/cli@7 update @angular/cli@7 @angular/core@7
Not found : cisco-ui
"cisco-ui": "git+http://gitlab-sjc.cisco.com/cisco-ui/pattern-library.git#v1.3.3-official",
Removed the above package

Not found : @cisco-ngx/cui-components
"@cisco-ngx/cui-components": "git+https://gitlab-sjc.cisco.com/anthfern/cui-components.git",
Removed the above package

Package "@angular/material" has an incompatible peer dependency to "@angular/animations" (requires "^17.0.0 || ^18.0.0" (extended), would install "7.2.16").
Incompatible peer dependencies found. See above.
"@angular/material": "~17.3.2",
Removed the above package

Package "angular-highcharts" has an incompatible peer dependency to "@angular/core" (requires "^5.0.0" (extended), would install "7.2.16").
Incompatible peer dependencies found. See above.
"angular-highcharts": "^5.2.13",
Removed the above package

- npx @angular/cli@7 update @angular/cli@7 @angular/core@7
  - Now package is updated to 7 success fully

- now add all the above package which are removed while doing the update and add those package into package.json and delete the package-lock.json and then do Npm install 

-- npm run local through error so due to rxjs-compat
So re install 
projcet running local fine

---
_Source: https://npm.io/package/dc-common · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._