ngx-ids-enterprise-wc

v1.0.0-beta.1

Published

3 months ago

[![License](https://img.shields.io/badge/License-Apache%202.0-blue.svg)](https://opensource.org/licenses/Apache-2.0) [![npm version](https://img.shields.io/npm/v/ngx-ids-enterprise-wc.svg)](https://www.npmjs.com/package/ngx-ids-enterprise-wc)

0High
0Medium
0Low

tmcconechy

Ngx Ids Enterprise Web Components

Quick Start

npm i
npm run start  # Run sample app

Adding the lib to your project

Add imports:

"ids-enterprise-wc": "1.16.0-alpha.3", // brought in by ngx wrapper so may not be needed directly
"ngx-ids-enterprise-wc": "^1.0.0-beta.1"

Then do npm i

npm install ngx-ids-enterprise-wc # Install package

Add style sheet to the angular.json's assets section

"assets": [
  {
    "glob": "**/*",
    "input": "public"
  },
  {
    "glob": "**/*",
    "input": "./node_modules/ids-enterprise-wc/themes",
    "output": "themes"
  }
]

Add fonts to index.html

Due to GDPR we should not use google api in production but for testing you can add a link to the head.

<head>
  <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600&amp;display=swap" rel="stylesheet" />
</head>

In a real app should follow the instructions here.

Key Features

✨ Angular Integration

Full Angular forms & reactive forms support
Signal binding with writable signals
Content projection & tree-shaking
HTML IntelliSense & type checking

🎯 Developer Experience

Access methods & properties via exportAs
Possible Angular CDK integration
Built-in Angular services for dialogs
Solid Base for solving future Angular problems

<ids-pager #pager [total]="200" [page-size]="20" exportAs="ngxIdsPager"></ids-pager>
<ids-text>{{ ngxIdsPager.pageNumber }}}</ids-text>

Usage

1. Install Library

npm install ngx-ids-enterprise-wc --save

2. Import Components

import { NgxIdsButton, NgxIdsText } from "ngx-ids-enterprise-wc";

2. Add web components to Templates

<!-- Basic usage -->
<ids-text>Hello World</ids-text>

<!-- With Angular bindings -->
<ids-button [disabled]="isLoading()" (click)="handleClick()">{{ buttonText() }}</ids-button>

3. Forms Integration

<ids-input [(ngModel)]="value" placeholder="Enter text"></ids-input>
<ids-dropdown formControlName="selection" [data]="options()"></ids-dropdown>

📝 Note: Supports both camelCase and kebab-case attributes. Signals recommended for reactive state.

Component Status

Legend:

✅ Has sample app example
🚧 Component exists but no sample app example
⚠️ Has sample but with known issues
❌ Has sample but with blocking issues
⏭️ Component exists but skipping sample app for now

| Component | Status | Issue | | ------------------- | ------ | -------------------- | | About | ✅ | | | Accordion | ✅ | | | Action Panel | 🚧 | | | Action Sheet | 🚧 | | | Alert | ✅ | | | App Menu | ⏭️ | | | Area Chart | ✅ | | | Avatar | ✅ | | | Axis Chart | ⏭️ | | | Badge | ✅ | | | Bar Chart | 🚧 | | | Block Grid | 🚧 | | | Box | ⏭️ | | | Breadcrumb | ✅ | | | Button | ✅ | | | Calendar | 🚧 | | | Card | 🚧 | | | Checkbox | ✅ | | | Color | 🚧 | | | Color Picker | 🚧 | IDS-7971 | | Container | 🚧 | | | Counts | ⏭️ | | | Data Grid | ✅ | | | Data Label | 🚧 | IDS-15296 | | Date Picker | ✅ | | | Draggable | 🚧 | | | Drawer | ⏭️ | | | Dropdown | ✅ | | | Editor | 🚧 | | | Empty Message | ⏭️ | | | Error Page | 🚧 | | | Expandable Area | ✅ | | | Fieldset | 🚧 | | | Filter Field | 🚧 | | | Form | ✅ | | | Header | ✅ | IDS-15302 | | Hidden | ⏭️ | | | Hierarchy | 🚧 | | | Home Page | 🚧 | | | Hyperlink | ✅ | | | Icon | 🚧 | | | Image | ✅ | | | Input | ⚠️ | IDS-15049 | | Input Group | ⏭️ | | | KPI | ✅ | | | Layout Flex | 🚧 | | | Layout Grid | 🚧 | | | Line Chart | 🚧 | | | List Box | ⏭️ | | | List Builder | 🚧 | | | List View | 🚧 | | | Loading Indicator | ✅ | | | Lookup | ⚠️ | IDS-15048, IDS-15049 | | Masthead | 🚧 | | | Media Gallery | 🚧 | | | Menu | ⏭️ | | | Menu Button | 🚧 | | | Message | 🚧 | | | Modal | ✅ | | | Module Nav | ⚠️ | IDS-15302 | | Month View | 🚧 | | | Multiselect | 🚧 | | | Notification Banner | 🚧 | | | Pager | ✅ | | | Pie Chart | 🚧 | | | Popup | 🚧 | | | Popup Menu | 🚧 | | | Process Indicator | ⏭️ | | | Progress Bar | 🚧 | | | Progress Chart | 🚧 | | | Radar Chart | 🚧 | | | Radio | ✅ | | | Rating | ✅ | | | Scroll View | ⏭️ | | | Search Field | 🚧 | | | Segmented Control | 🚧 | | | Separator | ⏭️ | | | Skip Link | 🚧 | | | Slider | 🚧 | | | Spinbox | 🚧 | | | Splitter | ✅ | | | Stats | ⏭️ | | | Step Chart | 🚧 | | | Swaplist | 🚧 | | | Swappable | 🚧 | | | Swipe Action | ⏭️ | | | Switch | 🚧 | IDS-15295 | | Tabs | 🚧 | | | Tag | ✅ | | | Text | ⏭️ | | | Textarea | ✅ | | | Theme Switcher | ⚠️ | IDS-15049 | | Time Picker | ✅ | | | Toast | 🚧 | | | Toggle Button | 🚧 | | | Toolbar | ✅ | | | Tooltip | ✅ | | | Tree | 🚧 | | | Treemap | 🚧 | | | Trigger Field | 🚧 | | | Upload | 🚧 | | | Upload Advanced | 🚧 | | | Virtual Scroll | ⏭️ | | | Week View | 🚧 | | | Widget | ⏭️ | | | Wizard | ✅ | |

Published

Vulnerabilities

Links

Maintainers

Keywords