opc-input-chip Component 👋

Web component based on Lit Element for input chip filed

Usage

Install opc-input-chip

npm install --save @one-platform/opc-input-chip 

For VanillaJS

• Import component

  import '@one-platform/opc-input-chip';

• Add component in html

  <opc-input-chip id="myInputChip"></opc-input-chip>

• Using the default chips in js using the attribute chips

  const myInputChipRef = document.querySelector('#myInputChip'); 
  myInputChipRef.chips = [
    { id: 1, name: 'Test chip', isRemovable: true }
  ];

For Angular

• In your app.module include the CUSTOM_ELEMENTS_SCHEMA and import the component

import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import '@one-platform/opc-input-chip';

@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    BrowserModule,
  ],
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

• Add component in any component html template

  <opc-input-chip chips="{{ MockChips }}"></opc-input-chip>

For React

• Import the component in App.js

  import '@one-platform/opc-input-chip';

• Add component in any component html render

  <opc-input-chip chips={this.state.MockChips}></opc-input-chip>

Attributes

chips

• Input: Array of Object with type signature as { id: number, name: string, isRemovable: Boolean }
  • Example

  const myInputChipRef = document.querySelector('#myInputChip'); 
  myInputChipRef.chips = [
    { id: 1, name: 'Test chip', isRemovable: true }
  ];

Event Emitters

opc-input-chip:added

• opc-input-chip:added event is fired when the a chip is added to the component. e.g.

  myInputChipRef.addEventListener('opc-input-chip:added', (e) => {
    console.log(e)
  });

opc-input-chip:removed

• opc-input-chip:removed event is fired when the a chip is removed from the component. e.g.

  myInputChipRef.addEventListener('opc-input-chip:removed', (e) => {
    console.log(e)
  });

Themes

• Only default themes

### CSS Variables

| CSS Variables | Value (default) | |---------|----------------------| |--opc-input-chip--BorderColor:| $opc-color--black-300, #D2D2D2| |--opc-input-chip--TextColor:| $opc-color--black-900, #151515| |--opc-input-chip--TextTransform:| lowercase | |--opc-input-chip--Color:| $opc-color--blue-400, #0066CC| |--opc-input-chip--BackgroundColor:| $opc-color--blue-100, #BEE1F4| |--opc-input-chip--FontWeight:| 400|

Development server

Run development server

  npm run dev opc-input-chip

Build

  npm run build opc-input-chip

Run tests

  npm run test

🤝 Contributors

👤 Sumeet Ingole