Rocket-te-ui NPM

Rocket-te-ui

It is a wrapper, and it has ability to update your ui library. We use the carbon10 and angular10 in this project. For your project, it should install carbon-component-angular, carbon-component, carbon-icon.

This project was generated with Angular CLI version 9.1.3.

How to use to NPM

ng build rocket-ui-lib chang version in package.json npm publish

Go to bzshared/webmart npm install

Development server

Run ng serve for a dev server. Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.

Code scaffolding

Build

Run ng build to build the project. The build artifacts will be stored in the dist/ directory. Use the --prod flag for a production build.

Running unit tests

Run ng test to execute the unit tests via Karma.

Running end-to-end tests

Run ng e2e to execute the end-to-end tests via Protractor.

Further help

To get more help on the Angular CLI use ng help or go check out the Angular CLI README.

About scss folder

Used for rocket-ui, should import scss/styles.scss in project.

Components

1. rocket-tooltip

<rocket-tooltip options="tooltip"> normal mode: options: {placement, alignment, content, template, trigger} placement: "bottom", "top" alignment: "start", "center", "end"

template Mode template: show costomer defined ng-template in tooltip trigger: 'click', 'hover' placement: "bottom", "top"

2. rocket-select

<rocket-select id='select' options="{data: data, label: 'label'" tooltip ="{show, content, template}" selected="selectNode" (onChange)="change($event)"> options: { size: sm, md, xl, marked, // required or not label, display, // 'inline', 'default' selected, // secondary way to bind ngModel data: { value, text/label } group mode: isGroup: true, data: [{ text, children: {text, value} }] } id selected: primary way to bind ngModel tooltip: view rocket-tooltip onChange(e): emit e how to set selected in parent component: change($event) { this.selectNode = $event.target.value; }

3. rocket-text

<rocket-text id='1' options="options" tooltip="tooltips" (onChange) = 'onChange($event)'> options: { label, marked, // required or not placeholder, disabled, isInvalid, validationText, data } tooltip: { show,
content } id onChange(): emit $event

4. rocket-text-area

<rocket-text-area id='2' options="options" tooltip="tooltips" (onChange) = 'update($event)'> options: { label, marked, // required or not placeholder, disabled, isInvalid, validationText, data, //ngModel rows, cols } tooltip: { show,
content } id change(): emit $event

5. rocket-table

<rocket-table id='table' data="data" options="options" (selectList)="handleSelectList($event)" (selectAction)="selectAction($event)" #table> options: { showPagination, showBtn: {add, import, export, search}, showSelectionColumn, pageLength: default 15， itemsPerPageOptions<number[]>: default 15, 20, 30, 40, 50, totalDataLength, currentPage } id data: {headers, rows} selectAction(): emit {data, type} //select event in overflow and button // edit, reset-pwd, delete, add, upload ... selectList(): select row by checkbox of each row.

6. rocket-radio

<rocket-radio id='radio' options="{data, lable, disabled, orientation, selectedIndex}" tooltip ="{show, content, template}" (onSelect)="select($event)" #radio>

options: { data: {value, label/text}, label, marked, // required or not disabled, orientation: 'vertical', 'horizontal', selectedIndex: For ngModel, selected index which is used for compatible with carbon 9 } id onSelect: select event, emit select item in data. tooltip: view rocket-tooltip update check status: this.radio.update(newData) ;

7. rocket-notificate

<rocket-notificate options="options" id='notification' (close)="close()"> options: { type error, success, warning, info, title, message, showClose } id close(): emit close event.

8. rocket-modal

<rocket-modal id='modal' options="options" (submit)="submit($event)" (close)="close($event)">

 <div>Template which will show in modal center</div>

9. rocket-checkbox

<rocket-checkbox id='checkbox' options="{disabled: disabled, checked: enableKeepAlive}" (onChange)="triggerKeepAlive($event)" tooltip ="{show, content, template}"> {{"sessions.keepAlive.enableKeepAlive" | translate}}

`options`:

{
disabled, checked: true/false, label: secondary way for text } onChange(): selected event {{label}}: primary way for text tooltip: view rocket-tooltip id

10. rocket-button

<rocket-button id='btn' options='options' (onClick)='click()'> opions { kind: "primary", "secondary", "tertiary", "ghost", "danger", "danger--primary", size: "normal", "sm", "field", disabled, text } id onClick(): emit click event

11. rocket-progress-indicator

<rocket-progress-indicator id='progress' options="{steps: steps, current: current}"> opions { steps: [ { text, state: 'current', 'complete', 'incomplete', 'error }], current } id

12. rocket-accordion

<rocket-accordion options="{title}" expanded='expanded'>

options: { title } expanded id

13. rocket-accordion-item

14. rocket-toggle

<rocket-toggle options="contextMenuOption" tooltip="{show, content}" (onChange)="change($event)"> options: { disabled, enable, size: {"md", "sm"}, label } tooltip onChange(): emit array id

14. rocket-search

<rocket-search options='options' (onChange)="change($event)" (clear)="clear()">

options: { placeholder, size: "sm", "md", "xl" label } onChange(): emit change event clear(): emit clear event id

15. rocket-icon

type: 'view' 'view-off' 'information' 'checkmark-filled' 'chevron-up' 'chevron-down' 'chevron-left' 'chevron-right' 'arrow-left' 'arrow-right' 'home' 'settings' 'user' 'data-structured'<'session'>, 'data-1'<'group'> 'checkmark' 'radio-button' 'collaborate'<'login'> 'play-outline' 'close' 'upload' 'delete' 'unlocked' 'download' 'folder' 'folder-add' 'add' 'subtract-alt' 'document-export' 'renew' 'terminal' 'edit' 'undo' 'y-axis' 'caret-up' 'caret-down' 'settings-adjust' 'visual-recognition 'warning-filled' 'warning' 'document' 'copy-link'

options { size: 16, 20, 14, 32 color, color, stroke, strokeWidth, isCenter: for 16 size vertical isImg: use other type as icon not svg src, width, height }